Knowledge Base

How to set css files in theme.xml

Limits and possibilities for css files versus theme.xml

comments: 1

You should set theme css file in theme.xml.  If you don't use it, it scans all your .css files and it's not good:

Theme Css 01

If your theme uses only style.css, it should be always be in theme.xml this way:

<stylesheets></stylesheets>
<css file="style.css" name="Default"></css>

Result: (not confusing option)

Theme Css 01

But what if you want more versions of the same theme (f.e. colour variants)? You can do it this way (more options you can find in bootstrap3 theme):

<stylesheets></stylesheets>
<css file="style.css" name="Default"></css>
<css file="css/blue.css" name="Blue version"></css>

BUT! BIG BUT!

Theme Css 03

If you set different css than your style.css is completly ignored and you need to have all css styling in all css files. You could fix this by using in your css/blue.css and override only colour definitions.

@import url(../style.css");

Theme Css 04

BUT! Small but.

If your style.css uses images this way:

background-image: url(images/post_it_bottom.png);

it will not work because relative urls were changed.

How to fix it?

Quick way:

put your alternative css on the same level as your style.css 

<stylesheets></stylesheets>
<css file="style.css" name="Default version"></css>
<css file="red.css" name="Red version"></css>
<css file="blue.css" name="Blue version"></css>

@import url(style.css");

Correct way:

Remove all problematic declarations from style.css (colours, background images) and put them to css/default.css.  

<stylesheets></stylesheets>
<css file="css/default.css" name="Default orange version"></css>
<css file="css/red.css" name="Red version"></css>
<css file="css/blue.css" name="Blue version"></css>

Import style.css 

@import url(../style.css");

If you want to be sure that some css is selected during install (otherwise style.css is used), add default setting to  install.xml

<prefs></prefs>
<core name="themecss">css/default.css</core>

This can be done more ways, I will see later what is easier.

  • Jimako
    9 months ago

    Always loaded css files with these names:
    style_custom.css
    style_mobile.css
    style_print.css

    or theme-css.php
    see: header template

    0 0