How to set css files in theme.xml

Limits and possibilities for css files versus theme.xml
on Monday 30 July 2018
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:

<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):

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


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 

<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.  

<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

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

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


  • Jimako
    1 year ago

    Always loaded css files with these names:

    or theme-css.php
    see: header template

    0 0

Other links

Follow us