Although it isn't possible to use conditional statements in EXTRA.css, it is possible to do something similar utilising CSS selectors.
In addition to the template name class (
see point 3 of the FAQ for how to identify it), there are several other classes which can be used, such as:
- LoggedIn
- LoggedOut
- Sidebar
- NoSidebar
- Responsive
- NoResponsive
Using these classes, various elements on the page can be manipulated.
Let's look at some examples.
To remove the page title from the forum list page only for all visitors:
Code:
.forum_list .titleBar h1
{
display: none;
}
The first selector,
forum_list, is the template name class, the second group,
titleBar h1, is for the page title.
What about just removing it for logged in members though? That's where the additional classes above come in, like so:
Code:
.LoggedIn .forum_list .titleBar h1
{
display: none;
}
Now the page title will only be removed from the forum list page for logged in members.
It will still show for guests (and bots).
This will make all page titles orange:
Code:
.titleBar h1
{
color: orange;
}
To apply that only to pages with a sidebar:
Code:
.Sidebar .titleBar h1
{
color: orange;
}
There are also media queries which can be used to target elements based on the browser width.
See the dedicated guide for more information:
https://xenforo.com/community/resources/responsive-design.2193/