How to add Custom CSS

There are different ways to add custom CSS to the Matrix Framework, and this page will guide you on the best approach to do so while keeping your theme clean and well-organized.

To access the main CSS file, go to Design > Custom Template > CSS tab in your admin panel.

This file contains the core layout styles for theme variables such as colors, typography, layout, and navigation. These should not be modified directly.

In the same section, you can add your own CSS code specific to a particular website. While it’s acceptable to add your custom code at the top of this file if you know where it is, it’s not recommended. Future Matrix Framework updates may overwrite this file, causing your custom code to be lost. Therefore, this method is not considered best practice.

If you really need to keep your own code in this area, the best approach is to add it within the Template Tweaks section. This allows you to safely include custom CSS and also override some of the default template styles without affecting the main framework files.

/* -------------------------------------------------------------------------------- /
    [3] LAYOUT
/ -------------------------------------------------------------------------------- */

/*** template tweaks ***/
#cc-inner #hs-container .j-formnew input[type='submit'],
#cc-inner #hs-container input.submitUser, 
#cc-inner .hs-button,
#cc-inner .j-calltoaction-link {
   padding: 18px 50px!important;
}
...

The Matrix Framework includes several CSS components — a total of 7 CSS files — located in your file directory. These files are imported directly into the main index.html file using the @import rule (found under Templates > Custom Template > HTML tab).

These component files contain essential CSS for custom elements, utility classes, and core libraries, and should never be modified.

<style type="text/css">
/*<![CDATA[*/
   @import url("04-custom-widgets.css");
   @import url("05-helper-classes.css");
   @import url("06-media-queries.css");
   @import url("07-admin-menu.css");
   @import url("08-libraries.css");
   @import url("09-updates.css");
   @import url("10-style-editor.css");
/*]]>*/
</style>

Some users choose to add a separate CSS file in this section, which is perfectly fine. However, this approach can be inconvenient, as you’ll need to edit the CSS and re-upload the file every time you make a change.

<style type="text/css">
/*<![CDATA[*/
   @import url("04-custom-widgets.css");
   @import url("05-helper-classes.css");
   @import url("06-media-queries.css");
   @import url("07-admin-menu.css");
   @import url("08-libraries.css");
   @import url("09-updates.css");
   @import url("10-style-editor.css");
   @import url("your-custom-styles.css");
/*]]>*/
</style>

There are several ways to use your own custom CSS in the Matrix Framework. The recommended approach is to keep your setup simple and organized, ensuring that your customizations remain intact even after template updates.

1. Style Editor – Custom CSS

The Style Editor in the Matrix Framework includes a dedicated field for custom CSS.

If you scroll down within the editor, you’ll find this Custom CSS field, where you can write your own styles directly or paste them from another source.

This is a convenient way to manage your CSS, especially if your custom styles are minimal or limited in size.

2. Head Section

This is the classic way to include custom styles or external scripts.

In Admin Mode, go to Settings > Edit Head, and add your custom code here. For example:

<style type="text/css">
/*<![CDATA[*/
 #cc-inner .custom-class {
     color:#fff;
}
/*]]>*/
</style>

3. Widget / HTML

If you need to add custom styles for widgets that appear only on specific pages, you can use the Widget / HTML module added to the content section.

This allows you to include inline CSS that applies only to that page or widget, keeping your styles localized and avoiding unnecessary global overrides.

<style type="text/css">
/*<![CDATA[*/
 #cc-inner .custom-class {
     color:#fff;
}
/*]]>*/
</style>