Reputation:
/* Blinker NEW Animation on NEW Posts */
.node--unread .node-title:before {
content: "{{ phrase('𝓝𝓔𝓦') }}";
color: #FFF;
background: #b83b14;
display: inline-block;
font-size: 10px;
text-align: center;
line-height: 2;
border-radius: 4px;
padding: 0 10px;
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: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
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 {
}
Change before to after
Reputation:
In which template? @XenFrodo
Reputation:
.node--read.node--forum.node .node-icon i,.node--read.node--category.node .node-icon i {
background: url("/styles/evolve-dark/images/icons/node.png") no-repeat
}
.node--unread.node--forum.node .node-icon i,.node--unread.node--category.node .node-icon i {
background: url("/styles/evolve-dark/images/icons/node2.png") no-repeat
}
View attachment 40492
Edit read.node or unread.node icon.
I uploaded a modified "node2.png" image to the theme's images folder and then added this code to the extra.less file.
Less:.node--read.node--forum.node .node-icon i,.node--read.node--category.node .node-icon i { background: url("/styles/evolve-dark/images/icons/node.png") no-repeat } .node--unread.node--forum.node .node-icon i,.node--unread.node--category.node .node-icon i { background: url("/styles/evolve-dark/images/icons/node2.png") no-repeat }
It works.
/* Blinker NEW Animation on NEW Posts */
.node--unread .node-title:before {
content: "{{ phrase('𝓝𝓔𝓦') }}";
color: #FFF;
background: #b83b14;
display: inline-block;
font-size: 10px;
text-align: center;
line-height: 2;
border-radius: 4px;
padding: 0 10px;
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: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
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 {
}
Change before to after
Reputation:
I don't want that anymation, how i remove that?. Done, i've changed the 1s to 0s.
How i can change the icon when there are news unread, threads messages? @XenFrodo
Reputation:
I'm not sure myself, I would say that you have to find out the class accordingly and then change this .node--unread .node-title: to the correct class in a second extra.less entry to have more as one Icons
Wait a bit, there will surely be some people here who are more familiar than me with Xf and CSS and Helps you. Good luck with that I would be interested myself as I currently only use one icon myself