XF 1.3 Styling Questions

XẹnPixel

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?
 
Media queries relate to the screen width, not the device.

Style properties write to the CSS templates.
They are the same thing.
 
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)
    */
}
?
 
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?
 
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).
 
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.
 
Top Bottom