Custom CSS styling

We know how cumbersome organising custom styling can be on a site with various extensions. To make things smoother, CB loads a CSS file specifically for customizations. This file is in the customization folder, as with anything in there, it does not get overwritten in an update.

Location in Joomla:

/components/com_configbox/data/customization/assets/css/custom.css

Location in Wordpress:

/wp-content/plugins/configbox-customization/assets/css/custom.css

Location in Magento 2:

/app/code/Rovexo/ConfigboxCustomizations/view/base/web/css/custom.css

See this article about installing the Magento 2 customization module.

Tips:

Use conventions for rule selectors

When you look at the built-in style sheets of CB, you see that most CSS selectors start with .view-cart, .view-customerform etc. these relate to the names of the views the styling is for and should help indicating the purpose and avoiding unintended styling interferences.

We recommend you adopt that convention for your customizations. When you take a workshop or services from Rovexo, this greatly speeds up things making for better cost-efficiency.

For overriding styling, use a selector that is more specific

You best don't trust the order in which stylesheets are loaded. Stay on the safe side and when you override something, make your selectors more specific than the selectors in the built-in CSS.

Make a minified CSS file

Make a minified version of your custom.css (name it custom.min.css). CB looks for a file named like this and will load it instead.