1. 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

Discussion in 'Styling and Customization Questions' started by sinucello, Apr 4, 2014.

  1. sinucello

    sinucello Well-Known Member

    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
     
  2. Jake Bunce

    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

    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.
     
    sinucello likes this.

Share This Page