Replacing Category Menu with your own.

vintario · #1 Oct 26, 2010, 05:58 PM

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 -
picture:

html:

HTML Code:

<html>

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

<body>
<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>

</ul>
</div><!--/globalheader-->

</body>
</html>

css:

Code:

/* GLOBALHEADER */
#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; }

/* BUTTONS */
#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; }


/* OVER STATES */
#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; }


* PRESSED STATES */
#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; }


/* ON STATES */
#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,
A.L.

vintario · #2 Oct 26, 2010, 06:32 PM

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.

vintario · #3 Oct 28, 2010, 09:14 AM

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.

GreenCoast · #4 Oct 28, 2010, 02:14 PM

Hey,

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:

Quote:

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

vintario · #5 Nov 20, 2010, 03:53 AM

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:

<html>
    <head>
    <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);
 }

a.button:hover{
 background-image: url(images/button2.png);
 }

a.button:active{
 background-image: url(images/button3.png);
 }
    -->
    </style>
    </head>

    <body>
<a class="button" href="#"></a>
    </body>
</html>

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,
A.L.