MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > Change username style to this
Full Version: Change username style to this
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

Lektz

2014-12-16, 05:05 PM
Hello!

I want to change a group username style to this http://jsfiddle.net/2tu2sLox/

But I don't know where should I add the CSS, I tried with global.css but it doesn't works.

Any help is apreciatted Big Grin

mmadhankumar

2014-12-16, 06:13 PM
The css should be added as inline in ACP >> Users & Groups >> Groups >> Edit a Group >> Username Style for it to work...

You can try this instead: http://community.mybb.com/thread-119359.html

Lektz

2014-12-16, 06:46 PM
What do you mean with inline?

Leefish

2014-12-16, 06:49 PM
You can actually wrap the username in a class and add the class to your global.css:

so in Home » User Groups » Edit User Group
Username Style

<span class="admin">{username}</span>

Then add to global.css

.admin {color:red;text-transform:uppercase;}

Lektz

2014-12-16, 07:12 PM
That's what I did, I added the css to global.css and then used the <span class="rainbow">{username}</span> but it doesn't works.

Leefish

2014-12-16, 07:14 PM
Where did you expect it to show? Does it show on profile? Can you paste the css you used?

Lektz

2014-12-16, 10:00 PM
(2014-12-16, 07:14 PM)Leefish Wrote: [ -> ]Where did you expect it to show? Does it show on profile? Can you paste the css you used?

I want to show it as the username color (like your orange as member of the group MyBB Staff) 

.matmo {
	font-family:Rancho;
 -webkit-animation:rainbow 3s linear infinite;
animation:rainbow 3s linear infinite;

}

@keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}
@-webkit-keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}
.dat_sep {
background-color: #1d1d1d;
}
.dat_sep2 {
background-color: #161616;
}

@font-face {
  font-family: 'Rancho';
  font-style: normal;
  font-weight: 400;
  src: local('Rancho'), url(https://fonts.gstatic.com/s/rancho/v6/GOJpB432cIs2ZQ3ToRKy4fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

That was the css I added to global.css

SvePu

2014-12-17, 12:50 AM
You have to change the username style in:

<span class="matmo">{username}</span>

Leefish

2014-12-17, 06:45 AM
Your css should be :

span.matmo {
    font-family:Rancho;
-webkit-animation:rainbow 3s linear infinite;
animation:rainbow 3s linear infinite;

}

@keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}
@-webkit-keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}
.dat_sep {
background-color: #1d1d1d;
}
.dat_sep2 {
background-color: #161616;
}

@font-face {
  font-family: 'Rancho';
  font-style: normal;
  font-weight: 400;
  src: local('Rancho'), url(https://fonts.gstatic.com/s/rancho/v6/GOJpB432cIs2ZQ3ToRKy4fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Lektz

2014-12-17, 03:00 PM
(2014-12-17, 12:50 AM)SvePu Wrote: [ -> ]You have to change the username style in:

<span class="matmo">{username}</span>

Yes, I tried with that username style

(2014-12-17, 06:45 AM)Leefish Wrote: [ -> ]Your css should be :

span.matmo {
    font-family:Rancho;
-webkit-animation:rainbow 3s linear infinite;
animation:rainbow 3s linear infinite;

}

@keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}
@-webkit-keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}
.dat_sep {
background-color: #1d1d1d;
}
.dat_sep2 {
background-color: #161616;
}

@font-face {
  font-family: 'Rancho';
  font-style: normal;
  font-weight: 400;
  src: local('Rancho'), url(https://fonts.gstatic.com/s/rancho/v6/GOJpB432cIs2ZQ3ToRKy4fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

I tried with that CSS but it doesn't works Sad
Pages: 1 2
MyBB Community Forums > Extensions > Themes > Theme Support > Change username style to this