Conditional Statements

Conditional Statements

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/
A few conditions have been added.

Also, each entry has been numbered, to make it easier to refer to.
Expanded the introductory section explaining how to use xen:else and xen:elseif.

Also added some new conditional statements - not going to list them, you'll just have to read it ;)
If you have pages set for categories (ACP -> Options -> Node & Forum List) you may want to utilise the category ID in the ad_ templates, to prevent ad's being shown in certain categories for example.

To do so, edit the category_view template and add the following at the top:
HTML:
<xen:container var="$category.node_id">{$category.node_id}</xen:container>

That will ensure the category ID is available for use in the ad_ templates, allowing you to use the category node ID conditional as follows:
<xen:if is="{$category.node_id} != x">
This content will not show in category x
</xen:if>
Top Bottom