• 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

ForoStyle

Active member
#1
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?
 

Brogan

XenForo moderator
Staff member
#2
Media queries relate to the screen width, not the device.

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

ForoStyle

Active member
#3
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:
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)
    */
}
?
 

ForoStyle

Active member
#5
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:
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?
 

ForoStyle

Active member
#9
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 :oops:
 

Mike

XenForo developer
Staff member
#12
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
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.