I’ve been poking at this WordPress Theme of mine for a few days and all the little nitpicky stuff is getting me down. There are a lot of major and minor things to clean up. And I’m totally not happy with how FireFox is handling my old layout. In fact, I’m disgusted with my old layout. Guess it’s time to really do what I want to do.
While working on my CSS design experiments a few years ago, I also put together some serious state-of-the-art web page layouts and designs. Unfortunately, most browsers couldn’t keep up with it. Too graphic heavy and too many bells and whistles. It’s been about three years now, so I figured that if people haven’t upgraded their browsers to at least something that is two years old, they never will and I can only do so much for them. It’s time for me to get more serious about my own web page design and design for ME and not to make it simple simple simple for the rest of the crowd.
I decided that I wanted to try to create a fixed background image of our trailer meandering down the Talimena Skyline Drive in Arkansas for the main and category pages. Over that, I wanted a translucent filter which would allow the content to sit on a semi-opaque white background when it moved over the content. This way, when the viewer scrolls down the page, the content moves but the image doesn’t. Eric Meyers has the most wonderful example of how this works on his site.
I did all kinds of things, trying this and that, changing the colors, opacity, and nothing was good enough. And it would look great in Internet Explorer and crap in Firefox, and then crappy in IE and wonderful in Firefox. It was all close, but it just didn’t have the punch I wanted. I also really loved having nothing but black text on a white background for the long, wordy articles I tend to write. Clean and simple while still having a kick. I wanted to get back to our roots, life on the road and photography, so I wanted to look more “photog” than “educational”. The opaque background for the text didn’t work. It was messy and hard to read.
Brent, my hero, finally convinced me to make the background image fade into the background so the header area would feature the photograph fading to white and the majority of the background would be white, allowing the text to be against a white background. Brilliant. Totally brilliant. He knows nothing about how all this works, but he can take one look and come up with the solution. One more reason why I keep him around and adore him desperately!
So I slammed the photograph into PaintShopPro and fought for ages to get the fade right, creating graduated filter after filter after filter to drop the photograph down to white without leaving a line or making a mess of it. And then I had to test each one to see how far down it would go before it interfered with the text. Then back to the drawing board, literally. Finally I got it right.
Not long after, someone emailed me that they are using a super wide screen resolution and the photograph hangs off into white background when the screen width reaches the end. After a lot of new research, I set the image to be 1024 pixels wide based upon the widest average screen width in use. I thought that would be plenty. Because I set the font of the header information to white, to contrast against the photograph in the background, when the screen stretches all the way across beyond 1024 pixels, the floated text floats all the way over to the right with white text on white background. Not a good combination. This brought a great deal of angst.
I hate websites which decide the width for me, leaving blank edges all around. I like fluidity and elasticity in web page design, using up the whole screen real estate, or not, dependent upon the user not my design. Screens that now reach over 1024 pixels wide is a lot of wide screen real estate to cover. So, after years of working to tweak my lovely layout to be fluid with the screen widths, I’m back to debating about how to deal with screen width issues again.
After consulting with some pro designer friends of mine, I come up with a temporary fix. I set the background image to repeat horizontally for ever and ever. It isn’t good, it isn’t pretty, but it works. If I decide to leave it this way, I will probably soften the right edge to blend better with the left edge as it repeats. The challenges a web designer is faced with. Or I set it to 1024 pixels wide, let the user make it narrower if needed, and the wide screen user can suffer with empty space on the right side of the page….what to do? I’ll debate before I decide. The majority of Internet users are still stuck on 800×600 though use of larger screens are rising quickly.
Linking Graphics and Images in WordPress
After dealing with the background, I started to work on each individual post to make sure all of the HTML imported correctly, fix any bugs, and make sure that the links to the graphics still worked. This was a little more of a challenge than I thought.
Years ago, I’d set up my photographs and images in their own folders. From inside an article, the links to the graphics were set with relative links. This means that instead of having them linked via an absolute link like "http://www.examplesite.com/images/ball.gif", if the article was in the “Learn” folder and the subfolder “Biz” for articles about the business of nature photography, the relative link for the graphic would be "../../images/ball.gif". The dots and slashes instruct the browser to look for the graphic two directories up to find the images directory and the graphic would be in there.
With the move to WordPress, the issues of relative links gets kinda thrown out the window. My Theme template files are in a sub-sub-subdirectory of the root. So would the relative link have three sets of ../ in order to get the image? Nope. Figuring this out took some detective work, though.
When someone visits your WordPress site, the literal address is aimed at the index.php in your root directory. This template file, while called index.php isn’t actually the “real” index file. It features instructions that basically say “go get the templates and fill them with information from the database and pretend that everything is generated from the root directory unless you have instructions otherwise.”
So it grabs the index.php from your theme folder which is usually at something like:
http://www.example.com/wordpress/themes/mytheme/index.php
Let’s work this out then. The root index.php leads to the Theme index.php and the actual “web page” information is pulled from the database to generate the page, so what should the link be? From the Theme or from the root?
From the root. Even though your information gets pulled from different sources, the root file that controls all the action is still based in the root directory. So the relative link for images has no use for the dots and slashes since it will look for the images directory from the root.
To ensure that they are found from the root, you can add a slash to the beginning of the link like this:
/images/ball.gif
This forces the browser to look at the root directory first for images.
This led to my first lesson in doing a search and replace in the database to get rid of all those dots and dashes in the image links.
UPDATE wp_posts SET post_content = REPLACE (
post_content,
'<img src="../',
'<img src="');
Looks simple, but it took me a couple hours to figure this little SQL query statement out. I’m totally new at this MySQL database stuff, though I have years of experience with MSAccess and other databases, this is different.
The query basically instructs the database to look in the wp_posts table in the post_content field for any occurrence of the first line of <img src="../ and replace it with the second line of <img src=" to fix my little problem. Little did I realize that this piece of code and I would become very intimately acquainted.
I did a search for one set of ../ and then for another, to make sure I got all the ../../../ sets. Cleaned it up in seconds. Wow! Powerful little query, but it can easily search and replace the wrong thing and screw things up. I started making frequent backups of my database to make sure that I had something to go back to if I did mess it up. And I did, but everything was all fixable.
As I looked through each post, I realized that my bullets weren’t showing up. I had copied over my list CSS directly from my old site and the relative/absolute link thing hit me here again. The style.css is called directly from within the header to the style sheet in my Theme. This means that the style sheet looks for its links from the folder the Theme resides in, because that is where it also sits. Any link from within the style sheet has to be directed from that folder to the image folder or the spot within your site that the images sit…messy.
A command decision had to be made. I recommend that if you are using any graphics in your CSS, like backgrounds, replacement graphics for the lists or headings, put them in the same folder as your style sheet to ensure easy loading. Or in a subfolder of your Theme folder. Big lesson learned. This is much easier.
Another Image Link Solution
While working on the test site, I had a terrible time dealing with all of these relative links for images, before I figured out about the search and replace query in the database. So if you aren’t ready, like I was, to do a massive search and replace in your database, then you can use the following tip.
In the header.php template file, just before the style sheet reference in the head, paste the following line, changing the appropriate information to suit your needs:
<base href="http://www.yourdomain.com/wordpress/"/>
This directs your url references so you can use relative links that will not work from where the page is but from the base reference. You can then use relative links like this:
<img scr="wp-images/bicycle/bike1.jpg" alt="photograph of a Schwin bicycle">
And the graphic will be found as if it was in:
<img scr="http://www.yourdomain.com/wordpress/wp-images/bicycle/bike1.jpg" alt="photograph of a Schwin bicycle" />
Lacking Links
Now that the background was finally set, and I could see the images on my site, it was time to look at the header title, article heading titles, text, and links since they lay on top of the background.
The colors in the photograph of the road winding down Talimena Drive is wonderful, fall colors, and it blended down wonderfully into the white. But the text that laid over it before it reached the pure white included the title of the article or page title (category, archives, etc.), the top text of the sidebar, and the beginning of the article. I knew the colors needed to be earthy, since that was represented in the background, but which colors to choose?
I tried everything. White was great across the top for the header, giving enough contrast for the letters to show up, but white wouldn’t work for the mid to total white range. I tried earth tones like browns, and greens, but they blended in with the photograph. Not enough contrast. I tried a dark green on the heading titles and could see them fine in the content that went into the white background, but I couldn’t see them against the photograph. I tried a light green, but it looked awful against the white, though it did stand out against the photograph. I didn’t want to push the whole content down to where there was more contrast in the photograph, and I didn’t want to bring the white gradient up any further. ARGHH, the compromises we have to make in design.
I discovered several color helping sites that really gave me a lot of assistance in figuring out the color scheme, but it wasn’t until Brent stood behind me again, the unassuming brilliant designer that he is (but don’t tell him because he doesn’t know), and said, “Make the titles a deep red, not purple and not orange, but a rust base red. And then match the links to those colors.”
Through the use of the following color scheme sites, I was able to finally pick a good color scheme to set the links and heading colors.
We found a good red and I set the styles, so now I needed a good link hover color. Brent recommended that I turn “red into gold” which worked wonderfully for the links in my sidebar and throughout the document against the white background, but the h3 heading for the title of the article sat in the background photograph and the gold color on the hover made the title disappear into the photograph. Not enough contrast. GRRRR.
We hit the color schemes again and finally found a lighter red color that worked wonderfully as a slight contrast shift for the link hover. The rest of the links will feature the gold hover color.
We decided to keep the “earthy” tones and set the sidebar titles and “box” lines in a rich green color, which adds to the fall, natural colors throughout. I love it.
Step-by-step, this WordPress Theme and site is coming together.
Moving On To the Structure
Well, I can finally “see” my new WordPress test site. It isn’t as pretty as I want, but it is getting there. Now that the core stuff is there, it’s time to attack the HTML, PHP, and structure of the site again and really pull all of this together to be the site look and feel that I want.