XF 1.3 Different styles for different contentTemplates


Well-known member

as a
<xen:if is="{$contentTemplate} == '
conditional doesn`t work in CSS templates, I had to find another way to set the width of the complete page content differently depening on the currently viewed page. The forum list with it`s side column has to be broader than the rest. So I added this to extra.css:

div.pageWidth,div#headerMover,fieldset#moderatorBar {
max-width: 1024px;
margin: 0 auto;
position: relative;
zoom: 1;
padding-right: 0;
padding-left: 0;

.forum_list div.pageWidth, .forum_list div#headerMover, .forum_list fieldset#moderatorBar {
max-width: 1170px;
and then changed the body tag in the PAGE_CONTAINER like this:

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>
<body class="{$contentTemplate}{xen:if {$bodyClasses}, ' ,{$bodyClasses}'}">
it works but I have two questions:
  1. where is the bodyClasses variable set and can I set it myself?
  2. as conditionals (at least some of them) don`t work in CSS, how can I make sure that additional CSS templates that I include with the help of conditionals in non-CSS templates are loaded after all the other CSS files (I learned that you can be sure of that only with extra.css )

Conclusion so far:
it would be better if conditionals would work in CSS and if the {$contentTemplate} var would be moved up from the content-div to the body tag as you can`t control the HTML-elements above the content-div this way.

all the best,

Jake Bunce

XenForo moderator
Staff member
1) Body classes are defined in the content templates. The classes are then passed up to the container.

Admin CP -> Appearance

Use the search box to search for "bodyClasses". Example:

Admin CP -> Appearance -> Templates -> forum_view

<xen:container var="$bodyClasses">{xen:helper nodeClasses, $nodeBreadCrumbs, $forum}</xen:container>
This is a common usage, where node paths are used to create body classes on the page.

2) CSS templates can also be included in the content template. Example:

Admin CP -> Appearance -> Templates -> thread_view

<xen:require css="thread_view.css" />
You can't set an explicit order, but normally CSS priority can be controlled using more specific selectors, or by using !important within an attribute.