WordPress Beat Me Down
For the last several days, I’ve been trying to update my blog to use a layout I created. Each time I sat down to work on changing WordPress’ default template (named Kubrick), my brain would seemingly click off and refuse to concentrate. It was as if looking at CSS and PHP was the same as those crazy anime scenes that gave all those kids seisures. Half the time I would just stare blankly at the screen waiting for something to happen. I kept searching for tutorials with the hope that maybe there was some super easy way to do what I wanted and that, somehow, I’d skipped over it the last time I did the same exact search.
Fast forward a few days, several glasses of iced tea, and a lot of research later and here’s my newly updated blog. Of course once I figured out the bigger picture, like using my own header image or using a custom background for the page element only, the little details started to kick my ass…like, how to make that whole header image a link and why that custom page background didn’t seem to be repeating correctly. I found work arounds to most of the problems I encountered.
The majority of the changes I made were to the style.css file, which is how it’s supposed to be. I made very minor changes to the header.php and index.php pages. Here are some tips for those that encounter the same problems I did:
Making a Header Image a Link
Per the WordPress Codex, find the <div id=”header”> link in header.php (it’s toward the bottom) and change it to this:
<div id=”header” onclick=”location.href=’http://www.your-url.com/’;” style=”cursor: pointer;”>
Page Background Image Issues
You have the option to have a tiled/repeating background image either for the entire page of your blog (the area to the right and left of this content, the empty white space) and/or you can have a page only (the content area of your blog posts and sidebar, like this page is set up) tiled/repeating background image. As you can see I chose to use a page background, so when I designed the site I set it up so that the header, the Screaming Ink graphic, would blend with the page body and then with the footer below. I had little splash marks tying everything together, to make the page appear seamless. I didn’t use the standard background tile that has all four sides equally tiled so you can repeat it without seeing a pattern. I specifically wanted the ink splatters running the length of the right side.
For some reason the background image didn’t start below the Screaming Ink graphic and the effect was jarring, since there were ink splatters that were not lining up. I spent hours changing the settings for the header and the page in the style sheet; I added padding and changed margins to no avail. Finally, I realized that the page tag is actually for the whole page. Essentially, the page background starts at the very top of the page, not underneath the header, like I had thought. My header is 129 pixels tall, so my background (which is much taller than the header) had 129 pixel hidden from view behind the header. I fixed this in Photoshop to make them appear slightly more seamless.
So remember: Unless your header and reapeting background image are the same height, your header is hiding part of your background image.
That’s pretty much all I can remember right now, since those are the most recent things I dealt with. It was a fun learning experience and it took a lot of patience. There are some minor tweaks I still need to make to the typography, but those can wait for a few days.
Tags: body, CSS, Design, header, page, template, tiled images, WordPress