I want to share with you this beautiful customization. If you have a forum and you want to give to your users something new, this is what you need. Simple, and nice custom.
Find on your ACP Styles, Templates , extra.less template
Copy and paste this code
Save, and reload your forum index. You will see on the new threads, the NEW icon with a blinker animation.
Sorry for my english
Find on your ACP Styles, Templates , extra.less template
Copy and paste this code
.node--unread .node-title:after {
content: "{{ phrase('new') }}";
color: #ffffff;
background: #ed7a16;
display: inline-block;
font-size: 9px;
line-height: 2;
border-radius: 3px;
padding: 0 4px;
margin-right: 4px;
vertical-align: middle;
-webkit-animation-name: blinker;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.node--unread .node-title:after {
content: "{{ phrase('new') }}";
}
Save, and reload your forum index. You will see on the new threads, the NEW icon with a blinker animation.
Sorry for my english
