We finished the first article with a background color and a header. However, thus far the results are less than impressive, so we shall begin today by getting some shape into our pages and making the content visible.
To begin that, we need to determine a width for our pages and these days it is important to remember that while around 80% of surfers use 1024×768 or more, a very sizeable minority browse at lower resolutions. In my view, the best solution for sites which are wholely or mainly text, is a completely fluid design which will adapt to any size of screen. This isn’t just a matter of aesthetics: non-IE6 surfers (even they in some circumstances) can change the size of the displayed fonts and totally mess up static designs. The decision needs to be weighed against the possibility that single-line text elements can end up stranded next to an excess of white space on very big screens.
As I have illustrated in an earlier article here, there is nothing to prevent image sizes being allowed to change too. However very high quality images and some careful maths are needed to make that work. What we shall do here is a compromise: express the width of our working area as a percentage of the screen, but – because we don’t want a design we know must accommodate quite a lot of images – to degrade at low resolutions, we shall limit how small that area can become. Two parts of the stylesheet need our attention. First we add text-align: center; to the body block.
/* globals */
body {
margin: 0px;
padding: 0px;
background: #000;
}
CHANGE TO:
/* globals */
body {
margin: 0px;
padding: 0px;
background: #000;
text-align: center;
}
This is to cater for IE6, which will not handle auto margins (see later) correctly otherwise. Next, if you take a quick look at header.php in your WordPress Dashboard theme editor, you will see that the single division containing all the sites content has been defined as div id=”wrap”.
<body>
<div id="wrap">
<div id="header">
<h1><a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
Therefore back in our stylesheet we need to add some parameters:
/* wrapper */
#wrap {
}
CHANGE TO:
/* wrapper */
#wrap {
text-align: left;
width: 90%;
margin: 0px auto;
min-width: 770px;
}
The text-align addition is to restore the default behavior that we messed up a few minutes ago and we have opted for the width to be 90% of the available screen, except that it cannot be narrower than 770 pixels wide. When you want something to be centered and a margin is involved, you set both margins to be calculated automatically. margin: 0px auto is shorthand for top=0, right=automatic, bottom=0 and left=automatic. If all four margins were to be the same, we could enter the dimension only once and when left and right/top and bottom are the same, we only have to state the two dimensions involved. It is not currently necessary to put a dimension measure with a zero, but that seems set to change, so it’s a good idea to get into the habit now.
All very easy, except that there is a small snag: namely that IE6 doesn’t recognize the min-width instruction. Conditional comments to the rescue! Once you have saved your latest version of the stylesheet, open up header.php:
FIND THIS LINE:
<<style type="text/css" media="screen">@import url( <<?php bloginfo('stylesheet_url'); ?> );<</style>
AND ADD THIS UNDERNEATH:
<<!--[if lte IE 6]>
<<link rel="stylesheet" href="<<?php bloginfo('stylesheet_directory'); ?>/ie6.css" type="text/css" />
<<![endif]-->
CREATE A NEW FILE AND PUT THIS IN IT:
#wrap {
width: expression(document.body.clientWidth < 800? "770px": "90%" );
}
If you want to dig more deeply into the options by which browsers can be identified take a look here. The variation I am using says "If the browser is Internet Explorer version 6 or less", read in a second stylesheet called ie6.css. In this instance, because IE6 will ignore the min-width command which it does not understand, and since this bit of jiggery pokery was read in second, this width command will replace the one in our main stylesheet.
Once you have created ie6.css on your PC, FTP it to your theme directory and CHMOD 666 for future editing.
This is of course a bit of hackery, something to avoid unless there is no choice, but the use of conditional comments (which must appear within HTML and not in CSS) means that our pages will still validate fully and also that we are doing no more than making use of the rules of precedence built into the concept of CSS.
Fonts
Now let's introduce some color to try to make this all readable. When I added the name of the site to the background graphic, I did so with a gradient reaching for #BFD8F1 to #082B6B. I'm going to start by using the lighter of those two colors for the text and a variation a couple of shades darker - #95BEE7 - for the links. We also need a hover color and for that I have chosen an orange: #E29634.
The result makes a reasonable starting point and this is how you get there. In your stylesheet:
/* globals */
body {
margin: 0px;
padding: 0px;
background: #000;
text-align: center;
}
CHANGE TO:
/* globals */
body {
margin: 0px;
padding: 0px;
background: #000;
text-align: center;
color: #BFD8F1;
}
AND
a {
}
a:hover {
}
CHANGE TO:
a {
color: #95BEE7;
}
a:hover {
color: #E29634;
}
If I can use blue or something with blue in it for links, that will be my first choice. Similarly something red or red-related for the hover. That is because surfers are tuned in to the idea that links should be colored blue, turning red on hover, so providing that doesn't contradict where my colors are going, I want to accommodate that preconception. In this instance, since an orange picked up from the woman's leg led me to the blue, there is no conflict at all.
We need to do something about the font next and although there are ways to deliver fonts to someone who does not have what they need for your site, these introduce delays and possibly set off firewall alarms. Which means we are stuck with the very small number of fonts that all versions of Windows and Mac PC's can read. Once more we are in the realms of personal taste as well as the needs of a particular design, but I'm going to start with Lucida (similar to Verdana and readable at small sizes) for the regular text and Georgia (Times Roman with a little more style) for headlines. I think large fonts in bold are usually ugly, so I have also instructed font-weight: normal; for the headers. But like all the specifics that I am suggesting you can put in whatever suits your tastes and the design you are developing.
/* globals */
body {
margin: 0px;
padding: 0px;
background: #000;
text-align: center;
color: #BFD8F1;
}
h1, h2, h3 {
}
CHANGE TO:
/* globals */
body {
margin: 0px;
padding: 0px;
background: #000;
text-align: center;
font: 80%/1.7em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Geneva, sans-serif;
color: #BFD8F1;
}
h1, h2, h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
Three things to note above. The first is that in addition to the fonts I expect most visitors will have installed, I have offered Windows, Mac and fallback font in case they do not. That way, even those people will see something near what I intended, rather than viewing the site in whatever their default font happens to be. Secondly, I do not believe in messing with a surfer's preferences more than necessary, so instead of setting a specific font size in points or pixels, I have elected for a percentage (80%). I keep the browser in which I check my designs on totally default settings and I use the most popular resolution, so that I see my designs the way that the largest single group of visitors will. 80% looks a little large at the moment, but it will do. Similarly I have chosen a line height (that 1.7em, which means 1.7 times the height of the letter M at the chosen font size) which may need changing later.
Columns
The last thing we shall do today is get the columns sorted out and if you open up the Main Index Template you will see at the top that the main body of our pages is wrapped within div id="content". Next open the Sidebar file and you will similarly see that all the links and whatnot in the narrow column are wrapped into div id="sidebar".
Since this is a semi-flexible design and it is more likely to adapt well to different sizes if our dimensions are based on the smallest width allowed (770 pixels), the column widths must be expressed in percentages. I have opted for 560 pixels (560/770=0.73) for the main column and 180 pixels (180/770=0.23): ie 73% and 23% with the leftover 4% to act as a margin between the two.
#content {
}
CHANGE TO:
#content {
float: left;
width: 73%;
}
#sidebar {
}
CHANGE TO:
#sidebar {
float: right;
width: 23%;
}
Out out damn formatting!
Actually I lied, we are going to do one more thing today. If you look at where we are now, the default WordPress entries have obligingly placed themselves into two columns, but there is spacing all over the place which we have not put there. We also have underlined links (whether we want them or not) and symbols ahead of our listed links. All of this built-in formatting would not be so bad if it were rendered consistently by the various browsers. But it is not. Explorer, Firefox, Opera and all, each have their particular quirks.
/* globals */
body {
margin: 0px;
padding: 0px;
background: #000;
text-align: center;
font: 80%/1.7em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Geneva, sans-serif;
color: #BFD8F1;
}
CHANGE TO:
/* reset formatting */
body, html, p, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, blockquote, fieldset, input { margin: 0px; padding: 0px; }
:link, :visited { text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }
a img, :link img, :visited img { border: none; }
/* globals */
body {
background: #000;
text-align: center;
font: 80%/1.7em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Geneva, sans-serif;
color: #BFD8F1;
}
The best way of dealing with this is to undo all this formatting and then set your own, block by block, item by item, as you develop your design. I strongly recommend that you add the reset formatting block to every stylesheet with which you work.
Homework
WordPress very obligingly provides some default data so that we can immediately see what a theme will look like. However it does not include any entries which involve pictures and obviously these will be an essential part of our babelog. So during the next couple of days, as well as updating your version of this design, create a couple of posts.
One should include a single image 500x250 pixels and the other two pictures 200 pixels square. Just create the two posts, putting into them the usual (HTML) links to the pics (img src= etc), immediately followed by a half-dozen lines of blurb. There is no need for any formatting, paragraphs or line breaks. Just paste in the correct links to the images that you would use in a regular HTML page and type in the text. The output will look weird: that is what we shall fix in the next article.
