Now we’re ready to get going with some edits to our child theme. Some edits are very easy to do if you have a basic understanding of HTML/CSS, so let’s start with them. You can easily change the background colour, font and font colour with a few quick edits. Below is a visual to help you see what I mean.
More complex edits
This is where things got messy for me. As I’ve mentioned, when I tried to edit the existing styles for the menubar, it only worked in Explorer, not in Firefox or Safari. Obviously I did something that messed up some code, but after spending several days digging through forums and going through the code line-by-line and not being able to correct it, I decided to take matters into my own hands and code something from scratch. Here’s a quick breakdown of the steps that I took and I’ll expand on them further after. And just to clarify, any of these edits need to happen in the child theme that you’ve created. You can do this by placing the necessary files in your child theme folder on your server.
1. In Appearance > ComicPress options, check “Disable default Menubar” to remove the standard bar on the page.
2. I used Dreamweaver to code a new menubar using Sprys.
(A quick note here: in order to make this completely functional, I needed to take out the hack for IE 5.0 that is included with the Sprys in Dreamweaver. This was actually screwing with how Safari was displaying the page, but taking it out fixed it. This might seem like a problem in that the site might not degrade gracefully, but my Google Analytics stats tell me that this shouldn’t be a problem right now based on who my visitors are and I’m already using PNG’s that will pose a problem for older browers anyway.)
3. Add the new style sheet code to your child theme style sheet.
5. Put the SpryAssets folder in your theme folder on your server.
6. You should be ready to go.
So how does my new menubar work? Well the basic idea is that I put the menubar into the header div. This seemed simple enough to me and is how I usually code the header and navigation for my own sites that I build from scratch. I like that they’re lumped together and out of the way – in most cases, the header and the navigation is the same on every page. Below is my drawing of what this looks like (I tend to draw things out to help my visualize what’s going on in the code).
So the header div is defined as being 240 pixels high and it automatically fills out the full width of the site. I’ve also added a 20 pixel margin to the bottom so that the content below is nicely spaced away from the menubar.
Inside the header div I’ve included two divs: one for the On the Verge logo – it’s defined as being 212 pixels high – and one for the menubar which is 28 pixels high with its opacity set to 70% and its font size set to 75%. The rest of the code that I’ve added in to complete this is what’s needed for the Sprys to make the rollovers and drop down menus work. I simply edited those in Dreamweaver to make them look like I want them to. To finish everything off I followed the steps above and put the code I’ve generated into the proper spots.
In closing, I just want to say that my approach works for me and I don’t advocate it for everyone. I want to know what the code that’s included on my page is doing and why it’s there so that if I need to edit it, I can. The process above is ideal for this because it’s really simple and I can easily go back to it in the future and change things if I need to.
As I make more edits I’ll post my results!