1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Load Extra.css after the style properties ?

Discussion in 'XenForo Development Discussions' started by Zephyr, Aug 20, 2012.

  1. Zephyr

    Zephyr Well-Known Member

    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 :)
     
  2. Arty

    Arty Well-Known Member

    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?
     
  3. Zephyr

    Zephyr Well-Known Member

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

    Arty Well-Known Member

    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:

    xf_webdav.png

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

    Zephyr Well-Known Member

    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 :
    Code:
        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 ++ :)
     
  6. Arty

    Arty Well-Known Member

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

    Zephyr Well-Known Member

    Mean ? :)
     
  8. Arty

    Arty Well-Known Member

    Example: you have this code in xenforo.css
    Code:
    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:
    Code:
    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:
    Code:
    /* 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.
     

Share This Page