Theme Files

Theme files is an advanced, dev friendly feature that allows you to affect the underlying code of your site. You can tweak the core CMS Max components to adjust layouts, re-style elements and build your site to better fit your needs.

We recommend that you refrain from editing any of the .blade.php files at all costs. If possible, restrict your changes to the .css files, that are visible under the "Component Styles" heading.

Any changes made to these files can be reverted by clicking the three dots on the list, then clicking "Reset to Default", or by clicking the "Reset to Default" button in the top right while editing a file. Your changes will be permanently deleted.

Tailwind @apply

As you will notice, most of the default styles in these Theme Files use Tailwind's @apply directive. We recommend sticking to this convention, with one caveat.

The order of the compilation of css files means that you cannot use the primary and secondary colors in tailwind @apply directives. You should instead use the vanilla css syntax as follows:

a:hover {
    color: var(--color-primary-700);
}

The color pallette variants of your custom colors are still available when using this syntax, meaning you can still use 100-900. --color-secondary-200, --color-primary-900 etc. However, you will need to use the variable name as --color-primary or --color-secondary, and not, use them as bg-primary or text-secondary.

Component Styles

These theme files are css files that are re-compiled on save to integrate with your site's Tailwind styles. This means that you can use the tailwind @apply directive here. We recommend that any customizations you make are added at the bottom of these files (though they should remain within the layer), so that they are not replacing the core styles, but overwriting them in specific cases.

Base Styles

This file contains generic styling for several common html elements. Tailwind inherently strips user-agent layer styles from many of these elements, which can cause trouble in a CMS. Users will expect an <h1> to be larger than a <p>, so we've added many of these expected styles back in.

It also contains base styles for some of the more generic components of your site, like breadcrumbs and page titles.

When making changes here, ensure that your custom code remains within the @layer base css rule.

Common Components Styles

Contains the default styling for common components. This includes buttons, pagination, search bars, logo scrollers and more.

When making changes here, ensure that your custom code remains within the @layer components css rule.

Main Menu

Contains the default styling for menus. Here you can edit menu text colors, icon styling and more. There are different styles defined here by default for desktop header, mobile header and vertical menus.

Vertical menus are primarily used in the footer, but there may be cases where they need to be used in multiple places. In this case, you should nest your styles to avoid overlapping styles.

When making changes here, ensure that your custom code remains within the @layer components css rule.