Olodoc is written with Boostrap 5 css framework and supports extensive customizations. Before creating a new documentation project, you may want to customize the colors or components of your project. Customization operations can be easily done with the Olodoc Boostrap + Vite Skelethon template generation tool, follow the steps below.
Enter your project root.
cd /var/www/olodoc-bootstrapInstall node modules.
npm iRun the application
npm run devVisit your local address from your browser.
The template generator allows you to create your documentation using the colors and fonts you want by changing the values of the .scss variables.
- olodoc-bootstrap
+ node_modules
- src
- css
_variables.scss
fonts.scss
olodoc.css
prism.css
styles.scss
+ dist
+ images
+ js
+ views
.gitignore
package.json
server.js
vite.config.jsOpen your _variables.scss file and change the $primary: #0a7248; variable's value as #f75b00.
//
// All Boostrap Variables:
// Here --> https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
//
$primary: #f75b00; // #0a7248;
$secondary: #636363;
$success: #42ba96;
$info: #7c69ef;
$warning: #fad776;
$danger: #df4759;
// ...Run the application again
npm run dev
Visit your local address from your browser, if everything went well you will see that the template main colors have changed as below.
- Go to your command line type build command.
npm run buildif everything went well you will see the built message like below.
✓ 92 modules transformed.
dist/index.html 14.69 kB │ gzip: 4.21 kB
dist/assets/index-BJBYL9CF.css 313.94 kB │ gzip: 41.29 kB
dist/assets/index-C1TT0zOb.js 121.41 kB │ gzip: 25.79 kB
✓ built in 4.17s
root@localhost:/var/www/olodoc-bootstrap# - Copy your generated index-*.css and index-*.js files.
- olodoc-bootstrap
- dist
- assets
index-BJBYL9CF.css
index-C1TT0zOb.js
index.html
+ node_modules
+ views
.gitignore
package.json
server.js
vite.config.js- Then paste them into your php project /public/assets/ directory.
- olodoc-skeleton
+ bin
+ config
+ data
- public
- assets
+ css
+ img
+ js
index-BJBYL9CF.css
index-C1TT0zOb.js
+ images
.htaccess
index.php
robots.txt
sitemap.xml
+ src
+ templates
+ vendor
.gitignore
composer.json- Finally you need update new filenames which they located in /templates/layouts/default.phtml file.
<!DOCTYPE html>
<html lang="<?php echo LANG_ID?>">
<head>
<?php echo $this->headTitle().PHP_EOL; ?>
<meta charset="utf-8" />
<meta name="author" content="Oloma Software">
<?php echo $this->headMeta().PHP_EOL; ?>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php echo $this->headLink().PHP_EOL; ?>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script type="module" crossorigin src="/assets/index-C1TT0zOb.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index.BJBYL9CF.css">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon/apple-touch-icon.png">Visit your php application from your browser.
