<p>It's been a long time since I posted anything, so I figured I'd put up a
little informal documentation on the theme system. After all, who wants to be
stuck with just the default themes? The answer is: me, because I'm the one who
designed them. But I'm sure other people would like to personalize the look of
their site a bit.</p>
<p>Today, let's talk about setting a custom page banner. That seems to be one
of the first things most people change on their blog. Plus it's fairly easy to
do in LnBlog and doesn't require a great deal of HTML or CSS knowledge. So
let's get started!</p>
<p>For this exercise, you'll need two things. The first is a banner
image. It can be anything you want, so long as a web browser can display it and
it's a suitable size. Since I'll be assuming you use the default LnBlog theme,
which is not fixed-width, I'd recommend a JPEG image that's at least 1024 pixels
wide and around 160 pixels high. For illustrative purposes, I'll use
<a href="horizon.jpg">this picture of the hills.</a> If you have
a moderately high resolution digital camera, you can probably take a decent
picture yourself and use the <a href="http://www.gimp.org/">GIMP</a> or some
other image editor to cut out an appropriately sized image.</p>
<p>The second thing you'll need is a copy of your banner style sheet to work on.
This one is easy: just go into your LnBlog/themes folder, find the directory for
your theme, and copy the styles/banner.css file to someplace on your local hard
drive so that you can edit it. </p>
<p>Now that we've got a stylesheet and an image, setting the banner background
is easy. Just open up your copy of the banner.css file, find the
<code>#banner</code> section, and change it so it looks like this:
<code style="white-space: pre">
#banner {
   width: 100%;
   border: 1px solid black;
   background-image: url(../images/horizon.jpg);
   background-repeat: no-repeat;
   max-width: 1281px;
   max-height: 160px;
}
</code>
This gives us a banner box with a thin border and our horizon image as the
background. Note that the max-width and max-height are set to the width and
height of the image. This keeps the box from expanding to larger than the size
of the picture and looking funny.</p>
<p>As long as we're in the style sheet, we might as well consider the text.
Let's say, for the sake of argument, that you wanted to change the alignment of
the default banner text. Let's say you want to put the blog name on the left
side of the banner and the description on the right. Well, in that case, you
would look for the <code>#banner h1</code> style for the name and the
<code>#banner h3</code> style for the description. If you look just below the
section we just modified, you'll see something like this:
<code style="white-space: pre">
#banner h1, #banner h2, #banner h3 {
   text-align: center;
   vertical-align: middle;
   color: white;
}
</code> This sets the default style for the first three levels of heading. We
can override the alignment by simply creating additional styles
<strong>below</strong> that section, because in CSS, styles later in the file
take precedence over earlier ones. So, let's add the following:
<code style="white-space: pre">
#banner h1 {
   text-align: left;
   margin-left: 10%;
}

#banner h3 {
   text-align: right;
   font-style: italic;
   margin-right: 10%;
}
</code>
This gives us a left-aligned heading, and a right-aligned, italicized
description. (If you don't see a blog description, you can turn it on in the
plugin configuration page, under the "pageheader" plugin option.)
Note the margins are set so that the text doesn't bump up against
the edge of the banner.</p>
<p>So at this point, we have <a href="horizon.jpg">our image</a>
and <a href="banner.css">our stylesheet</a>. Now what? Well, we install them
on the server, of course! But where to put them?</p>
<p>This is where the flexibility of LnBlog's theme system come in. You see, we
actually have several options. First, we can always put them in our theme
directory, overwriting the old style sheet. The second possibility is creating
a new theme. The third is applying this only to a single blog. Changing the
files for the default themes isn't really recommended, so we'll stick to the
second and third options.</p>
<p>Creating a new theme, especially one this simple, is quite easy. Just go
into your LnBlog/themes directory and create a new folder with whatever name you
want the theme to have. Then, inside that folder, create four more folders with
the following names: images, styles, scripts, and templates. Now copy your
banner image into the images directory you just made and put the banner.css file
in the styles directory. Now, if you edit your blog setting and change the
theme to the one you just created, you should see your new banner.</p>
<p>The process for applying your custom banner to a single weblog is very
similar. You would simply open up the directory for that weblog and create an
images directory and a styles directory. Copy your image and style sheet to the
corresponding directories and the changes will automatically take effect for
that blog.</p>
<p>By now, you've probalby noticed the pattern here. When constructing a page
to send to the client web browser, LnBlog uses a search path mechanism to find
files. There are four kinds of files: images, styles, scripts, and templates.
LnBlog looks for each type of file in a directory of the same name, located in
the current blog's folder, the current theme's folder, or the default theme's
folder. The search takes place in that order, so if you don't have a particular
file in your blog or in your theme, the default will always be there. The idea
is to make it easy to create small variations on existing themes. The down
side, of course, is that it's somewhat more difficult to create custom themes
from scratch. But, then again, given that you have to get all the template
variable right in order for things to work, it's usually easier to just start
from an existing theme anyway.</p>
<p>Next time, we'll talk about templates and how the enevt-driven plugin system
interacts with them.</p>

You can reply to this entry by leaving a comment below. You can send TrackBack pings to this URL. This entry accepts Pingbacks from other blogs. You can follow comments on this entry by subscribing to the RSS feed.

Add your comments #

A comment body is required. No HTML code allowed. URLs starting with http:// or ftp:// will be automatically converted to hyperlinks.