MyBB Community Forums
Change username style to this - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Support (https://community.mybb.com/forum-10.html)
+---- Thread: Change username style to this (/thread-164267.html)

Pages: 1 2


Change username style to this - Lektz - 2014-12-16

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


RE: Change username style to this - mmadhankumar - 2014-12-16

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


RE: Change username style to this - Lektz - 2014-12-16

What do you mean with inline?


RE: Change username style to this - Leefish - 2014-12-16

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;}



RE: Change username style to this - Lektz - 2014-12-16

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.


RE: Change username style to this - Leefish - 2014-12-16

Where did you expect it to show? Does it show on profile? Can you paste the css you used?


RE: Change username style to this - Lektz - 2014-12-16

(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


RE: Change username style to this - SvePu - 2014-12-17

You have to change the username style in:

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



RE: Change username style to this - Leefish - 2014-12-17

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;
}



RE: Change username style to this - Lektz - 2014-12-17

(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