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 » Header configuration & styling »

[SOLVED] how to style menus...


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 Nov 21, 2010, 07:14 PM
derekwbeck
 
151 posts · Nov 2010
How do I make the menus entirely transparent (so we just see the background image), with the border top and bottom of 1px and blue?

Thanks,
Derek

http://www.1775thebook.com
  #2  
Old Nov 21, 2010, 11:34 PM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
This worked for me but you might also want to delete or comment the menu CSS in ATO>Add HTML/CSS Inserts>CSS Inserts

HTML Code:
.menu-item {
background:transparent !important;
border-top:1px solid blue;
border-bottom:1px solid #110065;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Nov 22, 2010, 01:18 AM
derekwbeck
 
151 posts · Nov 2010
Thanks for the reply. I should've stated: I only want it transparent when it is either a) not on the page or b) not hovered over. Otherwise, I want the hover color and the color selected when it is on that page. How do I do this?
  #4  
Old Nov 22, 2010, 01:27 AM
derekwbeck
 
151 posts · Nov 2010
Also, since I've been tweaking this code, I've now lost something: when you hover over them as is, the hover color is #CCCCCC, which is the "parent" color as set in ATO>Menu 1. It used to be, and I expected it to be, #880000, the color I have set in ATO>Menu 1 for hover. Any ideas on this?

(I added juggledad's cheatsheet, and since then, this has cropped up. His menus cheat sheet CSS: http://forum.bytesforall.com/showthr...us+transparent )
  #5  
Old Nov 22, 2010, 04:32 AM
juggledad's Avatar
juggledad
 
22,316 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
the cheat sheet is just a guide so you can see which CSS effects which area of the menus. You should remove it once you understand the area of the CSS to change.
__________________
"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 24, 2010, 12:20 AM
derekwbeck
 
151 posts · Nov 2010
Okay, I nearly have it the way I want.

I've got the menu generally transparent with the first bit of code here, as given above, but color the other links accordingly, and do not call for any transparency anywhere else in the CSS, except as noted below.

Code:
div#menu1 ul.rMenu {
	background: transparent !important;
	border-bottom: 1px solid #000066;
}
.menu-item {
	background: transparent !important;
	/*border-bottom: 2px solid #000066;*/
}
/* ================================================ */
/* Page Menu item features                          */
/* ================================================ */
ul.rMenu li,
ul.rMenu li a:link, 
ul.rMenu li a:visited {
	color: #000066 !important;  /*text color*/
}
ul.rMenu li a:hover, 
ul.rMenu li a:active {
	background: #880000 !important;
	color: #ffffff !important;  /*text color*/
}
This is almost where I'd like it. My chief question at the moment:

How do I change the color of the tab for the page you are presently on? It does not seem to be effected by any of

ul.rMenu li,
ul.rMenu li a:link,
ul.rMenu li a:visited, ul.rMenu li a:hover,
ul.rMenu li a:active

except where changes to those effect all of the buttons.

I think the elements I want to change are these, but I got no results when I tried them:

Code:
ul.rMenu li.current-menu-item, ul.rMenu li.current_page_item, ul.rMenu li.current-page-item {
	background: #000000 !important;
	color: #ffffff !important;  /*text color*/
}
Any ideas?
  #7  
Old Nov 24, 2010, 04:56 AM
juggledad's Avatar
juggledad
 
22,316 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
the reason it won't take is that there is a background set in the CSS for the links (the <a>) in the code for the pseudo classes. you need to use
HTML Code:
div#menu1 ul.rMenu li.current-menu-item a:link, 
div#menu1 ul.rMenu li.current-menu-item a:active, 
div#menu1 ul.rMenu li.current-menu-item a:hover, 
div#menu1 ul.rMenu li.current-menu-item a:visited, 
div#menu1 ul.rMenu li.current_page_item a:link, 
div#menu1 ul.rMenu li.current_page_item a:active, 
div#menu1 ul.rMenu li.current_page_item a:hover, 
div#menu1 ul.rMenu li.current_page_item a:visited {
background-color:#000000;
color:#ffffff;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Nov 25, 2010, 02:04 AM
derekwbeck
 
151 posts · Nov 2010
That worked perfectly, except I had to declare the two items were important. That is, I duplicated your code, but made the two CSS styles as:

Code:
	background-color: #336699 !important;
	color: #ffffff !important;
Almost got my menus like I want 'em.

Last question:

How do I limit the

Code:
div#menu1 ul.rMenu {
	background: transparent !important;
	border-bottom: 1px solid #cccccc;
}
such that the border bottom is only as wide as the main body (not counting the right sidebar)? Or, of a determined size in general?
  #9  
Old Nov 25, 2010, 07:29 AM
juggledad's Avatar
juggledad
 
22,316 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you can't without messing with the theme code. The menu is part of the header and the header is a row of a table that spans the width of the table that has 1 - 5 (depending on the number of sidebar) columns. You would have to rewrite a bunch of code,

you could play with adding a widget area to the header with two cells and add a page widget to it and formatting that.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Nov 25, 2010, 01:48 PM
derekwbeck
 
151 posts · Nov 2010
how about this: is it possible to turn off the menu at the top (which I know how to do) and then place it above the loop? (which I don't know how to do)
  #11  
Old Nov 25, 2010, 01:48 PM
derekwbeck
 
151 posts · Nov 2010
PS: Happy Thanksgiving!
  #12  
Old Nov 25, 2010, 08:04 PM
juggledad's Avatar
juggledad
 
22,316 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
not without digging into the code
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Nov 26, 2010, 11:22 PM
derekwbeck
 
151 posts · Nov 2010
oh well, thanks for your help!

Bookmarks

Tags
menus, styling

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How do I get rounded corners, the original theme style, another theme style? lmilesw Header 0 Oct 25, 2010 01:32 PM
How do I get rounded corners, the original theme style, another theme style? lmilesw Styling 0 Oct 25, 2010 01:32 PM
CSS style dropdown/flyout menus for sub-categories? phdm32009 Sidebars & Widgets 1 Aug 21, 2009 06:04 AM
CSS style dropdown/flyout menus for sub-categories? BigG Sidebars & Widgets 1 Apr 8, 2009 06:24 PM


All times are GMT -6. The time now is 11:48 AM.


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