The Matrix Configuration system is the central control hub for all Matrix Framework features. It provides a single point of configuration for enabling or disabling features, adjusting performance settings, and managing debug behavior across the entire framework.
This file should be placed in the <head> section of your website.
<script type="text/javascript">
//<![CDATA[
// Matrix Configuration Settings
var MatrixConfig = {
features: {
matrixAdmin: true, // Matrix admin sliding menu
styleEditor: true, // Matrix Style editor
fluidModule: true, // Fluid features and jQuery UI components
variableModule:true, // Matrix variables button and popup
helperClassesModule: true, // Helper classes button and popup
moduleNavigator: true, // Module navigator button and popup
customLayout: true, // Show config classes in style editor
onePage: false, // One-page scroll navigation
multilingualPage: false, // Multilingual page navigation structure
megaMenu: false // Mega menu functionality
},
// === PERFORMANCE SETTINGS ===
performance: {
maxElements: 200, // Max elements to process at once
debounceDelay: 150, // Debounce delay in milliseconds
throttleDelay: 100 // Throttle delay in milliseconds
},
// === DEBUG SETTINGS ===
debugMode: false // Set to true to enable debug logging
};
//]]>
</script>
Be careful not to set all options to true, as some of them are not compatible with each other. For example, if you activate OnePage, then Multilingual Pages and MegaMenu should be deactivated.
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 is-uppercase size-13 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white mid-round-btn | |
| Footer styles | |
| o-form color-white white-outline-btn mid-round-btn | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.