MyBB Community Forums

Full Version: How to make user style links have different hover effecs
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
I was wondering about how to do this so I did some research. I easily found my answer on Google, but I assume some of you may be wondering how to do this still.

To give some more information on this: In my forum I have my links set to change to black on hover, but not to underline. To maintain user style, MyBB cancels out this color change, and only keeps the text decorations. If you're like me, and only want the text decorations on username hover, follow this tutorial. If you don't understand what I'm showing you how to do here, see my site, I have a thread showcasing it. Anyways, to the tutorial!

First navigate to Admin CP > Users & Groups > Groups
Like so:
[Image: QdTpo.jpg]

Next, click on the user group you desire to edit.

Then, in the box for Username Style place this code (alter it to your needs) after your font color / hex color end quote and a space.
onmouseover="this.style.textDecoration='underline'"  onmouseout="this.style.textDecoration='none'"

Altogether, the style box should read something similar to this:
<font color="green" onmouseover="this.style.textDecoration='underline'"  onmouseout="this.style.textDecoration='none'"><b>{username}</b></font>




Thanks for reading.
Why not do it with css?

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }
(2011-08-15, 05:46 AM)Jason L. Wrote: [ -> ]Why not do it with css?

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

This is for if you don't want your normal links to underline Smile

Maybe you'll ask why you wouldn't want that.. Well I find that simply a color change is enough of an indicator. So after making a:hover { text-decoration: none; } I realized that the usernames didn't have a hover effect, so I added this one.
(2011-08-15, 05:49 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:46 AM)Jason L. Wrote: [ -> ]Why not do it with css?

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

This is for if you don't want your normal links to underline Smile

Maybe you'll ask why you wouldn't want that.. Well I find that simply a color change is enough of an indicator. So after making a:hover { text-decoration: none; } I realized that the usernames didn't have a hover effect, so I added this one.

.userLink a:link { text-decoration: none; }
.userLink a:hover { text-decoration: underline; }
(2011-08-15, 05:50 AM)Jason L. Wrote: [ -> ]
(2011-08-15, 05:49 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:46 AM)Jason L. Wrote: [ -> ]Why not do it with css?

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

This is for if you don't want your normal links to underline Smile

Maybe you'll ask why you wouldn't want that.. Well I find that simply a color change is enough of an indicator. So after making a:hover { text-decoration: none; } I realized that the usernames didn't have a hover effect, so I added this one.

.userLink a:link { text-decoration: none; }
.userLink a:hover { text-decoration: underline; }
Does not work?
(2011-08-15, 05:59 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:50 AM)Jason L. Wrote: [ -> ]
(2011-08-15, 05:49 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:46 AM)Jason L. Wrote: [ -> ]Why not do it with css?

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

This is for if you don't want your normal links to underline Smile

Maybe you'll ask why you wouldn't want that.. Well I find that simply a color change is enough of an indicator. So after making a:hover { text-decoration: none; } I realized that the usernames didn't have a hover effect, so I added this one.

.userLink a:link { text-decoration: none; }
.userLink a:hover { text-decoration: underline; }
Does not work?

You have to add it to the username obviously.

<div class="userLink">{username}</div>
(2011-08-15, 06:00 AM)Jason L. Wrote: [ -> ]
(2011-08-15, 05:59 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:50 AM)Jason L. Wrote: [ -> ]
(2011-08-15, 05:49 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:46 AM)Jason L. Wrote: [ -> ]Why not do it with css?

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

This is for if you don't want your normal links to underline Smile

Maybe you'll ask why you wouldn't want that.. Well I find that simply a color change is enough of an indicator. So after making a:hover { text-decoration: none; } I realized that the usernames didn't have a hover effect, so I added this one.

.userLink a:link { text-decoration: none; }
.userLink a:hover { text-decoration: underline; }
Does not work?

You have to add it to the username obviously.

<div class="userLink">{username}</div>

I see. I found it easier to do it with onmouseover, but great alternative!
(2011-08-15, 06:00 AM)Jason L. Wrote: [ -> ]
(2011-08-15, 05:59 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:50 AM)Jason L. Wrote: [ -> ]
(2011-08-15, 05:49 AM)Camgaertner Wrote: [ -> ]
(2011-08-15, 05:46 AM)Jason L. Wrote: [ -> ]Why not do it with css?

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

This is for if you don't want your normal links to underline Smile

Maybe you'll ask why you wouldn't want that.. Well I find that simply a color change is enough of an indicator. So after making a:hover { text-decoration: none; } I realized that the usernames didn't have a hover effect, so I added this one.

.userLink a:link { text-decoration: none; }
.userLink a:hover { text-decoration: underline; }
Does not work?

You have to add it to the username obviously.

<div class="userLink">{username}</div>

I thought it was
a.userLink {
CSS here
}
a.userLink:hover {
CSS here
}

And not to be "That guy", but doesn't w3Schools teach this in principle on their CSS tutorial? So....It's kind of common knowledge. So why consider it a tutorial? What does it teach the Mybb User about the software and how it can be manipulated to benefit their needs within the LGPL license?
(2011-08-15, 10:50 AM)Claire Wrote: [ -> ]And not to be "That guy", but doesn't w3Schools teach this in principle on their CSS tutorial? So....It's kind of common knowledge. So why consider it a tutorial? What does it teach the Mybb User about the software and how it can be manipulated to benefit their needs within the LGPL license?

It teaches the Mybb User how to give hover effects for the user styles within the user style.
(2011-08-15, 07:04 PM)Camgaertner Wrote: [ -> ]
(2011-08-15, 10:50 AM)Claire Wrote: [ -> ]And not to be "That guy", but doesn't w3Schools teach this in principle on their CSS tutorial? So....It's kind of common knowledge. So why consider it a tutorial? What does it teach the Mybb User about the software and how it can be manipulated to benefit their needs within the LGPL license?

It teaches the Mybb User how to give hover effects for the user styles within the user style.

Knowing how to give a hover effect should be common knowledge when it comes to knowing CSS, it really doesn't show us anything new about the software that we can utilize to our own advantages.
Pages: 1 2