Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Image background for menu bar AND different background for current page menu button (http://forum.bytesforall.com/showthread.php?t=14441)

kippiper Jun 1, 2011 12:48 PM

Image background for menu bar AND different background for current page menu button
 
Hi guys!

I am having a tough time wrapping my brain around Juggledad's code for a menu background.

I want the first image (menu-bg.jpg) to be the background image for the menu bar and for the pages not open.

Then I want the second image (menu-bg-off.jpg) to be the background image for the menu button of the page currently on.

Make sense?

Here's my code. What am I missing?

Thanks in advance for your help!

KIP

HTML Code:

/* ================================================ */
/* Page menu background                            */
/* ================================================ */
div#menu1 {
        height: 40px; 
        margin-top:0px;
        background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
}
/* ================================================ */
/* Page Menu item's background and border          */
/* ================================================ */
div#menu1 ul.rMenu {
        background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
        border: none 0px;
}
/* ================================================ */
/* 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 {
        background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
}


kippiper Jun 1, 2011 01:15 PM

Oh and I would like the hover to change to the second image when hovering over the menu button.

Thanks!

KIP

juggledad Jun 1, 2011 02:20 PM

well for one thing this
HTML Code:

background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
is not a valid address. If you include http:// then you need the rest
of the address, like
HTML Code:

background:url(http://MYDOMAIN.COM/wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
you can try
HTML Code:

background:url(/wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
second, if you want to address the current menu item, you have to look at the classes. what ever page is active will have the class 'current_page_item' so you can use
HTML Code:

li.current_page_item {........}
you might want to qualify it more or add the !important attribute to it.

kippiper Jun 1, 2011 02:46 PM

Oh my! Silly me on the URL! Thanks for catching that.

As for the class thing, I'm unclear on how to configure this. I tried it in the code (shown below). I get the background image but don't get the hover/active image.

I admit it! I'm lost!

Thanks!!!

KIP

HTML Code:

/* ================================================ */
/* Page Menu item                                  */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li.current_page_item a:hover,
ul.rMenu li.current_page_item a:active,
ul.rMenu li {
        background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
}


kippiper Jun 1, 2011 02:47 PM

Oh and the URL I am working with is:

http://dev.phoenixtechnicalgroup.com

juggledad Jun 1, 2011 03:41 PM

have you tried looking at using FireBug in Firefox? That way you can see the CSS for the objects.

juggledad Jun 1, 2011 03:48 PM

p.s. if you are using 3.6.7 make sure you apply the three BUGFIX's

kippiper Jun 2, 2011 03:58 PM

Hi there!

Okay, I applied all of the bug fixes.

Second, this is how I changed the code:

HTML Code:

/* ================================================ */
/* Page Menu item                                  */
/* ================================================ */
ul.rMenu li.current_page_item {menu-item-19
        background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
        float: left;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 7px;
        padding-bottom: 0px;

}


And when you go to http://dev.phoenixtechnicalgroup.com, you will now see that all of the words have a solid black background. And nowhere does the alternate background image appear.

I admit I have very little CSS and PHP experience, so that's where your help is so good!

What should I try next?

Thanks!!!

KIP

aQuickStudy Jun 2, 2011 04:13 PM

To start with, get rid of "menu-item-19" within your parentheses. Then what happens? (I don't have time to test it myself, sorry, but that's a step in the right direction.)

juggledad Jun 2, 2011 04:26 PM

ul.rMenu li.current_page_item {menu-item-19 is incorrect.

A css statement is made of two parts, the selector and the rules.
The rules are enclosed by {}
Each rule ends with a semicolon (';')
so you have a rule
HTML Code:

menu-item-19 background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
since there is no property 'menu-item-19', the rest of the text up to the semicolon is ignored.

The menu CSS is the most complex in the styling, there are over 400 lines of CSS dealing with the menus. It is based on the Ruthsarian's rMenu http://webhost.bridgew.edu/etribou/layouts/

If you have very little CSS experience, I suggest going thru the tutorials at w3schools.com/css to gain a better understanding...or maybe hire some one to help you out.

kippiper Jun 2, 2011 04:30 PM

Whew! Perhaps more than I want to take on at this time. I set that for a future task to learn.

Thanks for your help!

guiliannkamga Jan 11, 2013 08:45 AM

Hi everyone,

how can get a different Background for each menu or category in Atahualpa?

Thanks for your help!


All times are GMT -6. The time now is 12:22 PM.

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