You are browsing the category: CSS Stylesheets
Using Cascading Style Sheets to style a WordPress Theme
Flexible Header Graphic Design
Posted on 09/29/2009 at 1:42 pm by MikeLTOk, I got a little sidetracked. Anyway, I wanted to talk about how I am using the graphic images in the header in a separate post because imagery is a very important part of any WordPress theme design, and should be discussed in its own context. For me, a pretty picture is worth a thousand words, and is probably what draws us all subconsciously to examine a theme design in more detail in the first place.
A talented graphic artist can do wonders with a photo, collection of photos, vector drawings, animations, special effects and more. Stunning pictures and even movies can be made with today’s sophisticated software, predominantly Adobe’s Photo Shop and Flash.
I use Fireworks MX, and while I’ve looked at other software options, I am just more comfortable with fireworks because I’ve used it for so long. I’m not that great at graphic design and wouldn’t expect to make a living at it, but I am having fun when I do it!
Regardless of what software you use, the principals of graphic artistry remain pretty much the same.
It is beyond the scope of this post (beyond my scope too!) to get into the intricacies of Graphic Design, but since we are discussing a flexible liquid layout, it would seem to behoove us to examine the use of images flexibly incorporated into the design.
In the case of this site, I started with two images, logo.gif and headpic.jpg. Headpic is actually a collection of three images that I can move around as I see fit because I have the original .png file (this will come in handy later on).
If you will notice, the colorful background image in header.jpg (its fiber optics!) fades out as it extends to the left. The reason for this is that as the screen width shrinks, the two images are pushed together. Making the left side of the right image fade into transparency allows for the two images to coexist side by side without one overwhelming the other. This would be true even if the left side was not an image, rather the default WordPress theme header text.
A Three Column Liquid Layout
Posted on 09/25/2009 at 2:16 pm by MikeLTAs I said in my previous post, I have pretty much always used the liquid layout. In the past when starting from scratch I would do a search to review the concept, which I always seemed to almost but not quite grasp. Not this time! To me, it is perfectly clear, and I marvel at the simplicity of it! It’s nothing but percentages, margins, and floats.
For this website, I wanted to use the two narrow columns as sidebars together on the same side of the page, with the content dominating the left side of the screen (heat map). So as not to crowd things up, I also want make liberal use of some white space to form boundaries between the columns and the actual edges of the display.
Starting off at 100% is the CSS body tag, which coincidently corresponds with the html tag of the same name. Since it is the first thing loaded style wise, I don’t really need to declare it as 100%, but give it a margin of 0. From what I understand, this is a good thing to do for maximum browser compatibility.
Arbitrarily, I want 2% white space on both sides of the screen, and about 1% between columns. My two narrow columns will be 15% each, and for vertical consistency between browsers, I will use a fixed length of 20 pixels of white space at the top of the page. Percentages work best on width, not so much length.
Now that we have used up 35 of 100%, it becomes easy to determine the width of the main content column. I give it 62%.
Aha, you say! That doesn’t add up!
In a perfect world it should be 65%. Neither Firefox, Safari, or IE are perfect, and each have their own way of converting pixels to percentages, and all will round up or down in different ways. So in the interest of browser compatibility, we give them plenty of room for error. How did I come up with 62%? Start at 65 and come down a percent until it works in all my browsers.
Since the content column comes first, I give it a 2% left margin and float it left to keep it on that side of the page. I gave sidebar1 a margin of 1% and floated it left to keep it in front of sidebar2.
Sidebar2 took some tweaking. I originally floated it left with a left margin but that didn’t work, in that it didn’t line up with the header. Since my main concern was the right edge of the screen, I gave it a right margin of 2% and floated it right. Voila!
Since the header consists of only one column, I just had to determine the height, give it a 2% left and right margin, and a 20 pixel margin at the top
As everything in the footer is going to be centered, I didn’t really have to give it its 2%, but I did anyway. The main thing for the footer is that it appears at the bottom of the page, and for it to do that, it has to clear all the columns both left and right. Thus the CSS class “.clearboth”.
And now, for the moment of truth:
