Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

How to put lines just on right an left side of active Menu Items


  #1  
Old Feb 23, 2009, 01:15 PM
amber
 
13 posts · Feb 2009
Here's what the page menu buttons look on my site:
http://synchronicitysandbox.com/
there's a 1px line just on the right and left side of the active button.
Here's how to do it in Atahualpa:
In the style.css find this:

/* "current" page and hover */
ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li a:hover

and add this:

{
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
/* more ... */
border-bottom:1px solid #fff;
border-top:1px solid #fff;
font-weight:bold;
padding: 4px 5px;
}

What you've done is added a 1px border to your button, and that's a problem
because when someone scrolls over the buttons, they'll jump around. So,
if you don't like that, you've got to add borders to a few other areas.

so add this:
border:1px solid #FFFFFF;

to these sections, like this:

ul.rMenu li a
{
padding: 4px 5px;
border:1px solid #FFFFFF;
}

/* added for dark menu*/
ul#rmenu li a
{
padding: 4px 5px;
border:1px solid #FFFFFF;
}

ul.rMenu li a:link, ul.rMenu li a:hover, ul.rMenu li a:visited, ul.rMenu li a:active
{
text-decoration: none;
/* more ... */
margin:0;
padding: 4px 5px;
border:1px solid #FFFFFF;
}

/*added*/
ul#rmenu li a:link, ul#rmenu li a:hover, ul#rmenu li a:visited, ul#rmenu li a:active
{
text-decoration: none;
/* more ... */
margin:0;
padding: 4px 5px;
border:1px solid #FFFFFF;
}

/*
ul.rMenu li.sfhover a:active,
ul.rMenu li:hover a:active
{
color: #fff;
background-color: #c00;
border:1px solid #FFFFFF;
}
*/

Then go into your wp Atahualpa editor, and change the colors around of
your hover and active menu items under 'page menu bars', so that they'll
be white (#FFFFFF).

Hope it works for you, too.
  #2  
Old Feb 23, 2009, 03:22 PM
amber
 
13 posts · Feb 2009
Note:
The height of the lines seemed a bit much, so I decreased the height, and
increased the padding to the right and left, this way:

padding: 2px 8px;

instead of:

padding: 4px 5px;

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
Font size in page menu (left side integrated as widget) Tigger Page & Category Menu Bars 8 Aug 27, 2009 08:49 PM
[SOLVED] How to put color on the right and left side of the menu bar? (the whole colo nasu Page & Category Menu Bars 9 Jun 5, 2009 06:00 PM
I removed the left side bar from my home page, and now want put it back, but can't... nasu Sidebars & Widgets 2 May 24, 2009 04:08 PM
Moved side bars to right side, now have dotted lines around areas tomlucas Sidebars & Widgets 1 Apr 16, 2009 06:24 PM
2 page menu bars (left and right side) possible ? Tigger Page & Category Menu Bars 2 Feb 8, 2009 03:50 PM


All times are GMT -6. The time now is 05:02 PM.


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