• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Change Link Color Of *Individual* Forum Titles (to emphasize single forums)

Jake Bunce

Well-known member
This guide is for changing the color of individual forum titles in order to emphasize single forums. It looks like this picture in which we have applied black + bold styling to Main Forum:

Screen shot 2010-11-06 at 1.33.01 AM.webp

First I want to note that HTML in forum titles doesn't work. Some people are inclined to edit the forum itself and add markup directly to the title. But I tested this and it doesn't work in xenForo. The HTML characters get converted to entities.

I came up with some small template changes to do this. First edit this template:

Admin CP -> Appearance -> Templates -> node_list.css

Add this code to the bottom of the template. Change the number 2 to match the node_id of the forum whose title you want to style:

Code:
/*** SPECIAL TITLE STYLING ***/
.nodeTitle2 a,
.nodeTitle2 a:visited
{
	color: #000000;
	font-weight: bold;
}

You can specify any color code you want. You can also add other styling. For example, you can see I added a font-weight attribute to make it bold. If you don't know the node_id of the forum then just look at the URL. For example, this Template Modifications forum is node_id 37:

http://xenforo.com/community/forums/template-modifications.37/

Then edit this template:

Admin CP -> Appearance -> Templates -> node_forum_level_2

Replace this:

Code:
<h3 class="nodeTitle"><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>

...with this:

Code:
<h3 class="nodeTitle nodeTitle{$forum.node_id}"><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>

By adding this class reference that uses the node_id you can apply custom styling to any specific forum title by adding another CSS class to node_list.css.

Technically speaking, you will end up with some class references for classes that don't exist. And of course creating classes for individual forum titles isn't an efficient use of CSS. But it works nicely. ;)
 
Would you be able to do it so it will colour the titles under the categories? i.e. Category 1, all forum titles blue; Category 2, all forum titles red etc etc.

Sort of you have .nodeTitle1 (category 1) class that is aplied only to nodes under that category?
 
Would you be able to do it so it will colour the titles under the categories? i.e. Category 1, all forum titles blue; Category 2, all forum titles red etc etc.

Sort of you have .nodeTitle1 (category 1) class that is aplied only to nodes under that category?

Hey that's an idea. :)

The node_list.css template is the same (see first post), except you would use the category node_id in the class name.

The node_forum_level_2 template is slightly different. You need to use {$forum.parent_node_id} to reference the category, like this:

Code:
<h3 class="nodeTitle nodeTitle{$forum.parent_node_id}"><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>

Now you can change the forum link color for entire categories.
 
Cool, do you know if I could make that work the same way for the node icons?

To apply this to other node types (like link and page nodes) you need to edit their respective templates:

Admin CP -> Appearance -> Templates -> node_link_level_2

The code is very similar:

Code:
<h3 class="nodeTitle nodeTitle{$link.node_id}"><a href="{xen:link link-forums, $link}" data-description-x="#nodeDescription-{$link.node_id}">{$link.title}</a></h3>

Admin CP -> Appearance -> Templates -> node_page_level_2

Code:
<h3 class="nodeTitle nodeTitle{$page.node_id}"><a href="{xen:link pages, $page}" data-description="#nodeDescription-{$forum.node_id}">{$page.title}</a></h3>

As before, if you want to apply this to entire categories then you need to use parent_node_id instead of node_id.
 
Jake is there a way for the custom colors to show when viewing the What's New listing?
 
Is there a way to make the colors alternate for every x forums (i.e. every third (1, 4, 7, etc.) is blue, every third after (2, 5, 8...) is red, and so forth)?

Would something similar work to individualize the navTab links (I want to add a different border-bottom for each navTab) as such?
 
Is there a way to make the colors alternate for every x forums (i.e. every third (1, 4, 7, etc.) is blue, every third after (2, 5, 8...) is red, and so forth)?

Would something similar work to individualize the navTab links (I want to add a different border-bottom for each navTab) as such?
Code:
.nodeList .node.level_2:nth-child(even) .nodeTitle a
{
color:red;
}

Heres some information on nth-child (not completely compliant with older browsers): http://css-tricks.com/how-nth-child-works/
 
Jake I couldn't make this work :notworthy:

I am trying to make all titles in a specified Category one colour with one code change instead of changing each forum individually..
The Category is no.13.
It currently just has one forum no. 14 and one Page no. 15.

Admin CP -> Appearance -> Templates -> node_list.css
I added the code snippet at the bottom - changed the number to 13 and the colour to 339933

Code:
/*** SPECIAL TITLE STYLING PER CATEGORY ***/
.nodeCategory13 a,
.nodeCategory13 a:visited
{
    color: #339933;
    font-weight: bold;
}

also tried your first snippet

Code:
/*** SPECIAL TITLE STYLING PER CATEGORY ***/
.nodeTitle13 a,
.nodeTitle13 a:visited
{
    color: #339933;
    font-weight: bold;
}

Admin CP -> Appearance -> Templates -> node_forum_level_2
replaced as instructed above (no changes)

Code:
<h3 class="nodeTitle"><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>

with

Code:
<h3 class="nodeTitle nodeTitle{$forum.node_id}"><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>
 
I am trying to make all titles in a specified Category one colour with one code change instead of changing each forum individually..

Actually my original post is more complicated than it needs to be. For your purposes just add this code to EXTRA.css:

Rich (BB code):
.nodeList .node_1 .nodeTitle a,
.nodeList .node_1 .nodeTitle a:visited
{
	color: red;
}

Change the 1 to specify the category's node_id.
 
Finally at last transferring design to my real active site - but the category title colours are not working here.
I transferred the code from the test site and changed the node numbers.
Code below is for my node no. 46

Code:
/* CATEGORY TITLES (40), 46, 41, 42, 43, 44 */
.nodeList .node_46 .nodeTitle a,
.nodeList .node_46 .nodeTitle a:visited
{
    color: blue;
}

Later - it seems to be working for the nodes under the category bar but not the title on the bar.

Actually could I add something to control the description text on the bar as well with the same colour?
 
OK having whipple checked this it is mysteriouser and mysteriouser
It all worked fine on my test install 1.0
and I copied the EXTRA.css snippets over to the live install 1.1

Have multiple checked I have the category numbers right but what is strange that ONE works and the others do not!
I added that one in later, but that shouldn't make any difference?

In EXTRA.css

Code:
/* CATEGORY TITLES 40, 46, 41, 42, 43,44 */
 
.nodeList .node_40 .nodeTitle a,
.nodeList .node_40 .nodeTitle a:visited
{
    color: #993333;
}
.nodeList .node_46 .nodeTitle a,
.nodeList .node_46 .nodeTitle a:visited
{
    color: #3333cc;
}

The first category node 40 is fine.
The second one (and all the others) don't work.

URL
www.housemorgain.co.uk/circle
 
Top Bottom