Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Underline upon hover


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Oct 31, 2009, 09:53 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
I would like to know how to style the Atahualpa page menu bar so that it functions exactly like the one on this Atahualpa site:

http://www.martinewicki.ch/

How do I do implement that bold + underline? Can this be done with a simple CSS insert?

Thank you.
  #2  
Old Nov 5, 2009, 05:06 PM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
This can be done with a CSS Insert, no PHP etc. needed
  #3  
Old Nov 7, 2009, 11:37 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Does anyone know how such a CSS insert would be coded? Thank you.
  #4  
Old Nov 7, 2009, 12:00 PM
paulae's Avatar
paulae
 
1,332 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
Put this in CSS inserts:
Code:
.div#menu1 ul.rMenu li a:link, div#menu1 ul.rMenu li a:hover,  div#menu1 ul.rMenu li a:active {
-x-system-font:none;
border-bottom:4px solid #307722;
border-left:1px solid #BFBBB9;
border-right:1px solid #BFBBB9;
border-style:solid;
}
The 307722 is a nice green. You could use any color code. Get Firebug and use it to find the class and CSS for a given element on a page. I may have stuff here that's not necessary, but I'm not very good at CSS, so I just copied what I saw and changed the color. Maybe somebody else can parse this out a bit better. I have it working on http://www.fastwomen.com/, a test site.

Last edited by paulae; Nov 7, 2009 at 12:19 PM.
  #5  
Old Nov 7, 2009, 12:27 PM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What this does is
border-bottom:4px solid #307722; <- set the bottom border 4px thick, solid and orange
border-left:1px solid #BFBBB9; <- set left border 1px, solid and same as backgrounnd color
border-right:1px solid #BFBBB9; <- set right border 1px, solid and same as backgrounnd color

In effect, it makes the left and right borders invisable since they are the same as the background and the bottom orange so it shows up.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Nov 7, 2009, 12:34 PM
paulae's Avatar
paulae
 
1,332 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
I somehow removed the bit that would show the underline before any action. I didn't want it to show a: visited. I'm not sure what the x-system font is, but I do know I need to study CSS more. I guess there are continually new kinds of CSS coming down the pike.
  #7  
Old Nov 16, 2009, 08:26 PM
writeleft's Avatar
writeleft
 
41 posts · Oct 2009
U.S.
I would think that since you specific "border-bottom" the "border-left" and "border-right" markers would be unnecessary, wouldn't they?

If i wanted the menu option to be marked with an underline when it is selected, what would I need to change in the insert?

Thank you for figuring this out.
  #8  
Old Nov 17, 2009, 05:21 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
When you are adding a CSS insert, remember the way CSS works. The last rule applies. In this case, since all three borders were assigned in a previous selector, if you only specify border-bottom, then the other two will still have their previous values. And since we are assigning two different colors, you can't use shorthand to override them all.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Jan 27, 2010, 09:08 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Thanks for everyone's input in this thread.

I have the menu working here:
http://tiny.cc/safeatahualpa

Yet when you hover over the menu, the entire page moves down as the underline appears. How can I change the CSS insert so the page does not move? I am guessing that you need to have the 4px bottom-border already defined, yet I have tried a variety of changes to the CSS insert and nothing seems to work.
  #10  
Old Jan 28, 2010, 04:45 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
try this
HTML Code:
#rmenu2 { height:30px;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jan 28, 2010, 01:30 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Thanks juggledad!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How To add Bold and Underline to Page and Category Menu Bar Hovers fromtheranks Page & Category Menu Bars 8 Aug 5, 2010 05:07 AM
[SOLVED] How to underline links on hover in widgets? Whitelisted Sidebars & Widgets 3 Oct 10, 2009 01:24 PM
Change header on hover? id2d Header configuration & styling 0 Sep 24, 2009 07:31 PM
[SOLVED] Link Hover in Sidebar shiroshears Page & Category Menu Bars 2 Aug 10, 2009 12:14 PM
Tag vs. Category hover links sonya Sidebars & Widgets 1 Jun 20, 2009 02:56 PM


All times are GMT -6. The time now is 07:32 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.