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

XF 1.3 Styling Questions

Discussion in 'XenForo Questions and Support' started by ForoStyle, Aug 5, 2014.

  1. ForoStyle

    ForoStyle Active Member

    1. How is CSS Media Queries written? Is it from mobile first or desktop first?

    2. Who will be executed last, Style Properties or CSS codes in TEMPLATE.css? For example, the background in Header Style Property is black but I write red background in header.css, what's the resulting output?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Media queries relate to the screen width, not the device.

    Style properties write to the CSS templates.
    They are the same thing.
     
  3. ForoStyle

    ForoStyle Active Member

    Sorry for not being clear.

    In other CMSs I usually write the CSS in this order:
    HTML:
    /*
    * Styles for oldest mobiles
    *
    */
    
    @media only screen and (min-width : 20em) {
        /*
         * Styles for 320px Device-Width devices
        */
    }
    @media only screen and (min-width : 40em) {
        /*
         * Styles for 640px Device-Width devices
        */
    }
    @media only screen and (min-width : 64em) {
        /*
         * Styles for 1024px Device-Width devices (old desktops and up)
        */
    }
    Is XenForo CSS written that way or in this way:
    Code:
    /*
    *
    * Styles for large screens
    *
    */
    @media only screen and (max-width : 1824px) {
        /*
         * Styles for desktops and laptops
        */
    }
    @media only screen and (max-width : 1224px) {
        /*
         * Styles for iPads (landscape)
        */
    }
    @media only screen and (max-width : 1024px) {
        /*
         * Styles for iPads (portrait)
        */
    }
    @media only screen and (max-width : 768px) {
        /*
         * Styles for Smartphones (landscape)
        */
    }
    @media only screen and (max-width : 321px) {
        /*
         * Styles for Smartphones (portrait)
        */
    }
    ?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

  5. ForoStyle

    ForoStyle Active Member

    Example:
    In Style Properties > Header & Navigation > Navigation Tab (navlink):
    Background Color: black from color picker
    Text Color: white from color picker
    Miscellaneous: display: block;

    Now in Templates > navigation.css I write:
    Code:
    .navTabs .navLink
    {
        background: #fff;
        color: #000;
        display: inline;
    }
    What will be the resulting output of the CSS properties with conflicting values? Will it be the white background with black text or the black background with white text?
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Whichever is processed last.
     
  7. ForoStyle

    ForoStyle Active Member

  8. Brogan

    Brogan XenForo Moderator Staff Member

    Do a search in the templates to see how it is implemented.
     
  9. ForoStyle

    ForoStyle Active Member

    That would go back to my first question of "who will be executed last"? Is it the Style Properties or the code in TEMPALTE_NAME.css?

    Sorry to bother you too much but I just want to make sure what I'll do is inline with the default styling :oops:
     
  10. ForoStyle

    ForoStyle Active Member

    :(
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    As I said, SPs write to the CSS templates.

    If you add your own code outside the SPs manually into the templates, whichever is later will be processed last.

    Why don't you want to search?
     
  12. Mike

    Mike XenForo Developer Staff Member

    I don't think Brogan is trying to be funny -- it's just that it should be evident if you look in the CSS templates themselves. You'll see the style properties being inserted into them and you'll see how media queries are used (for smaller sizes). The final result is CSS so it will execute with its rules (specificity, order when tied, etc).
     
  13. ForoStyle

    ForoStyle Active Member

    Recently finished reading the manual and I have now a much clearer understanding about styles.

    Again, I apologize for this annoying questions and thanks for the responses.
     

Share This Page