First off, I cannot believe how close I am getting to getting my website configured the way I had it before I switched to Wordpress. This is an AWESOME theme.

(For reference, my site is http://fredsmythe.com.)

However, I've got a tiny little thing going on...right now, I'm configuring the menu bar. So far I have added the following code to CSS Inserts to get the background image loaded and to have the inactive items have transparent backgrounds:

/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height: 33px;  
	background: url(/wp-content/themes/atahualpa/images/WPHeaderPages.png); 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
        height: 0px;
        background: #red;
	border: none 0px; 
}

div#menu1 ul.rMenu li{
background: transparent !important;
}

Here's what I would like to do:

1) Either remove that infernal border (I made it white and solid for testing) entirely or move the whole bar, border and all down 1 pixel so that it's back in line with the background image. (The latter is probably easier, and if we can do a 1 pixel move I am fine with changing the color to make the top and bottom transparent.

2) The height of the image is 33 pixels. I would like the bar to also be 33 pixels high in total, without having to change the height of the text, leaving the text center-left in the resulting cell.

Any ideas how I might do this? Thanks very much!

-- Chris

Try this in CSS Inserts and see if it is getting you where you want. You will probably also want to add a background image for the active and hover states.

div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active {
padding:8px 5px !important;
border:none;
}

Originally Posted by lmilesw

Try this in CSS Inserts and see if it is getting you where you want. You will probably also want to add a background image for the active and hover states.

div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active {
padding:8px 5px !important;
border:none;
}

Yeah, I figured I'd jump off of the background/hover state bridge when I got to it.

This is a lot closer, except it's still a pixel too high.

Would it just be an easier solution if I "moved" that pixel line to the Header image, and then when there was the one-pixel overrun, it would be right? I'd have to jigger some other settings, I am sure, but not many, and it *would* fix the issue.

EDIT: Answer: yes, it's much easier. Thanks very much for the help again! You've been very good to me today.

Now add the following to your menu CSS and you should be good to go.

div#menu1  {
margin-top:-1px;
}

I tinkered with the images, and I think I'm in really good shape where I am, actually.

My urge is to say "Now, how does this whole background-image-on-hover-etc thing work?", but you guys have already been incredibly nice and helpful and I do not want to burn through that goodwill so instead I think I will do a little research first and see if I can't dope it out for myself.

You don't know how much your desire to "do a little research first" is appreciated. Too many people want the answers but don't want to do any work which is really where you learn. Let us know when you get to some specific issues.

Originally Posted by lmilesw

You don't know how much your desire to "do a little research first" is appreciated. Too many people want the answers but don't want to do any work which is really where you learn. Let us know when you get to some specific issues.

Well, seriously, I would like to understand it, rather than have the answers spoon-fed to me. CSS kinda passed me by, and the last time I fought with it, several years ago, I had a bunch of help piecing it together, and came out of it understanding a little more, but not as much as I would like.

So, if you will humor me, I'd like to think out loud for a second and have someone check my work and see if I really do understand it. Plus I hope that documenting this might be helpful to someone else down the road, as searching the forums here was to me.

So first I want to go through my CSS inserts and explain what I think is doing what/

div#menu1 ul.rMenu {
        height: 0px;
        background: #red;
	border: none 0px; 
}

I got this from Juggledad's post here, and ended up tweaking it until it worked. I think this describes the menu bar itself, and that dropping the height to 0px ended up killing the colored bar so that my menu bar showed through.

div#menu1 ul.rMenu li {
background: transparent !important;
}

This is doing basically the same thing for single items in the menu. I am not sure I couldn't apply this to the block above in lieu of the height and background tags and accomplish the same thing.

div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active {
padding:8px 10px !important;
border:none;
}

This is the item Larry gave me. I think what this is doing is "stretching" the height of the menu bar (which is usually determined by the size of the text therein) to fit the size I wanted for my image. The "a:visited" and "a:active" means this style applies to both already-visited and to active (as in, being-clicked-on) links.

(At this point the highlight was still a pixel too high. and Larry did give me some code that he thought would fix it, but for my purposes it was just easier for me to tinker with the header and menu bar images (basically I stole the top two rows of pixels from the latter and slapped them at the bottom of the former) and now everything lines up right nice.)

So that brings us to hover images. From Juggledad's post above, again. we've not covered two types of link states: "a:link" (the general, untouched link), and "a:hover", the link with the mouse hovering over it.

So a little Paint.NET work this afternoon (hey, slow day at work ) got me a hover image, and I did this:

div#menu1 ul.rMenu li a:hover {
padding:8px 10px !important;
background: url(/wp-content/themes/atahualpa/images/Hover_Background_Blue.png) !important;
border:none;
}

...which is the same as the visited and active code, 'cept with the new (tiled) background in place. And hey, it works...when you hover a link on my menu bar, it now turns a lovely "lit-up" gradient of blue.

And here's where I ran into trouble: I thought "hey, the only one left is a:link, right?" Well, if I apply the same style to that, everything turns blue. And that makes sense since that's the style for general untouched links.

So what I THINK I need to know is what the style declaration is for "the currently selected page." And if I know that, I think I can apply the same style stuff I used in the Hover block to that, and it *should* light the current page up. I see something about "current_page_item" in the page source, but I'm not sure what to do with it.

Have I earned a nudge?

Actually, wait, I think I found it! From this post, I've changed the hover block to:

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,
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,
div#menu1 ul.rMenu li a:hover {
        padding:8px 10px !important;
        background: url(/wp-content/themes/atahualpa/images/Hover_Background_Blue.png) !important;
        border:none;
}

I was really close. What I'm unsure of is how many of those "current_page_item" calls are really necessary, and what the deal is with the last four (the ">" ones). But it seems to work and now I know how to treat the current item differently from the rest in case I want to light things up in different colors!

the use of '>' in CSS is a Child Selector which will not select all descendents, only direct children.