Add Indicator after node title

Add Indicator after node title

Overview Reviews (32) Discussion
Shelley said:
Forget my previous post (not sure whether there's any adverse affects with the below solution) try the following it seems to work for me.

Code: 
.blockLinksList .nodeTitle:after {display: none;}
.nodeInfo.unread .nodeTitle:after, body .subForumsPopup .blockLinksList .unread .nodeTitle a:after {
background-color: #ac1212;
content: "NEW";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 1px 5px;
font-size: 8px; }
Click to expand...

Any idea on how to have it on just the sub node's and not the main title one?
 
kingston said:
Any idea on how to have it on just the sub node's and not the main title one?
Click to expand...

I haven't experimented yet on how to achieve that but will look into it (anyone else is free to jump in if they have the solution) but will take a look later tonight if nobody has posted a solution.
 
kingston said:
Any idea on how to have it on just the sub node's and not the main title one?
Click to expand...

not sure this is a great way of doing this but you will have to input the ID of your forum that you don't want it to show on where 15 was my ID.

Code: 
.nodeList .node.node_15 .unread .nodeTitle:after {display: none;}

if you have multiple forums you want to hide it in keep adding to it like the following with your own IDs.

Code: 
.nodeList .node.node_15 .unread .nodeTitle:after,  .nodeList .node.node_18 .unread .nodeTitle:after, .nodeList .node.node_1 .unread .nodeTitle:after{display: none;}
 
Shelley said:
not sure this is a great way of doing this but you will have to input the ID of your forum that you don't want it to show on where 15 was my ID.

Code: 
.nodeList .node.node_15 .unread .nodeTitle:after {display: none;}

if you have multiple forums you want to hide it in keep adding to it like the following with your own IDs.

Code: 
.nodeList .node.node_15 .unread .nodeTitle:after,  .nodeList .node.node_18 .unread .nodeTitle:after, .nodeList .node.node_1 .unread .nodeTitle:after{display: none;}
Click to expand...

Awesome! You have been fantastically helpful. One last question.

I have a forum link (node 181). How would I put a custom message after it if it is never unread?
 
Code: 
.nodeList .node_181 .linkNodeInfo  .nodeTitle:after {
background-color: #ac1212;
content: "your custom message in here and styling it to your preference";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 1px 5px;
font-size: 8px; }
 
Shelley said:
Code: 
.nodeList .node_181 .linkNodeInfo  .nodeTitle:after {
background-color: #ac1212;
content: "your custom message in here and styling it to your preference";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 1px 5px;
font-size: 8px; }
Click to expand...

Code: 
.nodeList .node.node_67 .unread .nodeTitle:after, .nodeList .node.node_99 .unread .nodeTitle:after, .nodeList .node.node_154 .unread .nodeTitle:after, .nodeList .node.node_94 .unread .nodeTitle:after{display: none;}
.blockLinksList .nodeTitle:after {display: none;}
.nodeInfo.unread .nodeTitle:after, body .subForumsPopup .blockLinksList .unread .nodeTitle a:after {
background-color: #188296;
content: "NEW";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 1px 5px;
font-size: 8px; }
 
.nodeList .node_181 .linkNodeInfo  .nodeTitle:after {
background-color: #ac1212;
content: "Upgrade your account: No more ads!";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 1px 5px;
font-size: 8px; }

That second one is what I am trying to do
 
Just a tip: to hide pesudo elements we also can use content: none;. This will not only hide that element but it also won't be created at all. There is not much difference from display: none;, just a geeky thought.
 
kingston said:
Hah, sorry. Would help if I pointed out. It is the link under Cheerleading that says:

Want to get rid of ads?
Click to expand...

Try the following but I'm sure this will still show to all usergroups.

edit: I don't think the code (below) will work.

Code: 
.nodeList .node_181 .forumNodeInfo  .nodeTitle:after {
background-color: green;
content: "your custom message in here and styling it to your preference";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 3px 5px;
font-size: 9px;
}
 
Shelley said:
Try the following but I'm sure this will still show to all usergroups.

edit: I don't think the code (below) will work.

Code: 
.nodeList .node_181 .forumNodeInfo  .nodeTitle:after {
background-color: green;
content: "your custom message in here and styling it to your preference";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 3px 5px;
font-size: 9px;
}
Click to expand...

Yeah. It still isn't working. This one will always be there, just after one specific node that is a forum link.
 
kingston said:
Yeah. It still isn't working. This one will always be there, just after one specific node that is a forum link.
Click to expand...

back again. :D

depending on the length of your message this may cause some breakage.

Code: 
.nodeInfo .node_181 .nodeTitle:after, body .subForumsPopup .blockLinksList .node_181 .nodeTitle a:after {
background-color: green;
content: "your custom message in here and styling it to your preference";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 3px 5px;
font-size: 9px;
}
 
Shelley said:
back again. :D

depending on the length of your message this may cause some breakage.

Code: 
.nodeInfo .node_181 .nodeTitle:after, body .subForumsPopup .blockLinksList .node_181 .nodeTitle a:after {
background-color: green;
content: "your custom message in here and styling it to your preference";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 3px 5px;
font-size: 9px;
}
Click to expand...

That did it!
 
One of the most awesome resources! My members love it! It's easier for them to find a thread and reply to it when needed!
Great work as always Shelley!
 
Shelley said:
back again. :D

depending on the length of your message this may cause some breakage.

Code: 
.nodeInfo .node_181 .nodeTitle:after, body .subForumsPopup .blockLinksList .node_181 .nodeTitle a:after {
background-color: green;
content: "your custom message in here and styling it to your preference";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 3px 5px;
font-size: 9px;
}
Click to expand...


Is there a way to make a message only show for a certain usergroup?
 
You must log in or register to reply here.

Similar threads

S
  • Question Question
XF 2.2 need quick extra.less css help (how to hide css from specific page)
Replies
6
Views
1K
sross
S
V
  • Question Question
XF 2.2 sf-dump artefacts when mp3s embedded in forum posts
Replies
14
Views
1K
voom
V
ShikiSuen
[ShikiSuen] Node List Item Classification Bar right below category title bar.
Replies
0
Views
595
ShikiSuen
ShikiSuen
A
Unread posts indicator [Deleted]
Replies
1
Views
630
AnzahTools
A
Emre
Add Indicator after node title | xF 2.x.x [Deleted]
Replies
10
Views
2K
Emre
Emre
Top Bottom