My personal notes on all things technical and factual....

Sat, 06 Sep 2008

/SW/website/blog/blosxom: Blosxom Layout: Headers, Footers, and Multiple Columns with CSS

This is my second Blosxom[1][2][3] site in as many weeks. This was the first:

http://www.doesharleysuck.com/blosxom.cgi/site-news/#bloxsom

I used to use Typo3[1] for my notes. Typo3 is a real HEAVY, truly an enterprise piece of software. A little tricky to setup the first time, but a real pleasure to work with after setup. BUT. Typo3 is a PHP app that needs MySQL on the backend, ie. it depends on Apache/PHP and MySQL, with some quite substantial memory requirements as well. Not a light-weight app. And all your data is tied up in a MySQL database, which is great if the amount of data involved is truly huge.

I think Blosxom is a much more appropriate solution for this kind of site. Fast and simple. The only tricky part is the CSS, if you want a multi-column website and you are not familiar with the CSS way of site layout.

For reference, here is the CSS style sheet that lays out this site:

/* Layout Stylesheet */ 

body{
 margin: 0px;
 padding:0;
 background: #ffffff;
 color: #333333;
 /* http://www.sitepoint.com/article/anatomy-web-fonts */
 font-family: verdana, "trebuchet MS", helvetica, sans-serif; 
 }

#head-box{
 height: 45px;
 border: 2px solid #000000;
 background: #000000;
 color: #ffffff;
 padding: 5px;
 }

#lh-col{
 float: left;
 width: 200px;
 border: 2px solid #000000;
 background: #c0c0c0;
 color: #333333;
 margin: 0px;
 padding: 10px;
 font-size: 10pt;
 }

#rh-col{
 margin: 20px 20px 20px 240px;
 background: #ffffff;
 color: #000000;
 padding: 20px;
 }

"head-box" defines the black banner at the very top of the page. "lh-col" defines the vertical menu column with the bluish-gray background on the left side. "rh-col" defines the content column on the right, where you are reading this.

To use these CSS definitions, you must import them into the page header (see "head.html" below) and tag the HTML associated with each area (banner, menu, content) with div tags, for example:


<!-- left column -->
<div id="lh-col">

     /* left column HTML content here */

</div>
<!-- end of left column -->

To be more concrete, blosxom uses several template files to define layout. One of these is "head.html". Here is mine for this site:


<html>
<head>
 <title>$blog_description</title>

<!-- this is where the CSS style sheet above is imported -->
<link rel="stylesheet" type="text/css"
href="/blog/bloxsom/2c-lc-static-layout.css">

</head>

<body bgcolor="#ffffcc">

<!-- header -->
<div id="head-box">
<strong><font size="6"><div align="right">$blog_title</div></font></strong>
</div>
<!-- end of header -->
<p>

<!-- left column -->
<div id="lh-col"><br>

<h4><a href="/blog/blosxom.cgi">Home</a></h4>
<h4><a href="/blog/blosxom.cgi/contact-us/">Contact</a></h4>
<h4><a href="/blog/blosxom.cgi/links/">Links</a></h4>

Search this site:
/* Google search box code here */

<h3>Categories:</h3>
$categorylist::display

<h3>Archives:</h3>
$archives::archives

<h4><a href="/blosxom.cgi/index.atom">Subscribe Atom Feed</a><br>
<a href="/blosxom.cgi/index.rss">Subscribe RSS Feed</a></h4>

<center>
<a href="http://www.blosxom.com/"><img src="http://www.blosxom.com/images/pb_blo
sxom.gif" border="0"></center>
<p>

</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col">

<div style="padding: 10px; float: right;">
/* Google vertical banner code goes here */
</div>

$breadcrumbs::breadcrumbs

Its not as scary as it looks. Just start with the simple bare-bones template files from the installation guide[5]. Link my CSS file into head.html. Tag the appropriate areas of the template files with the desired CSS area definitions (header, left column, right column). Adjust the CSS bit by bit, checking every step in your browser until you have the layout you want. Add content to the template files, piece by piece, again checking every step in your browser. No sweat

If anyone tries to use this and finds it to confusing, let me know and I will try to make it more simple and specific. Right now I am just throwing my own configuration files at you, ie. the lazy expedient approach to documentation. :-)

[1] http://blosxom.sourceforge.net/
[2] http://www.blosxom.com/
[3] http://blosxom.ookee.com/
[4] http://typo3.org/
[5] http://blosxom.sourceforge.net/documentation/users/flavour.html

posted at: 07:08 | path: /SW/website/blog/blosxom | permanent link to this entry

Home

Contact

Resumé / C.V.

Links

Categories:

Archives:

Subscribe XML RSS Feed

Sat, 06 Sep 2008