Add Indicator after node title

Add Indicator after node title

Shelley

Well-known member
Shelley submitted a new resource:

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

jVGzhJ2.png
new-indicator1.webp 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...
 
Looks good.
I was playing around with it
07f3b7e29e4b4bd6bfa8729.png


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;
}
 
Looks good.
I was playing around with it
07f3b7e29e4b4bd6bfa8729.png


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.webp
 
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 ;)

alert-balloon.webp

Many thanks!
 
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
 
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.webp
 

Attachments

  • new-indicator-bb.webp
    new-indicator-bb.webp
    192 bytes · Views: 77
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

hmmm..... I thought that was possible to do entirely with CSS (without the need for an image) ?

:notworthy:
 
Back
Top Bottom