XF 1.3 Styling Questions

[XẹnPixel]

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?

 

[Paul B]

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

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

 

[XẹnPixel]

Sorry for not being clear.

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

In other CMSs I usually write the CSS in this order:

/*
* 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:

/*
*
* 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)
    */
}

?

 

[Paul B]

It is fine to write it that way.

http://xenforo.com/community/resources/responsive-design.2193/

 

[XẹnPixel]

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?

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:

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

 

[Paul B]

Whichever is processed last.

 

[XẹnPixel]

It is fine to write it that way.

http://xenforo.com/community/resources/responsive-design.2193/

May I know how is the default style written? Is it the "mobile-first" approach (first code) or "desktop-first" approach (second code)?

 

[Paul B]

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

 

[XẹnPixel]

Whichever is processed last.

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

 

[XẹnPixel]

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

 

[Paul B]

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?

 

[Mike]

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

 

[XẹnPixel]

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.