Custom Menubar

In ComicPress 2.8 or higher you can use the standard menubar or wherever you’d normally use said standard menubar, you can instead use a custom menubar instead. For the PHP programmers, custom-menubar.php is a godsend, it allows you to create code to your liking without messing up the original menubar.

The reason I choose to use the custom version is that you can very easily change the order of the links in the menubar this way. WordPress will allow you to alter the page order, but, you have to go through and change them in a convoluted fashion and that’s a headache. This way, you’re able to add links on the fly… when I wanted to add in a ‘Cast’ page all I had to do is choose where in the link order I wanted it to appear in my php file list and ‘blam’ it was there.

This article assumes you have a working install of ComicPress 2.8 or higher already up and running. In addition, if you want to change how somethings work you’ll need a basic understanding of CSS and how to manipulate it. Some manner of photo manipulation software is needed to make your own images as well. An ftp program will also be needed to upload your files when you’re done.

For the sake of brevity and amount of code spam I’ll only list the first two menu items.

So, let’s start with what you need to do.

custom-menubar.php

Create a file named custom-menubar.php. I use Adobe Dreamweaver, there are several other options for this and what you use to make it is up to your comfort level. Inside that file you will need to create your structure for your menu.

Here is my custom-menubar.php information:

<div id="zrmenubar">
	<div id="zrmenunav"></div>
		<ul id="zrmenu">
        <li class="page_item page-item-home current_page_item"><a href="http://www.zombieroomie.com" title="Home">home</a></li>
		<li class="page_item page-item-2"><a href="http://www.zombieroomie.com/about/" title="About">about</a></li>
	</ul>
	<div class="clear"></div>
</div>

What’s going on there?

We have a section that gives us the actual menubar, then the space for the menu items, and then finally inside of that the individual menu links are laid out. Each menu link requires it’s own line of code and html link. The title is for mouseover displays..

CSS

Now on to the CSS.

Within the Companion, you’ll need to tell things how to work. This is what I have set up for this site:

/* Begins Custom Menubar */
#zrmenubar { background: url('http://www.zombieroomie.com/images/site/menubar.png') no-repeat; }
#zrmenubar ul, #zrmenubar ul li { margin: 0; padding: 0; }
#zrmenu .page_item a, #zrmenu .page_item { display: inline-block; float: left; text-decoration: none; text-indent: -99999px; }
#zrmenu { padding: 0 0 0 20px; margin: 0 0 0 0; width: 100%; height: 33px; }

#zrmenu .page-item-home a, #zrmenu .page-item-home { height: 30px; width: 105px; background: url('http://www.zombieroomie.com/images/site/home.png') no-repeat; }
#zrmenu .page-item-2 a, #zrmenu .page-item-2 { height: 30px; width: 105px; background: url('http://www.zombieroomie.com/images/site/about.png') no-repeat; }

#zrmenu .page-item-home a:hover { background-position: -105px 0; }
#zrmenu .page-item-2 a:hover { background-position: -105px 0; background-color: #000 Transparent; }

/* Ends Custom Menubar */

A little explanation of what the CSS is doing…

The CSS is taking the links generated by the custom-menubar.php and applying these graphics to them:

The CSS on lines 07 and 08 place the graphics in their off position, just showing the first 105 pixels of the image.

The CSS part on lines 10 and 11 is for when you hover over the image link, it shifts the image to the left 105 pixels giving you the on state of the graphic.

The page-id for the various pages can be found by viewing the page’s source. The id will be found there and it gives you the unique page id number for that page allowing you to use that for the CSS of that link.

The hover section in lines 10 and 11 might not always work for everyone. If that is the case, you might try:

#zrmenu a.page-item-home a:hover {
 background-position: -105px 0;
}

The only difference is the addition of ‘a’ before .page-item-hover… That may work in cases where the original code does not.

An Explanation of zrmenu vs menu

The standard menubar uses menubar, menu, etc. to further distance the custom menubar and make sure none of the standard menubar’s CSS stylings are being used… I added a prefix to the stuff I changed. I changed the custom-menubar.php’s structure to use zrmenubar and zrmenu instead, where zr= Zombie Roomie.

Feel free to use whatever you’d like in it’s place.

A note on image creation for rollovers

Your images have to be created with care since we’re moving by pixels, if your on state version of your image isn’t perfectly measured out and centered you will rollover and see nothing but your background color.

Additional Cool Stuff you can do with custom-menubar.php

If you wanted to put in a contact link and have it dynamically put in the admin’s email listed with your WordPress installation:

href="mailto:<?php bloginfo('admin_email'); ?>"

There’s a few more things you can do, since it’s a php file you can take advantage of the standard php doo-whackies. Examples: Template Tags/bloginfo from WordPress.

Download the example material

I have packaged up a copy of custom-menubar.php, included the CSS information for the Companion, and copies of the graphics. You should be able to upload the files to your ComicPress installation and add the CSS information to your Companion plugin and have it work out of the box. From there, you’ll be able to edit the files and customize the look to fit your site… this is just to get you started.

custom-menubar.zip

Thanks for reading and I hope your custom menubar comes out snazzy~!

Documentation contributed by John Wigger from Zombie Roomie.