Boxed Content

by Darren Collins
Saturday, 24 August 2002

I like to group related items together in boxes on my web pages. It helps visitors quickly see what a page is all about, and to zero in on the items they're interested in. For an example of what I mean, check out the yellow boxes with red title bars on my CityDesk index page.

A box is really just an HTML table with one column and two rows. The top row is the header of the box, and the second row holds the content. But CityDesk doesn't directly support the creation of HTML tables, so I use variables for convenience and then format the table using CSS.

First, I defined three variables as shortcuts for the code to start a box, to separate the heading from the content, and to end the box.


<table cellSpacing=0 cellPadding=3 width="100%" border=1>
<td class=header>


</td></tr><tr><td class=content>



So when I write this in my article body:

{$.box_start$}Box Heading{$.box_mid$}Box content goes here.{$.box_end$} gets expanded to this:

<table cellSpacing=0 cellPadding=3 width="100%" border=1>
<td class=header>Box Heading</td></tr><tr><td class=content>Box content goes here.</td></tr></tbody></table>

...and on the published page it looks like this:

Box Heading
Box content goes here.

Of course, you can stick CityScript in the box heading or content, like this:

{$.box_start$}Most Recent Articles{$.box_mid$}{$foreach 10 x in (not(keyword_contains "(NFP)")) SortDescendBy .fileddate$}-&nbsp;<a href="{$$}">{$x.headline$}</a><br>{$next$}{$.box_end$}

...which will look like this when published:

Most Recent Articles
Design Test Page
Handy Variables
CityDesk Beta 2.0.1 First Impressions
Boxed Content
Should You Be Online?
CityDesk Templates For Non-Profits
Build Your Own Website
Managing Content Fragments
Migrating to CityDesk
Index Pages

The colours and table properties are defined in my site-wide .css file:

td.content {
  font-size: 0.7em;
  color: {$.cTableText$};
  background-color: {$.cTableBg$};
  text-align: left;
  vertical-align: top;
  padding-top: 1em;
  padding-bottom: 1em;
td.header {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: {$.cTableHeaderText$};
  background-color: {$.cTableHeaderBg$};
  text-align: left;
  vertical-align: top;

You'll notice, too, that I define my site-wide colour scheme using variables. These variables are used instead of hard-coded colour values throughout the CSS file and all my templates. So it's really easy to update my colour scheme, should I ever get bored with my current design.

Keep an eye out for a future article on how to use CSS with CityDesk!


Related Articles
- Handy Variables
- Design Test Page
- CityDesk Beta 2.0.1 First Impressions
- Boxed Content
- Managing Content Fragments
- CityDesk Short Tips
- Template Mockups
- Creating A Main Page
- Index Pages
- Using Folders
- Committee Intranet Site
- Migrating to CityDesk
- CityDesk First Impressions
- CityDesk Links

Recommended Books

This site Copyright 1999-2005 Darren Collins.