Skip to content

Customize styles ​

Mila is a standalone theme ('inherit' => null in config.php): every layout, view and partial it uses is in platform/themes/mila/.

Folder structure ​

mila/
├── config.php                 loads Bootstrap, icon fonts, Owl Carousel, Slick, Magnific Popup + style.css
├── theme.json
├── functions/
│   ├── functions.php          page templates, footer sidebars, image sizes, fonts, "Top bar menu"
│   ├── theme-options.php      General, Header, Footer, Ecommerce and Mila options
│   ├── shortcodes.php         shared shortcode helpers, loads functions/shortcodes/*.php
│   ├── shortcodes/<name>.php  one shortcode per file: registration + admin form
│   └── theme-icons-field.php, menu-icon-image.php, facebook-integration*.php …
├── layouts/                   default, homepage, full-width, blog-sidebar
├── partials/
│   ├── header, footer …
│   └── shortcodes/<name>/     one view folder per Mila shortcode
├── views/                     blog pages + views/ecommerce (product, cart, wishlist, compare, account…)
├── widgets/                   instagram-feed, custom-menu, blog-categories, recent-posts, tags, blog-search
├── assets/sass/               style.scss, rtl-style.scss, _variables.scss, _mila.scss, mila/
├── assets/js/                 scripts.js, mila.js, backend.js
├── lang/, routes/, src/
├── sample/homepage-content.html
└── public/                    built CSS/JS and vendor files

Colors and fonts ​

Most colors come from Theme options:

  • General → Primary color / Secondary color
  • Header → Header text / background color
  • Footer → Footer text / background color

Fonts are set in Theme options → Typography (Primary: Jost, Heading: Cormorant Garamond).

For deeper changes, edit the SCSS in assets/sass/: _variables.scss holds the variables, _mila.scss and mila/ the Mila blocks, _custom.scss is a good place for your own rules.

Overriding a view ​

Ecommerce pages are templated in views/ecommerce/. To change one, edit it there; for a page Mila doesn't template, copy the plugin's view into the same path under views/ and edit the copy.

Build ​

The theme's vite.build.mjs builds:

SourceOutput
assets/sass/style.scsspublic/css/style.css
assets/sass/rtl-style.scsspublic/css/rtl-style.css
assets/js/scripts.jspublic/js/scripts.js
assets/js/mila.jspublic/js/mila.js
assets/js/backend.jspublic/js/backend.js
bash
npm run prod
php artisan cms:theme:assets:publish mila