1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  3. 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)

Discussion in 'Template Modifications [Archive]' started by Jake Bunce, Nov 9, 2010.

  1. Jake Bunce

    Jake Bunce Probably knows the answer Staff 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.png

    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. ;)
    Veer, Trombones13, cornishman and 3 others like this.
  2. CFodder

    CFodder Well-Known Member

    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?
    Jake Bunce likes this.
  3. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    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.
    CFodder likes this.
  4. CFodder

    CFodder Well-Known Member

    Cool, do you know if I could make that work the same way for the node icons?
  5. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    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.
  6. Blue

    Blue Well-Known Member

    Jake is there a way for the custom colors to show when viewing the What's New listing?
  7. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    I don't see any easy way to do that. The node_id is not readily available on that page.
  8. Trombones13

    Trombones13 Well-Known Member

    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?
  9. Forsaken

    Forsaken Well-Known Member

    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/
    Trombones13 likes this.
  10. Trombones13

    Trombones13 Well-Known Member

    Excellent! Thanks. :)
  11. Forsaken

    Forsaken Well-Known Member

    As for navigation you're best off using the link name:

    Code:
    .navTabs .navTab.forums .navLink
    {
    color:#ff0000;
    }
    
    Trombones13 likes this.
  12. Morgain

    Morgain Well-Known Member

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

    Jake Bunce Probably knows the answer Staff Member

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

    Code:
    .nodeList .node_1 .nodeTitle a,
    .nodeList .node_1 .nodeTitle a:visited
    {
    	color: red;
    }
    
    Change the 1 to specify the category's node_id.
  14. Morgain

    Morgain Well-Known Member

    delicious Jake
    here (test forum only)
    http://www.housemorgain.co.uk/forumxf/index.php

    Now I did need to replace that line in
    Admin CP -> Appearance -> Templates -> node_forum_level_2
    didn't I? Just checking for when I transfer to live install.

    Now I need to look at those gradients on the bars to change their colours to match!
  15. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    Nope. The change to node_forum_level_2 is not needed.
  16. Morgain

    Morgain Well-Known Member

    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?
  17. Morgain

    Morgain Well-Known Member

    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

Share This Page