• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.3 Different styles for different contentTemplates

sinucello

Well-known member
#1
Hi,

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:

Code:
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:

Code:
old:
<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>
new:
<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,
Sacha
 

Jake Bunce

XenForo moderator
Staff member
#2
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

Code:
<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

Code:
<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.