Add Indicator after node title

Add Indicator after node title

Shelley

Well-known member
#1
Shelley submitted a new resource:

Add Indicator after node title - New indicator appear after node title for unread posts

new-indicator1.png View attachment 44355

Summary: A simple enhancement that will display a "New" marker after the node title of unread posts. You could enhance this further by using imagery which is your choice, basically adjust and style to your preference. :)

Install: Simply paste the following into the EXTRA.CSS template

Code:
.node .unread .nodeTitle:after {
background-color: #ac1212;
content: "NEW";
color: white;
border-radius: 2px;...
Read more about this resource...
 

abbychase

Active member
#8
Looks good.
I was playing around with it


Simply Add the following to your extra.css:
Code:
.node .unread .nodeTitle:after {
background-color: #65a5d1;
content: "NEW";
color: white;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
margin-left: 79%;
padding: 1px 5px;
font-size: 9px;
}
 

Shelley

Well-known member
#9
Looks good.
I was playing around with it


Simply Add the following to your extra.css:
Code:
.node .unread .nodeTitle:after {
background-color: #65a5d1;
content: "NEW";
color: white;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
margin-left: 79%;
padding: 1px 5px;
font-size: 9px;
}
Nice. I tried that and floated it right but felt people might prefer it not far from the title but anyone can alter it to their preference. Nice job. :)

Here's what it looks like with many unread posts so you get a feel what it looks like.

new-indicator1.png
 

kkm323

Well-known member
#17
Code:
.nodeInfo.unread .nodeTitle:after,
.discussionListItem.unread .title:after
{
  /* Your code here */
}
Code:
.nodeInfo.unread .nodeTitle:after,
.discussionListItem.unread .title:after
{
background-color: #E03030;
content: "new";
color: white;
border-radius: 2px;
margin-left: 5px;
padding: 1px 5px;
font-size: 9px;
margin-top: 5%;}
it works
thanks
 

Shelley

Well-known member
#19
how to make it exactly the same as the current alerts, just having the "Alert Balloon" at the left ? :)
I'm sure Shelley knows the tricks ;)

View attachment 44365

Many thanks!
I would like this also, but for the other way Pointing to the right. For my edit :p
Seriously use the following at your own risk (it was trickier to do than i thought) and you may need to modify it a little if alignment is out. :D

Code:
.nodeInfo.unread .nodeTitle:after {
background-image: url("@imagePath/xenforo/icons/new-indicator-bb.png");
background-repeat: no-repeat;
content: "NEW";
color: white;
padding: 3px 12px;
font-size: 9px; 
margin-left: 5px;
}
new-indicator-arrow.png
 

Attachments

Top