XF 2.3 CSS for all nodes within category node?

[makanyane]

I've got header banner images that can change via extra.less:

[data-container-key="node-10"] .p-header {
  background-image: url("data/assets/style_properties/my_banner_variant.webp");
}

That works, and if node-10 is a 'forum' all the threads in the forum show with that header.

If node-10 is a category, the category page shows that header, but the forum nodes (and their threads) within it don't.

Is it possible to do this in a way that the forums/sub-forums that are children of the category node in the node tree 'inherit' the css change on the category node?


(There'll be 100's of forum nodes inside some categories, so completely impractical to set individually)

 

[Mr Lucky]

I would do this by creating a child style of your main style that has that header. (You don’t have to do it in extra.less, you can do it in style properties for the child style)

Then in the node options for the category you can choose that style under Override user style choice.

That should then apply to the child nodes of that category.

 

[makanyane]

Thanks, but there will be other selectable styles across the site. This header and its variants are likely only appearing within the one style.

 

[Mr Lucky]

Then maybe it’s possible to use a conditional within the PAGE_CONTAINER template which sets the background image banner with inline css.

There'll be 100's of forum nodes inside some categories, so completely impractical to set individually)

Some people might argue that 100s of nodes in a category is not practical

 

[makanyane]

Then maybe it’s possible to use a conditional within the PAGE_CONTAINER template which sets the banner with inline css.

Yeah, I was hoping to avoid that, as it seems easier for people to break things radically with PAGE_CONTAINER!

though, adding a class/different inner <div> to the header depending on conditional would allow that class's CSS to be set elsewhere

If I did go that route any idea on a conditional that would apply to everything in a category anyway? I've used

        <xf:if is="!in_array({$forum.node_id}, [10,11,12,17])">

for something else, but that's still got the same problem of needing all the forum numbers getting manually added.

It could be argued that 100s of nodes in a category is not practical

Absolutely! It's a very old, very large vBulletin site that's getting ported.

I probably should have mentioned there are categories within categories, so on the main forum you see about 12 categories, then most of them split into 4/6 categories, then forums...

If I could set styling differences at the level of the top 12 categories we could do some quite nice things with it... Micro-managing lower than that would start getting impractical, apart from special case nodes.

 

[Mr Lucky]

so on the main forum you see about 12 categories, then most of them split into 4/6 categories, then forums...

Most people find it best to reduce the forum numbers (ie Ama;lgamate them) then use thread prefixes instead of categories

 

[gouwepeer.nl]

I have no idea if there is much difference between 2.2 and 2.3, but on my XF2.2 forum I also have several header banners.
Example: Forum index

Nederlandstalige Sociaal Forum Gouwepeer.nl

gouwepeer.nl Het forum over wetenschap, de ruimte, de natuur en verschillende gezellige onderwerpen

www.gouwepeer.nl

The astronomy section on my forum:

astronomieforum

www.gouwepeer.nl

First I disabled the original banner for these nodes:

<!-- astrologieforum logo -->
<xf:if is="in_array($xf.reply.containerKey, ['node-16', 'node-1414', 'node-17', 'node-18', 'node-1414', 'node-19', 'node-28', 'node-57', 'node-83', 'node-272'])">
        <style>
        .p-header-inner {
            display: none;
        }
                #header {
            display: none;
        }
                        .catbanner {
                display: none;
            }
    </style>
</xf:if>

After this I created a matching header for these nodes including their own navbar:

    <!-- astronomieforum -->
<xf:if is="in_array($xf.reply.containerKey, ['node-16', 'node-1414', 'node-17', 'node-18', 'node-1414', 'node-19', 'node-28', 'node-57', 'node-83', 'node-272'])">
<center>

<div class="p-body-header" style="background-color: #eee;">
<img src="https://www.gouwepeer.nl/afbeeldingen/banners/banner_astronomieforum.png" alt="astronomieforum">
        <br>

    
    </div>

<style>
.altheadertopnav {
  background-color: #252668;
}
.altheadertopnav a:hover {
  background-color: #aa1351;
}
</style>
<div class="altheadertoolbarbody">
<div class="altheadertopnav" id="altheaderTopnav">
<div class="sidebarlink">
  <a href="/index.php?categories/astronomieforum.16/">Astronomieforum</a>
<a data-xf-click="menu" data-menu-pos-ref="< .p-navEl" class="p-navEl-splitTrigger" role="button" tabindex="0" aria-label="Toggle expanded" aria-expanded="false" aria-haspopup="true"></a>
<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
                <div class="menu-content">
<a href="/index.php?forums/astronieuws.1414/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Astronieuws (sociale groep)</a>
<a href="/index.php?forums/big-bang.17/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Big Bang</a>
<a href="/index.php?forums/sterren.18/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Sterren</a>
<a href="/index.php?forums/planeten.19/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Planeten</a>
<a href="/index.php?pages/hetzonnestelsel/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Het zonnestelsel (pagina)</a>
<a href="/index.php?forums/overige-hemellichamen.28/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Overige hemellichamen</a>
<a href="/index.php?forums/afbeeldingen-en-filmpjes.57/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Afbeeldingen en filmpjes</a>
<a href="/index.php?pages/NasaLive/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">NASA TV (pagina)</a>
<a href="/index.php?forums/ruimtefysica.83/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Ruimtefysica</a>
<a href="/index.php?forums/ruimtevaart.272/" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">Ruimtevaart</a>
</div>
</div>
</div>
  <a href="/index.php">Gouwepeer forumindex</a>

                    
<a data-xf-click="menu" data-menu-pos-ref="< .p-navEl" class="p-navEl-splitTrigger" role="button" tabindex="0" aria-label="Toggle expanded" aria-expanded="false" aria-haspopup="true">Externe linken</a>
<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
                <div class="menu-content">
<a href="https://www.astronomie.nl/" target="_blank" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">astronomie.nl</a>
<a href="https://www.astronomie.nl/inleiding-sterrenkunde-10" target="_blank" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">--Inleiding sterrenkunde</a>
<a href="https://www.allesoversterrenkunde.nl" target="_blank" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">allesoversterrenkunde.nl</a>
<a href="https://www.allesoversterrenkunde.nl/sterrenkunde/stoomcursus/" target="_blank" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">--Stoomcursus sterrenkunde</a>
<a href="https://scientias.nl/nieuws/astronomie-ruimtevaart/" target="_blank" class="menu-linkRow u-indentDepth0 js-offCanvasCopy ">scientias.nl | heelal</a>


</div>
</div>
  <a href="javascript:void(0);" class="icon" onclick="altheaderFunction()">
    Klik voor meer <i class="fa fa-bars"></i>
  </a>
</div>
</div>
    </center>
    </xf:if>

In this way I have created a separate header for multiple categories. Of course I have also created extra templates for this.
In my case it is Xenforo 2.2, so I cannot guarantee that it will also work in Xenforo 2.3.

 

[makanyane]

That does look like it should work, but it looks like it is still relying on inputting all the node numbers of the child forums manually? Our site is still getting ported at the moment, so I can't link, but it's similar to this;

I'd want every forum (and hidden sub-forums under them) here to inherit from the grand-parent node here

(we're larger than that example site, so it would be even more of an issue)