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 » FAQ - Atahualpa » Menus »

Juggledad's colored menu cheat sheet


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

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #26  
Old Nov 16, 2010, 05:32 AM
juggledad's Avatar
juggledad
 
22,263 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
take a look now, is that what you wanted - the current page menu item to be hi-lighted? See the CSS for the change, I used 'li.current-page-item a'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Nov 16, 2010 at 07:16 AM.
  #27  
Old Nov 16, 2010, 07:11 AM
aclime
 
31 posts · Oct 2010
Yes, works now. Finally, my menu looks like it should be Thanks.
  #28  
Old Mar 3, 2011, 02:00 PM
geneise
 
16 posts · Sep 2010
Since I used Juggledad's cheat sheet (which is great...thanks!), I thought I would post this question here, rather than start a new topic.

First off, here is the CSS from the CSS Inserts (Atahualpa 3.6.4):

Code:
/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
 	height:33px; 
	margin-top:0px; 
	background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');
	border:1px solid #D5C6A6;
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	height:33px;
	background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');

}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
	border-left:1px dotted #000000;
	background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');
        color: #000000 !important;
        height: 33px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
}
Take a peek at the menu bar and see how it's misbehaving:

http://liveinoakpark.com/

The flat tan color comes in on hover for parent menu items, but not regular links. Ideally, I'd like a second image BG for hover, but I tried that and couldn't get it to work.

The flat tan background color is 8 pixels "taller" than it should be: I have had to make "%bar2" taller than it should be to hide the tan BG...but it only effects the links that are not "parents".

"%bar1" (above the menu bar) is likewise getting cut off by the "parent" links.

Lastly, the "child" menu items are 8 pixels below the menu bar.

I'm certain I'm missing something quite elementary and that my brain is just addled...but I just cannot find the problem. Any guidance is greatly appreciated.
  #29  
Old Mar 9, 2011, 01:56 PM
geneise
 
16 posts · Sep 2010
Well, I was able to get this sorted out on my own...

Code:
/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
 	height:33px; 
	background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');
	background-repeat:repeat-x;
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	height:33px;
	margin-left:20px;
	border-color:transparent !important;
	background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');
	background-repeat:repeat-x;
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
#menu1 ul.rMenu li a:link, 
#menu1 ul.rMenu li a:visited,
#menu1 ul.rMenu li a:hover,
#menu1 ul.rMenu li a:active,
#menu1 ul.rMenu li {
	border-top:transparent;
	border-bottom:transparent;
	border-left:dotted 1px;
	border-right:transparent;
	background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');
	background-repeat:repeat-x;
        color: #000000 !important;
        height: 33px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:5px;
	padding-left:0px;
}
  #30  
Old Aug 10, 2011, 06:04 AM
vincent
 
64 posts · Nov 2010
I need to use images for background of each tab, and darker image for active parent, but I'm struggling with both the active tab (doesn't change) and the dropdown submenu items are using the background image as well which I don't want - only for main tab.

here where I'm at right now:
Code:
ul.rMenu li {
	background: url('<?php bloginfo('template_directory'); ?>/images/menubackground.gif') no-repeat;
}
ul.rMenu li.current-page-item a:link {
	background: url('<?php bloginfo('template_directory'); ?>/images/menuactive.gif') no-repeat;
using ATA 353 on this site in case it makes a difference
I'm missing something obvious aren't I :-(
Appreciate any help.

- Vincent

Last edited by vincent; Aug 10, 2011 at 06:42 AM.
  #31  
Old Oct 23, 2012, 12:46 AM
billc108
 
22 posts · Jun 2009
Hi,

I'm trying to do something a bit more tricky than the standard menus. I need to separate out the behavior of the parent page menu items from the behavior of the children. Specifically, the font size, padding, borders, hovers, visited links, and background colors of the child menu items all need to be drastically different than the parents. (see http://windcoalition.org for the current site, built using a non-WordPress CMS. ) Thankfully I don't have to mimic the way they have some of the menu items in smaller font than others. I can just tweak the padding/margins/borders to fill the horizontal space.

I've got the gradients working on the development site, but those are currently being applied to the children as well as the parents.

I've gotten most of the child menu stuff working now, thanks to some hints I pulled from this post: http://forum.bytesforall.com/showthr...ght=child+menu

The last thing I need to figure out is how to put a border beneath JUST the last element in a submenu.

I'd appreciate any pointers on that!

Thanks!
  #32  
Old Oct 24, 2012, 06:15 AM
juggledad's Avatar
juggledad
 
22,263 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
each menu item as a unique class - I would target the class with your CSS
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Oct 24, 2012 at 06:25 AM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
WP link is colored blue in editor - turns red when published BFAWerx Forum How-To 1 May 2, 2010 05:27 AM
how to change size of page menu bar - via style sheet? mamboe29 Page & Category Menu Bars 10 Apr 20, 2010 01:36 PM
Style sheet judykelly New Versions, & Updating 5 Jul 25, 2009 02:10 PM
[SOLVED] Juggledad, could you please follow up on this? cosmiclove Forum How-To 2 Jul 8, 2009 06:15 AM
juggledad is a moderator! Flynn Atahualpa 3 Wordpress theme 0 May 30, 2009 07:41 PM


All times are GMT -6. The time now is 06:39 AM.


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