• 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

Morgain

Well-known member
#1
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!
 

Jake Bunce

XenForo moderator
Staff member
#2
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>
 

Jake Bunce

XenForo moderator
Staff member
#3
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.
 

Morgain

Well-known member
#5
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;
}
 

Morgain

Well-known member
#7
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.
 

Jake Bunce

XenForo moderator
Staff member
#8
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.
 

Morgain

Well-known member
#9
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.
 

Jake Bunce

XenForo moderator
Staff member
#10
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.
 

Morgain

Well-known member
#11
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 ? ;)
 

Morgain

Well-known member
#12
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.
 

Jake Bunce

XenForo moderator
Staff member
#13
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.
 

Jake Bunce

XenForo moderator
Staff member
#14
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.
Admin CP -> Appearance -> Style Properties -> Forum / Node List -> Node Title
 

Morgain

Well-known member
#16
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;
}
 

Fuhrmann

Well-known member
#17
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.
 

Brogan

XenForo moderator
Staff member
#18
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!
 

Morgain

Well-known member
#19
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.
 

Morgain

Well-known member
#20
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.