Load Extra.css after the style properties ?

[Deleted member 10469]

Hello, I would like to create skins for XenForo and I noticed that the Extra.css is loaded after the style properties.

I would like to know how to crush the style property with my own css please.
Thanks for your help

______________________________

Bonjour, j'aimerais créer des skins sous xenforo et j'ai remarqué que le Extra.css était chargé après les propriétés de style.
J'aimerais savoir comment faire pour écraser les propriété de Style avec mon propre css svp.
Merci d'avance pour votre aide

 

[Arty]

If you don't want to directly change style property, find selectors that property is applied to, add CSS for those selectors to extra.css. But its usually better to just apply changes to property, unless you want it to work only under specific conditions, such as specific browser window size.

What property do you want to override?

 

[Deleted member 10469]

I intend to create skins that change on depth XenForo at the design, it does not surprise me that there are 50 properties to change and I find it quite difficult to always chasing style properties.

On ipboard i could do my 100% skin with Extra.css and was best for updates and to save time.

Otherwise how to find a simple way what @property belongs a design element? It is sometimes very difficult to find: S

 

[Arty]

Try editing via WebDav. Then you'll be able to edit properties while editing css templates instead of messing with control panel. For example, this is what properties look like when editing xenforo.css:



Change CSS, save file, XenForo will update not only css template, but also all properties changed in template.

 

[Deleted member 10469]

Ok thank you, I saw that @property "body" crushed all the changes brought, is it possible to apply a single change without crush the rest?

Exemple :

    body
    {
        @property "body.background";
            /* Here we change the background and nothing else, don't reset the remaining properties */
            background: white;
        @property "/body";
    }

If you use any text editor please?
The syntax coloring looks more fun than Notepad ++

 

[Arty]

If you add that to extra.css, property will be changed and changes will be included in xenforo.css, so your code will be redundant. Edit xenforo.css instead.

 

[Deleted member 10469]

so your code will be redundant

Mean ?

 

[Arty]

Example: you have this code in xenforo.css

html
{
  @property "html"
  color: red;
  background: black;
  @property "/html"
}

If you would want to override that by editing extra.css, as you described above, you would probably put this in extra.css:

html
{
  @property "html.background"
  background: white;
  @property "/html.background"
}

As soon as you save it, property will change. It means code in xenforo.css will also change. So in CSS output you'll have this:

/* from xenforo.css */
html
{
  color: red;
  background: white;
}
 
/* from extra.css */
html
{
  background: white;
}

You'll end up with 2 entries for background for same selector with same value. That's what I mean by redundant.

If you'll edit xenforo.css instead, you'll have only 1 entry. While editing correct css file, you might also see some related selectors and properties and change them.

In my opinion extra.css should be left for users to customize style. Style authors should edit other templates instead.