Change usergroup color per style

J

jesse120502

Member
Registered
Joined
Jul 14, 2019
Messages
19
Points
13

Reputation:

Hi!

I have 2 styles on my site. A light and a dark style. My default usergroup color is black, but in the dark mode I want the usernames to be white. Is it possible to change the usergroup color for a specific style?
 
S

Soft4Win

Developer
Staff member
Moderator
Collaborate
Registered
Joined
Apr 27, 2019
Messages
368
Points
103

Reputation:

jesse120502 said:
Hi!

I have 2 styles on my site. A light and a dark style. My default usergroup color is black, but in the dark mode I want the usernames to be white. Is it possible to change the usergroup color for a specific style?
Click to expand...
jesse120502Yes, specify that in the extra.less of that particular style, and then it will work only on that style.
 
J

jesse120502

Member
Registered
Joined
Jul 14, 2019
Messages
19
Points
13

Reputation:

@Soft4Win thanks for your reply. What should i put in the extra.less if I want to change the color for the usergroup REGISTERED to white?
 
O

one_finger_man

Well-known member
Registered
Joined
Jan 20, 2022
Messages
421
Points
53

Reputation:

try this add to css
chosen group
color: #FF1919;

Code: 
.username .username--style3{
-webkit-animation:username--style3 5s linear infinite;
-moz-animation:username--style3 5s linear infinite;
-ms-animation:username--style3 5s linear infinite;
-o-animation:username--style3 5s linear infinite;
animation:username--style3 5s linear infinite;
}
@-moz-keyframes username--style3 {
0% { color: #FF1919; }
15% { color: #E019FF; }
30% { color: #4F19FF; }
45% { color: #19A7FF; }
60% { color: #19FFDC; }
75% { color: #65FF19; }
90% { color: #FFE019; }
}
@-webkit-keyframes username--style3 {
0% { color: #FF1919; }
15% { color: #E019FF; }
30% { color: #4F19FF; }
45% { color: #19A7FF; }
60% { color: #19FFDC; }
75% { color: #65FF19; }
90% { color: #FFE019; }
}


 After going into the template and added to extra.less




.username .username--style3 {
-webkit-animation:username--style3 5s linear infinite;
-moz-animation:username--style3  5s linear infinite;
-ms-animation:username--style3  5s linear infinite;
-o-animation:username--style3  5s linear infinite;
animation:username--style3  5s linear infinite;
}
@-moz-keyframes username--style3  {
0% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
15% {  text-shadow: 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255); }
30% { text-shadow: 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255); }
45% { text-shadow: 0px 0px 0.2em rgb(0, 255, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 255, 255);}
60% { text-shadow: 0px 0px 0.2em rgb(0, 255, 0), 0px 0px 0.2em rgb(0, 0, 0), 0px 0px 0.2em rgb(0, 255, 0); }
75% { text-shadow: 0px 0px 0.2em rgb(255, 255, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 255, 0); }
90% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
}
@-webkit-keyframes username--style3  {
0% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
15% {  text-shadow: 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255); }
30% { text-shadow: 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255); }
45% { text-shadow: 0px 0px 0.2em rgb(0, 255, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 255, 255);}
60% { text-shadow: 0px 0px 0.2em rgb(0, 255, 0), 0px 0px 0.2em rgb(0, 0, 0), 0px 0px 0.2em rgb(0, 255, 0); }
75% { text-shadow: 0px 0px 0.2em rgb(255, 255, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 255, 0); }
90% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
}
 
O

one_finger_man

Well-known member
Registered
Joined
Jan 20, 2022
Messages
421
Points
53

Reputation:

here is the full changing color groups i only gave you half so here
Code: 
To start add the code below in the chosen group:
color:  #FF1919;

 After going into the template and added to extra.less code (the " 3 " it will change your user group in question):

.username .username--style3{
-webkit-animation:username--style3 5s linear infinite;
-moz-animation:username--style3 5s linear infinite;
-ms-animation:username--style3 5s linear infinite;
-o-animation:username--style3 5s linear infinite;
animation:username--style3 5s linear infinite;
}
@-moz-keyframes username--style3 {
0% { color: #FF1919; }
15% { color: #E019FF; }
30% { color: #4F19FF; }
45% { color: #19A7FF; }
60% { color: #19FFDC; }
75% { color: #65FF19; }
90% { color: #FFE019; }
}
@-webkit-keyframes username--style3 {
0% { color: #FF1919; }
15% { color: #E019FF; }
30% { color: #4F19FF; }
45% { color: #19A7FF; }
60% { color: #19FFDC; }
75% { color: #65FF19; }
90% { color: #FFE019; }
}


 After going into the template and added to extra.less




.username .username--style3 {
-webkit-animation:username--style3 5s linear infinite;
-moz-animation:username--style3  5s linear infinite;
-ms-animation:username--style3  5s linear infinite;
-o-animation:username--style3  5s linear infinite;
animation:username--style3  5s linear infinite;
}
@-moz-keyframes username--style3  {
0% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
15% {  text-shadow: 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255); }
30% { text-shadow: 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255); }
45% { text-shadow: 0px 0px 0.2em rgb(0, 255, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 255, 255);}
60% { text-shadow: 0px 0px 0.2em rgb(0, 255, 0), 0px 0px 0.2em rgb(0, 0, 0), 0px 0px 0.2em rgb(0, 255, 0); }
75% { text-shadow: 0px 0px 0.2em rgb(255, 255, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 255, 0); }
90% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
}
@-webkit-keyframes username--style3  {
0% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
15% {  text-shadow: 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255), 0px 0px 0.2em rgb(255, 0, 255); }
30% { text-shadow: 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 0, 255); }
45% { text-shadow: 0px 0px 0.2em rgb(0, 255, 255), 0px 0px 0.2em rgb(0, 0, 255), 0px 0px 0.2em rgb(0, 255, 255);}
60% { text-shadow: 0px 0px 0.2em rgb(0, 255, 0), 0px 0px 0.2em rgb(0, 0, 0), 0px 0px 0.2em rgb(0, 255, 0); }
75% { text-shadow: 0px 0px 0.2em rgb(255, 255, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 255, 0); }
90% { text-shadow: 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0), 0px 0px 0.2em rgb(255, 0, 0); }
}
 
You must log in or register to reply here.
Top