xF2 Template Modification ¿How i can do this?

A

Almighty

Well-known member
Registered
Joined
Feb 5, 2020
Messages
60
Points
18

Reputation:

How can I put the "new" in the right to the name of the outside nodes?


1001511817.jpg

1001511823.jpg
 
Last edited:
XenFrodo

XenFrodo

Well-known member
Registered
Joined
Dec 28, 2023
Messages
119
Points
28

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
 
A

Almighty

Well-known member
Registered
Joined
Feb 5, 2020
Messages
60
Points
18

Reputation:

XenFrodo said:
/* 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
Click to expand...
XenFrodoIn which template? @XenFrodo
 
↑View previous replies…
W

wallas

Collaborate
Collaborate
Registered
Joined
May 20, 2021
Messages
215
Points
153

Reputation:

Almighty said:
This https://enxf.cc/resources/evolverp-dark.3453/
Click to expand...
Almighty
unread.jpg

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

Almighty

Well-known member
Registered
Joined
Feb 5, 2020
Messages
60
Points
18

Reputation:

wallas said:
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.
Click to expand...
wallasWhat's their location? @wallas

Edit: It works, thanks, you've help me alot
 
Last edited:
A

Almighty

Well-known member
Registered
Joined
Feb 5, 2020
Messages
60
Points
18

Reputation:

XenFrodo said:
/* 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
Click to expand...
XenFrodoI 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
 
XenFrodo

XenFrodo

Well-known member
Registered
Joined
Dec 28, 2023
Messages
119
Points
28

Reputation:

Almighty said:
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
Click to expand...
AlmightyI'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
 
Splicho

Splicho

Emudevs.gg Owner
Staff member
Moderator
Collaborate
Registered
Joined
Jan 21, 2022
Messages
693
Points
103

Reputation:

XenFrodo said:
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
Click to expand...
XenFrodoHe can use XFA Node Icon Tweak or Iconify Node Icons for that, it comes with unread/read feature
 
You must log in or register to reply here.
Top