The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Widget Hover over Text

View previous topic View next topic 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.

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 :

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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