Widget Hover over Text

Go down

Solved Widget Hover over Text

Post by Tobii on February 28th 2014, 2:15 am

Hello, I recently have gotten a bit more interested in coding widgets and forums, and I'd like to know the coding for these types of widgets.

When you hover over the text, the two gray bars and the text enlarge (text goes into capitals). I've seen many forums use these types of navigation widgets, and I'm interested!
Thanks in advance to anyone who helps.

Best Regards,
Tobii.
avatar
Tobii
Forumember

Male Posts : 332
Reputation : 3
Language : English, Mandarin, French

http://naruto-thepath.boardonly.com/

Back to top Go down

Solved Re: Widget Hover over Text

Post by Ange Tuteur on February 28th 2014, 11:36 am

Hello Tobii,

You can do this with CSS, first go to :
Administration Panel > Modules > Forum widgets management > edit the Navigation widget, or if you don't have one, create one.

Wrap your navigation widget contents with these tags :
Code:
<div class="navItem"></div>

It should look like :
Code:
<div class="navItem">
<a href="/forum">Forum</a>
<a href="/profile?mode=editprofile">Profile</a>
<a href="/memberlist">Memberlist</a>
</div>

Now go to :
Administration Panel > Display > Colors > CSS stylesheet

Without CSS it'll just appear as a boring navigation, so add the below to your sheet :
Code:
.navItem a {
    color:#000 !important;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    border:4px solid gray;
    border-top:none !important;
    border-bottom:none !important;
    padding:2px 0px;
    margin:2px 0px;
    display:block;
    transition:0.325s;
}
.navItem a:hover {
    color:#A00 !important;
    text-transform:uppercase;
    border:10px solid #800;
}

The result being :
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Widget Hover over Text

Post by Tobii on February 28th 2014, 9:39 pm

+1 Thanks.
Thank you for solving my question Ange! I'm bookmarking this, so I remember.

- Tobii
avatar
Tobii
Forumember

Male Posts : 332
Reputation : 3
Language : English, Mandarin, French

http://naruto-thepath.boardonly.com/

Back to top Go down

Solved Re: Widget Hover over Text

Post by Ange Tuteur on February 28th 2014, 9:50 pm

You're welcome I love you

Topic solved and archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum