Wordpress Themes - WP Forum at BFA - Page menu bar with buttons

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - Page menu bar with buttons (http://forum.bytesforall.com/showthread.php?t=5312)

Page menu bar with buttons

Hi there!

I'm trying to get rid of the standard text for the page links and I'm sort of half way...
I succeeded to add my own images but I'm bumping into several issues:
- i cant get the "Home" button to appear...
- I cant remove the standard text yet
- I would like to get rid 100% of the hover standard fx and repalce it by a fx of my own (iif not too complicated).

I know there are some threads about the various issues I encounter but I cant seem to find them...

Info:
WP 2.9.1
Atahualpa 3.4.5
temp url to see my issues in real time http://burn.phpnet.org/soundandbandservices2010

my CSS insert at the moment (it's late and I feel things are redundant)

Code:

/* START MENU */

div#menu1 {

background: url(http://burn.phpnet.org/soundandbandservices2010/wp-content/themes/atahualpa/images/menu-bg.jpg) no-repeat center;

border: none;

}



div#menu1 ul.rMenu li {

background-color: transparent important!;

padding: 5px;

margin: 0px 1px;

border: 0px;

width: 140px;

}



div#menu1 ul.rMenu li a:link,div#menu1 ul.rMenu li a:hover,div#menu1 ul.rMenu li a:visited,div#menu1 ul.rMenu li a:active {

background-color: transparent important!;

background: transparent important!;

text-decoration:none;

margin:0;

padding:2px 5px;

}





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 {

background-color: none !important;

background-color: transparent !important;

} 





li.page-item-2 {

background: url(http://burn.phpnet.org/soundandbandservices2010/wp-content/themes/atahualpa/images/button-about.png) no-repeat scroll center center;

}



li.page-item-17 {

background: url(http://burn.phpnet.org/soundandbandservices2010/wp-content/themes/atahualpa/images/button-contact.png) no-repeat scroll center center;

}



li.page-item-26 {

background: url(http://burn.phpnet.org/soundandbandservices2010/wp-content/themes/atahualpa/images/button-prod.png) no-repeat scroll center center;

}





/* END MENU STYLE */

Thanks a lot for your support!

Ok I solved the higlighted background by going into the database and repalce the default colors scheme by transparent.
I know it's not a good tweek but I find it such a pity that this fantastic theme is getting a burden when it comes to customizing the menus...

If someone can offer me a better solution, I will take it for sure :)

I also solved the standar text issue by putting the font size to 1px... I wish I could simply remove it
again a better solution is appreciated!

NOw only remains the "Home" button issue than doesnt pop up...
for each page I made this

Code:

li.page-item-xxx {

background: url(image) no-repeat scroll center center;

}

Where the xxx is the page id...
But how can I make this works for home? As far as I know there is no page id and if I leave it like this

Code:

li.page-item {

background: url(image) no-repeat scroll center center;

}

the home button doesnt show up...

Please help!

edit bfa_header_config.php and locate lines 27-30 (version 3.4.5) which should be

HTML Code:

                                $page_menu_bar .= ' current_page_item';

                        }

                } elseif ( is_home() ) { 

                        $page_menu_bar .= ' current_page_item';

and change them to

HTML Code:

                                $page_menu_bar .= ' current_page_item page_home';

                        }

                } elseif ( is_home() ) { 

                        $page_menu_bar .= ' current_page_item page_home';

This will now give you a class 'page_home' you can use in your CSS.

To get rid of the actual page names, you will need to change line 33 from

HTML Code:

$bfa_ata['home_page_menu_bar'] . '</a></li>' . "\n";

HTML Code:

'</a></li>' . "\n";

Thanks a lot for this answer!
I was hoping I wouldnt have to edit some php files.. but well... here we go!

After I did the modifications you advised, I get my Home button visible.. only when I'm on the "home" page.. I guess it comes from the "current_page_item" bit but I have no idea how to fix that :S

Sorry, I missed one spot edit bfa_header_config.php and locate lines 24 (version 3.4.5) which should be

HTML Code:

$page_menu_bar .= '<li class="page_item';

and change it to

HTML Code:

$page_menu_bar .= '<li class="page_item page_home';

This is top support juggledad!!
thanks to this I could set the beta version online :)

Just realised that my default text of the pages menu bar are back :(
I wonder if it's plugin wise or not... any way I could get rid of those by editing a php file?

add this to CSS Inserts

HTML Code:

li.page_item a {color: transparent !important;}

Cheers!! (did you receive my donation?)

Hello all,
I had the same problem than Burn and I've founded another solution than I want to share here :)
I've added a new widget area in header area (but you can add it in center column if you want) and I've made my menu with images in a widget text in this area, here's a example code to do this :
<a href="/link1><img src="/url/of/the/button/button1.png></a>
<a href="/link2><img src="/url/of/the/button/button2.png></a>
<a href="/link3><img src="/url/of/the/button/button3.png></a>
etc...
You can see the result in the attachment ;)

This is not a bad idea at all :)
Only 'problem' is that you will need to edit your widget each time you had a page/category, and your fix needs a bit more coding if you have submenu link in drop-downs... But without submenu, it's a great idea!

Yes, this solution have some limitations (no sub-pages, etc...) but the good thing is that you not need to edit bfa_header_config.php and you can upgrading atahualpa with no problem ;)

very true!! I might switch to your solution after all... But I dont have time to work on the layout of the site now... and it's working aswell at the moment ;)

About this,

I'm working on something new which NEEDS to have the current_page in the same style than hovering style.

At the moment my CSS insert is

Code:

li.page-item-xx {

background: url(/wp-content/themes/atahualpa/images/button-xx.png) no-repeat scroll center center;

}

li:hover.page-item-xx {

background: url(/wp-content/themes/atahualpa/images/button-xx-hover.png) no-repeat scroll center center;

}

I thought I would simply need to add "li.page-item-xx current_page" after "li:hover.page-item-xx"
but that doesnt do the trick.. as anyone some tip to solve that problem? :)
Cheers

try

HTML Code:

li:hover.page-item-xx,

li.page-item-xx.current_page {

background: url(/wp-content/themes/atahualpa/images/button-xx-hover.png) no-repeat scroll center center;

}

Code:

li:hover.page-item-xx,

li.page-item-xx.current_page_ITEM {

background: url(/wp-content/themes/atahualpa/images/button-xx-hover.png) no-repeat scroll center center;

}

this did it... Thanks to leading me to the right class :)
only not for the 'home' page... I tried several things without success...

what do you mean by 'only not for the 'home' page... '?

I mean that using the same class and replacing "page-item-xx" by "page_home" doesnt work.
The home button changes style when hovering but not when current page...

the site is now online you can see it at www.psychonautrecords.com

you have a dash where you need an underscore
li:hover.page_home, li.page-home.current_page {
background: url(/wp-content/themes/atahualpa/images/button-home-hover.png) no-repeat scroll center center;
}