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

Jake? Extending Category title colours to other levels

Discussion in 'Styling and Customization Questions' started by Morgain, Dec 24, 2011.

  1. Morgain

    Morgain Well-Known Member

    Jake having used your Category styling to wondrous effect (a thousand thanks)
    I would like to extend this.

    So the forum titles as seen on category_view or any forum list
    and thread titles in those forums
    all display with the same link colour on the Title as the top level Category Title colour.

    So everywhere the visitor goes the colour of the links tells them which Category they are in.

    Not sure if it will be possible to have a rainbow of colours on What's New/ Watched Threads/ Recent stuff
    but one can dream!
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You have summoned me. I will grant you three wishes.

    Here is a guide for what you want:

    http://xenforo.com/community/thread...ats-new-for-specific-forum.19804/#post-254193

    This guide can be modified to affect all thread listings (inside of forums, what's new, etc) by removing the condition. Here is the first piece of code without the condition:

    Code:
    <xen:require css="discussion_list.css" />
    
    <xen:if is="{$thread.isDeleted}"><xen:include template="thread_list_item_deleted" /><xen:else />
    
    <li id="thread-{$thread.thread_id}" class="discussionListItem {$thread.discussion_state} {xen:if {$thread.sticky}, 'sticky'} {xen:if {$thread.isNew}, 'unread'} threadListNode{$thread.node_id}" data-author="{$thread.username}">
    
    	<div class="listBlock posterAvatar">
    		<span class="avatarContainer">
    			<xen:avatar user="$thread" size="s" img="true" />
    			<xen:if is="{$thread.user_post_count}"><xen:avatar user="$visitor" size="s" img="true" class="miniMe" title="{xen:phrase you_have_posted_x_messages_in_this_thread, 'count={xen:number $thread.user_post_count}'}" /></xen:if>
    		</span>
    	</div>
    
     
    alexD, Mikey and M@rc like this.
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    However... that requires you to define CSS for each individual forum within a category which isn't ideal. Hang on a sec... I will make something better.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Ok. To define custom thread link colors inside of a category, add this to EXTRA.css:

    Code:
    body.node1 .discussionListItem .title a
    {
    	color: #123456;
    }
    
    Specify the node_id of the category. That will affect all child forums of the category.

    But for the What's New page you still need to use this guide and specify individual forum ids:

    http://xenforo.com/community/thread...ats-new-for-specific-forum.19804/#post-254193
     
  5. Morgain

    Morgain Well-Known Member

    OK Magician I am not doing it right I think. I admit I looked at the thread you cite here when it first appeared and did not understand it so I would need to study it for longer.
    But the last little bit you give here looked easy so I tried it.
    I added your code snippet to EXTRA.css several times each time with the node number and the desired colour.
    This is one as an example:
    Code:
    /* LINKS ON CELTIC CHILD FORUMS */
    body.node42 .discussionListItem .title a
    {
        color: #ff0000;
    }
    But on category_view for my Celtic category (node42)
    there is no effect on the forum titles list nor if I click through any of them to their forum page.

    Now I do have classes in EXTRA.css I use for for each of these category nodes in my sidebar navigation, with the link colours set for each.
    Could I use these? together with the body.node42 call thingy?
    Here's the link code I have for Celtic (node 42)
    Code:
    .linkRed a
    {
        color: #ff0000;
        text-decoration: none;
    }
    .linkRed a:hover
    {
        color: #6699ff;
        text-decoration: underline;
    }
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  7. Morgain

    Morgain Well-Known Member

    The URL you gave is on the test forum.
    The url for the Celtic category on my new live install is

    http://housemorgain.co.uk/circle/categories/celtic-circle.41/

    All the other code I've done points to no. 41 for anything about the Celtic category.
    I tried changing this new code snippet to 3 in case there is something I do not understand. No effect.

    Now on category_view page for Celktic I have this at the top to blank out the standard page title design - I have replaced it with custom.

    Code:
    <!– Remove global title image –>
    <xen:container var="$h1"></xen:container>
    <xen:container var="$catImage">1</xen:container>
     
    <!– *** DOES NOT WORK Hide standard page title–>
    <!-- <xen:title>{$category.title}</xen:title> -->
    Dunno if that makes any difference. But the url still shows the node number so I'd have thought it was ok.
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    In that case add this code to EXTRA.css:

    Code:
    body.node41 .discussionListItem .title a
    {
    	color: #123456;
    }
    
    I don't see node41 defined in your CSS right now.
     
  9. Morgain

    Morgain Well-Known Member

    No that's the same as I tried before - but I did it again to be certain.

    I do already have code from you which makes the same Celtic node 41 forum titles red on the front page forum list

    Code:
    .nodeList .node_41 .nodeTitle a,
    .nodeList .node_41 .nodeTitle a:visited
    {
        color: #ff0000;
    }
    Dunno if that helps or blocks this one.
     
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Ok the code is there now. It should be working. But I can't test it because I can't view threads in that section, and this only affects thread links.

    It works on the default style on my test forum.
     
  11. Morgain

    Morgain Well-Known Member

    OK yes great and big thanks.
    The THREADS in the forums change colour.

    But the TITLES of the forums do not.

    As in - category_view for cat 41 Celtic
    the titles the of the forums are the default blue.

    Maybe a conditional on category_view to make all links red if it's node 41?
    and same purple for cat 42. Etc.
    Or else you have magic in EXTRA.css

    Why doesn't XF rename it JAKE.css ? ;)
     
  12. Morgain

    Morgain Well-Known Member

    by the way what governs the font size of the forum titles in category_view?
    I changed the thread titles a shade bigger in Style Properties: Discussion List but I can't find forum titles.
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Code:
    body.node41 .discussionListItem .title a,
    body.node41 .nodeList .nodeTitle a
    {
    	color: #123456;
    }
    
    That will change both thread and forum links inside of category 41.
     
  14. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Style Properties -> Forum / Node List -> Node Title
     
  15. Morgain

    Morgain Well-Known Member

    Blessings be upon you my child for thou art indeed wise and esteemed among the peoples of the code.
     
  16. Morgain

    Morgain Well-Known Member

    Why does THIS work
    Code:
    /* CELTIC CATEGORY TITLE LINKS */
    .nodeList .node_41 .nodeTitle a,
    .nodeList .node_41 .nodeTitle a:visited
    {
        color: #ff0000;
    }
    /* CHILD FORUMS TITLE LINKS */
    body.node41 .discussionListItem .title a,
    body.node41 .nodeList .nodeTitle a
    {
        color: #ff0000;
    }
    but this doesn't? - attempting to tidy and coordinate I thought all these classes are being defined by the same colour so they could position together.-
    Code:
    /* CELTIC CATEGORY TITLE LINKS */
    .nodeList .node_41 .nodeTitle a,
    .nodeList .node_41 .nodeTitle a:visited
    /* CHILD FORUMS TITLE LINKS */
    body.node41 .discussionListItem .title a,
    body.node41 .nodeList .nodeTitle a
    {
        color: #ff0000;
    }
     
  17. Fuhrmann

    Fuhrmann Well-Known Member

    Code:
    /* CELTIC CATEGORY TITLE LINKS */
    .nodeList .node_41 .nodeTitle a,
    .nodeList .node_41 .nodeTitle a:visited, body.node41 .discussionListItem .title a,
    body.node41 .nodeList .nodeTitle a
    {
        color: #ff0000;
    }
    Try to put a comma in there! I put the code in red.
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

    Put a comma after .nodeList .node_41 .nodeTitle a:visited

    Personally I would remove the explanation text from the middle of the selectors too.

    Edit: Christmas day ninja'ed by Fuhrmann!
     
    Fuhrmann likes this.
  19. Morgain

    Morgain Well-Known Member

    Fuhrmann thank you for ninja teaching, and Brogan too.
    I accept what you say about explanation comment Brogan but why?
    You see I keep careful notes like that because I will later be editing far less and working with interactions far more. I know from experience I will need solid reminders on what I do now in the code if ever I need to change it.
    So I would like to know the negative aspect to balance decision on removing that note.
     
  20. Morgain

    Morgain Well-Known Member

    All working beautifully so far and I am advancing on the forum_view.
    I want to get the same kind of title block design as I put on category_view.
    This needs to inherit the colours and title logo I used in its parent category.

    Unfortunately there is nothing on forum_view that links it to its parent category.
    I chased up node_list but I couldn't see anything to use there either.
    But the link is somewhere in order for THIS forum to position on the node tree under its parent category.

    I'm going to need code to connect to that category - child junction so as to determine the category colours and stuff this forum inherits.
    Also a bit to say use the default from style groups if it's a root node forum.
     

Share This Page