Add Indicator after node title

[Shelley]

Shelley submitted a new resource:

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

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

.node .unread .nodeTitle:after {
background-color: #ac1212;
content: "NEW";
color: white;
border-radius: 2px;...

Read more about this resource...

 

[M@rc]

This is really cool. Thanks!

 

[rdn]

Very nice tip, but what would be the nice color combination for Dark Theme

 

[Shelley]

Very nice tip, but what would be the nice color combination for Dark Theme

A dark theme. *thinks* black, go with black.

 

[rdn]

A dark theme. *thinks* black, go with black.

Yes, I mean Flexile Dark/Black

 

[Shelley]

Yes, I mean Flexile Dark/Black

A dark theme. *thinks* black, go with black.

black indicator. I dunno, pick a colour you like and apply the hex value to the background-color

 

[Kevin]

To quote my review....

Quick, simple and effective in catching the users attention -- I like!​

 

[abbychase]

Looks good.
I was playing around with it

Simply Add the following to your extra.css:

.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]

Looks good.
I was playing around with it

Simply Add the following to your extra.css:

.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.

 

[rdn]

Subforum problem.

 

[Shelley]

Subforum problem.

I knew it was too good to be true.

Try pasting the following in extra

.subForumsMenu .node .unread .nodeTitle:after {display: none;}

 

[erich37]

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



Many thanks!

 

[abbychase]

how to make it exactly the same as the current alerts, just having the "Alert Balloon" at the left ?

View attachment 44365

I would like this also, but for the other way Pointing to the right. For my edit

 

[CyberAP]

I knew it was too good to be true.

Try pasting the following in extra

.subForumsMenu .node .unread .nodeTitle:after {display: none;}

Or to fix this another way:

.nodeInfo.unread .nodeTitle:after
{
  /* Code here */
}

 

[kkm323]

Can we have another one for thread list, great work

 

[CyberAP]

Can we have another one for thread list, great work

.nodeInfo.unread .nodeTitle:after,
.discussionListItem.unread .title:after
{
  /* Your code here */
}

 

[kkm323]

.nodeInfo.unread .nodeTitle:after,
.discussionListItem.unread .title:after
{
  /* Your code here */
}

.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]

Or to fix this another way:

.nodeInfo.unread .nodeTitle:after
{
  /* Code here */
}

Excellent spot. Modified the code on the resource side to reflect the changes. Thanks CyberAP.

 

[Shelley]

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

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.

.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;
}

 

[erich37]

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.

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