I/Q: Theme and CSS Override

[LaocheXe]

Using Bootstrap 3, I know if I want to override the code for whatever I want, I need to change the style.css - however, in theme manager I can select what css I want to use, by default it's the normal style.css.

So If I created a Laochexe.css, I can select it, however, it cannot override the default bootstrap.css - can this be changed to allow any css in the theme manager that is in the theme css folder to override the others when selected?

Example:

I wanted to change the btn-primary to another color - code I put into laochexe.css is btn-primary { color: #fff; background-color: #110c5e; border-color: #fff; }

save, upload the new css, go into admin area, theme manager, select the new css, changes should apply, however they don't - now I can go into style.css to make the change happen, but if I'm creating a theme (the bootstrap 3 I'm working on has been modified) I would like to provide different looks via css, and allow the end user to either select one, or even select one and modify it to their liking.

[Jimmi08]

@Moc this should be closed. I am sure that there are no problems. It just to be done the correct way.

using just btn-primary is not enough. This is related to css and overriding css rules (cascading) and not e107 itself.

[Moc]

@Jimmi08 Ok, I'll close this issue. Maybe you can post a short example here? Then I will add it to the documentation in the future.

[Jimmi08]

CSS PART Some way:

• full compiled bootstrap with your customization https://getbootstrap.com/docs/3.4/customize/ next step: exclude core bootstrap loading

• just button fix you need to override all rules using of btn-primary or using !important for some rules (at that example above his change is overridden with btn-group rule) You can use tool above and then just pick only button related part.

• manually you can very easily check this in the console when you find your rule and above it are displayed rules that are overriding this and manually override them. Sometimes using !important is enough. (I do this in JMAdmin plugin to override colors of KA Admin theme)

E107 PART

It depends if you want css switcher or you will use preference for this

With css switcher, you should be sure that your code from style.css is loaded in all css files.

The way I am using now:

    <stylesheets>
        <css file="style_default.css" name="Default Dark Version"  />
        <css file="style_orange.css" name="Orange Dark Version" />
        <css file="style_green.css" name="Nightvision Dark Version" />
        <css file="style_light_default.css" name="Default Light Version" />
    </stylesheets>  

and then e107::css('theme', 'style.css'); //if it is not used in theme.xml

this way files are loaded in order:

• other css stuff
• style.css //the same code for all variations
• style_default.css //code related to this variation,

I run on this issue because I was searching the answer on my question if it is standard that with style variations (more than one css in theme.xml) style.css is not loaded at all (it breaks the rule that style.css is always loaded as last one css file).

Let me know if you need to add something. I just work with it so I had time...

Of course, I didn't mention the sass option, but from the question's type, I don't think this is needed.