• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
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