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 »

Replacing Category Menu with your own.

Old Oct 26, 2010, 06:58 PM
17 posts · Oct 2010
Hi all!

First of all, I want to say that I started building my site probably week, maybe 2 ago as a completly noob. I didn't know anything about html or css, didn't know what wordpress is, how to get domain and get your site hosted... well I didn't know anything at all.

And I still don't know. Even though I have managed to make a simple site which will do, I think it could use something more special. soo... I decided that I want custom menubar in place where the Category menu is right now.

But I have 2 problems (first is related to theme, second is not so much):

Problem 1) What should I do to replace Category menu with mine? With help of web, i did this:

To make it I used -

HTML Code:

<title>Z-FielDZ' menubar</title>
<link rel="stylesheet" href="style.css" type="text/css" />

<div id="globalheader">
<ul id="globalnav">
	<li id="gn-dz"><a href="http://zfieldz.com">Store</a></li>
	<li id="gn-moviez"><a href="http://zfieldz.com/category/moviez/">MovieZ</a></li>
	<li id="gn-playstation"><a href="http://zfieldz.com/category/gamez-2/playstation3/">PlayStation 3</a></li>
	<li id="gn-xbox"><a href="http://zfieldz.com/category/gamez-2/xbox360/">xBoX 360</a></li>
	<li id="gn-forumz"><a href="http://zfieldz.com/forum/">ForumZ</a></li>


#globalheader { width: 952px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 190px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }

#globalheader #globalnav li#gn-dz a { background-position: 0 0; }
#globalheader #globalnav li#gn-moviez a { background-position: -191px 0; }
#globalheader #globalnav li#gn-playstation a { background-position: -382px 0; }
#globalheader #globalnav li#gn-xbox a { background-position: -572px 0; }
#globalheader #globalnav li#gn-forumz a { background-position: -762px 0; }

#globalheader #globalnav li#gn-dz a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-moviez a:hover { background-position: -191px -38px; }
#globalheader #globalnav li#gn-playstation a:hover { background-position: -382px -38px; }
#globalheader #globalnav li#gn-xbox a:hover { background-position: -572px -38px; }
#globalheader #globalnav li#gn-forumz a:hover { background-position: -762px -38px; }

#globalheader #globalnav li#gn-dz a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-moviez a:active { background-position: -191px -76px; }
#globalheader #globalnav li#gn-playstation a:active { background-position: -382px -76px; }
#globalheader #globalnav li#gn-xbox a:active { background-position: -572px -76px; }
#globalheader #globalnav li#gn-forumz a:active { background-position: -762px -76px; }

#globalheader.dz #globalnav li#gn-dz a:hover { background-position: 0 0; cursor: default; }
#globalheader.moviez #globalnav li#gn-moviez a { background-position: -191px -114px !important; }
#globalheader.playstation #globalnav li#gn-playstation a { background-position: -382px -114px !important; }
#globalheader.xbox #globalnav li#gn-xbox a { background-position: -572px -114px !important; }
#globalheader.forumz #globalnav li#gn-forumz a { background-position: -762px -114px !important; }
Should I add css to style.css and html somewhere into bfa_new_wp3_menus.php?
Also, right now it's Category Menu, but as we know, Forum isn't category, but I added it too in hope it can be done somehow.

In the attachment I have included .zip file with image, html and css files inside so you could easily launch it and get better idea how it looks.
Also I have included Photoshop file of the image, so if someone wants to use similar bar on their site you can take it and easily change names of tabs in photoshop file.

Problem 2) Actually I want my menubar to look like this:

In the code pasted above, all tabs are declared as 190px each. So if I want to make some tabs with different width, I need to change the code, but since as I said, I'm total noob in it and just adding more lines with idea "button a is xxx", "button b is yyy" didn't work, I don't know what to do.

In first version it is:
{ background-position: 0 0; }
{ background-position: -191px 0; }
{ background-position: -382px 0; }
{ background-position: -572px 0; }
{ background-position: -762px 0; }

In final version it should be:
{ background-position: 0 0; }
{ background-position: -101px 0; }
{ background-position: -301px 0; }
{ background-position: -500px 0; }
{ background-position: -700px 0; }
{ background-position: -952px 0; }

So the buttons should be: 101px, 199px, 200px, 200px, 100px, 152px (last one is not clickable)
(don't ask me why some buttons miss or have extra pixel... I suck at photoshop too :D )

Since the second problem isn't so related to theme itself, I'm not really asking anyone to help with it, only if some good person has extra time :D

And here is my site that I have built in 1 week. www.zfieldz.com

Thank you in advance,

Last edited by vintario; Dec 3, 2010 at 04:58 AM.
Old Oct 26, 2010, 07:32 PM
17 posts · Oct 2010
Thanks, after I started using Atahualpa theme, I forgot that I can configure something from wordpress own menus too :D

But still it will only allow me to have those links that I want (not only categories), but how will I make the menubar look like in the picture above? + it should have 4 states (1. in normal state , 2. when rolled over button, 3. when clicked, 4. when being on that page [haven't figured out how to make the last one yet]).
I have html and css to do it, and if you download the zip file and run the html inside you will see it working nicely, but I don't know how to implement it into my website.
Old Oct 28, 2010, 10:14 AM
17 posts · Oct 2010
It didn't really help.

But that's only because I'm not smart enough in css and html :D like I said i only started week ago.
I was just hoping that changing menu bar won't be so hard, since I already have css file with alot of writing in it, I thought I will only need to add it somewhere in the style.css file.
But it seems it's not so easy, so I will have to cope with the one I have now.

Still thanks for your help.
Old Oct 28, 2010, 03:14 PM
21 posts · Oct 2010

just read through a bunch of posts and cant figure it out out how to change the two menus. I have created two custom menus with wordpress. Now I want to exchange the page and the category menu with my custom ones.

So when I am in the menu settings it says under theme locations:
The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.
What do I have to do now? I cannot change my custom menu into menu2 or menu1. I am using atahualpa 3.49, have also installed 3.51 though. Both not working.

Thanks a lot
Old Nov 20, 2010, 04:53 AM
17 posts · Oct 2010
Maybe someone else got any more ideas?

Or I have another idea, I will get rid of header image and category menu totally, and then will add my custom menubar above the loop (I hope it's the right place, I want it to be between posts slider and posts. see my site http://zfieldz.com). I will just make the menubar shorter so it won't get into sidebar.

But still I think I will need some help with where to write the html and css to make it work.

Speaking of html, I wanted to add a button into post, but I wasn't even able to do that. I have a code:
HTML Code:
    <style type="text/css">
a.button:link, a.button:visited{
 display: block;
 width: 132px;
 height: 32px;
 text-decoration: none;
 background-image: url(images/button1.png);

 background-image: url(images/button2.png);

 background-image: url(images/button3.png);

<a class="button" href="#"></a>
When adding it into the post, the post will strip some of the tags, and even though at last I was able to get the button to show right (with all three states), but it creates 7-8 empty lines before and after the button and I can't get rid of them because I couldn't find anything in the button or posts html that could explain the empty lines. So if someone could explain why this happens I will be grateful.

It's not a right topic for a button but i didn't want to create another thread just for that so I hope I will be forgiven.

Thank you in advance,


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[How To] Replacing the Atahualpa header image with a 'sliding door' image menu jack96161 Header 57 May 17, 2012 08:41 AM
Changing category order in category menu bar, not in sidebar cat. list paulae Page & Category Menu Bars 13 Mar 30, 2011 06:36 PM
How do I highlight active category on a combined page & category menu bar? samij0 Page & Category Menu Bars 0 Mar 11, 2010 02:37 PM
[SOLVED] Category / Archive display problem with category menu bar madfab685 Page & Category Menu Bars 4 Jan 2, 2010 05:12 AM
Replacing Category title with own image mcbanks Sidebars & Widgets 2 Aug 13, 2009 03:07 PM

All times are GMT -6. The time now is 03:47 PM.

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