Add Indicator after node title

Add Indicator after node title

Overview Reviews (32) Discussion
erich37 said:
hmmm..... I thought that was possible to do with CSS entirely (without the need for an image) ?

:notworthy:
Click to expand...

it might be and probably is but it's something I haven't looked into fully and wanted to just release a simple enhancement. I may re-visit this and if I can manage it I'll post it or somebody else can if they get there before me. :)
 
Code: 
.nodeInfo.unread .nodeTitle:after {
  content: "NEW";
  display: inline-block;
  line-height: 14px;
  height: 14px;
  vertical-align: 2px;
  margin-left: 5px;
  padding: 0 5px;
  border-left: 10px solid rgba(0, 0, 0, 0);
  border-radius: 2px;
  background-color: red;
  background-color: hsla(0,0%,0%,0);
  background-image: -webkit-linear-gradient(#F00, #F00), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
  background-image: -moz-linear-gradient(#F00, #F00), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
  background-image: linear-gradient(#F00, #F00), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
  background-clip: padding-box, border-box, border-box;
  background-origin: padding-box, border-box, border-box;
  background-size: auto auto, 20px 100%, 20px 100%;
  background-repeat: repeat, repeat-y, repeat-y;
  background-position: 0 0, 0 21px, 0 21px;
  color: #FFF;
  font-size: 9px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

Result: scrr.webp
 
CyberAP said:
Code: 
.nodeInfo.unread .nodeTitle:after {
  content: "NEW";
  display: inline-block;
  line-height: 14px;
  height: 14px;
  vertical-align: 2px;
  margin-left: 5px;
  padding: 0 5px;
  border-left: 10px solid rgba(0, 0, 0, 0);
  border-radius: 2px;
  background-color: red;
  background-color: hsla(0,0%,0%,0);
  background-image: -webkit-linear-gradient(#F00, #F00), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
  background-image: -moz-linear-gradient(#F00, #F00), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
  background-image: linear-gradient(#F00, #F00), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
  background-clip: padding-box, border-box, border-box;
  background-origin: padding-box, border-box, border-box;
  background-size: auto auto, 20px 100%, 20px 100%;
  background-repeat: repeat, repeat-y, repeat-y;
  background-position: 0 0, 0 21px, 0 21px;
  color: #FFF;
  font-size: 9px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

Result: View attachment 44396
Click to expand...

That is some prity impressive usage of css right there. Nice work with that CyberAp. :)
 
Anyone know how to fix?
mawWc5T.png

This part:
668e17d0e40540b18c86bb6.png


It seems to change due to the length of the node name. Is there a way to make them all on the same vertical point?
 
abbychase said:
Anyone know how to fix?
mawWc5T.png

This part:
668e17d0e40540b18c86bb6.png


It seems to change due to the length of the node name. Is there a way to make them all on the same vertical point?
Click to expand...


Remove the margin-left: 83%;

add in a float: right; and if you want it moved over away from the rss feed icon add in a margin-right: 10px; << adjust value to your preference on the margin right.
 
abbychase said:
Got any new and amazing resources coming out soon? :p
I really like this one :D I would like to see more
Click to expand...

Not sure whether they will get released but I've always had a vast amount of resources (thousand of graphic sets) still lingering on my hardrive. You can view what will be released soon via the showcase area on my site. :)

These are the current W.I.P yet to be released.

DARK-FLARE-RANKS.webpdark-flare-slim-ranks.webpdownloadnow_preview.webpstandard-yellow-smiley-pack.webp
 
abbychase said:
You can add that? xD

Yay :)
Please tell me when!
Click to expand...

I'm still using the standard forums for resources I've only used the RM for testing and not posted resources in it so the add-on I'm using applies to the standard areas. The rm still needs a few more features or I've yet to get a few more add-ons before it's worth considering using, but I've got 2 add-ons (2 awesome add-ons by borbole) for the rm already so hopefully start making use of the rm real soon.

And I will do (let you know that is).
 
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
596
ShikiSuen
ShikiSuen
A
Unread posts indicator [Deleted]
Replies
1
Views
633
AnzahTools
A
Emre
Add Indicator after node title | xF 2.x.x [Deleted]
Replies
10
Views
2K
Emre
Emre
Top Bottom