Replacing Category Menu with your own menu in Atahualpa theme.

  • Hi all!

    First of all, I want to say that I started building my site 2-3 weeks 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:
    Menu

    To make it I used –
    picture:
    image

    html:

    <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="https://zfieldz.com">Store</a></li>
	<li id="gn-moviez"><a href="https://zfieldz.com/category/moviez/">MovieZ</a></li>
	<li id="gn-playstation"><a href="https://zfieldz.com/category/gamez-2/playstation3/">PlayStation 3</a></li>
	<li id="gn-xbox"><a href="https://zfieldz.com/category/gamez-2/xbox360/">xBoX 360</a></li>
	<li id="gn-forumz"><a href="https://zfieldz.com/forum/">ForumZ</a></li>

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

</body>
</html>

    css:

    /* 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(https://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.

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

    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 ?? )

    Here’s the rar file with image, html and css files inside so you could easily launch it and get better idea how cool it looks like.
    MenuBar

    And here is my site that I have built in 2 weeks. https://www.zfieldz.com

    Thank you in advance,
    A.L.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Replacing Category Menu with your own menu in Atahualpa theme.’ is closed to new replies.