Template CSS Overrides Made Easy

We've always supported CSS overrides in the form of override.css, but you always had to manually create the file upload it, maintain it, etc.. That's a bit of a chore just to change a couple lines of CSS. This has now been improved with the same usage as language overrides by allowing you to supply your custom CSS directly in plugin edit of any CB template. Simply edit your CB template within CB > Plugin Management and under the Overrides tab supply your custom CSS then save! Check it out below.

 

From here you can supply any CSS you like and it'll override the CSS loaded before it. In this case as long as the CSS select is exactly the same OR stronger than what you want to override you should have absolutely no problems styling over it. Lets have a look at the results.

As you can see both of my style changes took place perfectly fine. What's more important is the override.css hasn't gone away! We simply generate it for you now. If you already have an override.css then the parameter should have no problem detecting it and allowing you to edit it from within your CB template. If you choose not to use overrides anymore simply empty the parameter and save which will safely delete the override.css.

Looking forward to seeing what kind of great overrides everyone can come up with. Feel free to share as it's easy to move the override.css file or simply by sharing the CSS directly.



krileon's Avatar
krileon replied the topic: #302231 4 months 2 days ago

What "selector" do you use to only target frontend for the override?

Depends entirely on what page you're trying to style. There isn't a global selector indicating frontend. You just need to be more specific with your CSS. For example the CSS classes for the profile container div are as follows.

cbProfile cb_template cb_template_default

You can use .cb_template.cbProfile selector to target and override any profile CSS. Inspect pages using your browsers developer console for other CSS classes (typically pressing F12 will open the console).
Ducatiklubben's Avatar
Ducatiklubben replied the topic: #302230 4 months 2 days ago

krileon wrote: Of course. Overrides load in backend and frontend. Using different selectors you can target backend, frontend, or both.


What "selector" do you use to only target frontend for the override?
krileon's Avatar
krileon replied the topic: #289494 1 year 5 months ago
The override CSS file is loaded last. So same or stronger selectors will override anything loaded before it. This means yes it can be used to override the Bootstrap classes with your own CSS as needed.
MMDoege's Avatar
MMDoege replied the topic: #289475 1 year 5 months ago
Hello,
will this be available for bootstrap.css as well in the future?
krileon's Avatar
krileon replied the topic: #288711 1 year 6 months ago
Of course. Overrides load in backend and frontend. Using different selectors you can target backend, frontend, or both.
jojo12's Avatar
jojo12 replied the topic: #288688 1 year 6 months ago
The example override changes the background-color of the backend too!
Facebook Twitter Google LinkedIn