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: #334141 9 months 2 weeks ago
Yes it's still valid. Please see the following.

CB > Plugin Management
 

Overrides
 
dmolina's Avatar
dmolina replied the topic: #334130 9 months 2 weeks ago
Hello, is this still valid? I don't see the CB Template in my plugins.

How can I override the css?

I've tried creating the override.css file in the path components/com_comprofiler/plugin/templates/default but it doesn't seem to work...

Thank you.
dewittds's Avatar
dewittds replied the topic: #305574 5 years 9 months ago
Thanks for the quick response. It made me look again for the template. I found it this time. The first time I was looking for template in the name. The name was default and type is template. I hope this will help others.

Thanks again,
David
krileon's Avatar
krileon replied the topic: #305572 5 years 9 months ago
CB CSS Overrides are within CBs template, not Joomlas. You need to be editing your CB template within CB > Plugin Management. This should just be the Default template plugin unless you've installed a 3rd party CB template then you'll need to edit it instead.
dewittds's Avatar
dewittds replied the topic: #305571 5 years 9 months ago
I have been unable to find the Css overrides per the instructions. I'm guessing this is due my not using the protostar template and not a CB template? Or could I be overlooking something else.

Thanks David
krileon's Avatar
krileon replied the topic: #302231 6 years 1 month 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 6 years 1 month 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 7 years 2 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 7 years 2 months ago
Hello,
will this be available for bootstrap.css as well in the future?
krileon's Avatar
krileon replied the topic: #288711 7 years 3 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 7 years 3 months ago
The example override changes the background-color of the backend too!

Facebook Twitter LinkedIn