Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Page menu bar with buttons


  #1  
Old Jan 14, 2010, 03:49 PM
Burn
 
32 posts · Nov 2009
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!
  #2  
Old Jan 15, 2010, 04:52 AM
Burn
 
32 posts · Nov 2009
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!
  #3  
Old Jan 15, 2010, 05:12 AM
juggledad's Avatar
juggledad
 
23,728 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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";	
to
HTML Code:
		 '</a></li>' . "\n";	
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Jan 15, 2010, 05:50 AM
Burn
 
32 posts · Nov 2009
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
  #5  
Old Jan 15, 2010, 01:38 PM
juggledad's Avatar
juggledad
 
23,728 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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';
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jan 18, 2010, 11:58 AM
Burn
 
32 posts · Nov 2009
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?

Last edited by Burn; Jan 18, 2010 at 12:06 PM.
  #7  
Old Jan 30, 2010, 01:40 PM
juggledad's Avatar
juggledad
 
23,728 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
add this to CSS Inserts
HTML Code:
li.page_item a {color: transparent !important;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jan 30, 2010, 05:13 PM
Burn
 
32 posts · Nov 2009
Cheers!! (did you receive my donation?)
  #9  
Old Feb 3, 2010, 02:00 AM
Wolforg's Avatar
Wolforg
 
32 posts · Jan 2009
France, Languedoc-Roussillon, Lozčre
Send a message via MSN to Wolforg Send a message via Skype™ to Wolforg
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
Attached Thumbnails
Click image for larger version

Name:	menu.png
Views:	669
Size:	39.8 KB
ID:	382  
  #10  
Old Feb 3, 2010, 02:10 AM
Burn
 
32 posts · Nov 2009
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!
  #11  
Old Feb 3, 2010, 02:22 AM
Wolforg's Avatar
Wolforg
 
32 posts · Jan 2009
France, Languedoc-Roussillon, Lozčre
Send a message via MSN to Wolforg Send a message via Skype™ to Wolforg
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
  #12  
Old Feb 9, 2010, 05:43 PM
Burn
 
32 posts · Nov 2009
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
  #13  
Old May 14, 2010, 07:08 PM
Burn
 
32 posts · Nov 2009
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

Last edited by juggledad; May 15, 2010 at 03:37 PM.
  #14  
Old May 15, 2010, 03:38 PM
juggledad's Avatar
juggledad
 
23,728 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old May 16, 2010, 01:27 PM
Burn
 
32 posts · Nov 2009
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...
  #16  
Old May 17, 2010, 02:10 PM
juggledad's Avatar
juggledad
 
23,728 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what do you mean by 'only not for the 'home' page... '?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old May 17, 2010, 05:58 PM
Burn
 
32 posts · Nov 2009
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
  #18  
Old May 23, 2010, 03:55 PM
juggledad's Avatar
juggledad
 
23,728 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Creating buttons for the page menu Nourdmrolnmt1 Page & Category Menu Bars 5 Feb 2, 2012 01:03 PM
Page menu bar buttons the same flexible width like fluid layout Tigger Page & Category Menu Bars 6 May 14, 2011 12:58 PM
Another page menue bar with expanding and collapsing buttons Tigger Page & Category Menu Bars 4 Nov 6, 2009 07:17 AM
Custom page menu bar buttons Wimbledon Page & Category Menu Bars 2 Oct 7, 2009 12:45 PM
Page Menu Buttons DATAPOPP Forum How-To 1 Aug 27, 2009 11:38 AM


All times are GMT -6. The time now is 10:43 PM.


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