This white top writeth myne olde yeris; myn herte is also mowled as myne heris.

Joomla's Atomic Template 

This article assumes familiarity with the Back EndJoomla Templates in general, and how to edit their HTML and CSS, all boxes I could more-or-less tick but it wasn't at all obvious to me how to get from Screenshot 1 to Screenshot 2.

atomic screenshot

Above is roughly what you get if you select the Atomic Template as your default but before monkeying around with it.  Screenshot 1 above was only altered by adding 'showgrid' instructions of which more later. Screenshot 2 below is what you can get after a few simple edits to the Template HTML [see below] and changing some of the Atomic modules from HIDE to SHOW. To do that go to Module Manager and click on whichever of the atomic-modules you want which will open a dialogue with the options show/hide.

atomic screenshot

What makes it all tick is something called BluePrint lurking in the background, which you'll see referred to in the Atomic Template HTML. The bulk of the layout and styling are seen to by BluePrint which uses GRID BASED design. Here's a separate page on Grids. The Atomic-Blueprint alliance has a natty option to display the default Grid on your webpage. In the Template HTML look for any div class=“container” and alter it to div class=“container showgrid”. Screenshot 1 at top is with showgrid on; Screenshot 2 is without showgrid.

N.B. by DEFAULT Blueprint uses a WIDTH of 950px consisting of 24 columns all 30px wide with a 10px margin between columns. If you're doing the maths that should = 960px but the last column does NOT include the 10px margin. If this is not the layout you want, you can use a Blueprint Grid CSS Generator to generate a custom grid layout - but devising your own is pretty simple. There's more about this on the Internet! Here is a VERY USEFUL PDF crib-sheet for Blueprint.

Using the above Blueprint default, these Quivis pages consist basically of a sidebar on the left of 7 columns, plus 1 extra column as a margin between the sidebar and the main content section or mainframe composed of another 16 columns. See the Grids page where the underlying structure is displayed. Typing ?tp=1 after the URL of any page will display positioning information. All page elements, modules, menus etc, are assigned a POSITION on the page. These are in turn defined in 2 places; in the templateDetails.xml and index.php files of each template. The index.php file can be edited directly from the Back End of Joomla; it is the file that is edited when you go to Template Manager: templates, click on whatever Template Details and under Template Master Files click on edit main page template option. Not all positions need to be used; some can be reserved for specific pages only. The current Atomic template pages on Quivis have the following possible positions defined.


Blueprint contains a number of source files including;

  1. reset.css which sets sensible defaults across all browsers.
  2. typography.css which sets up some nice default typography and also sets up some attractive styles around font sizes, line-heights, default styling of tables, etc.
  3. grid.css handles the grid layout portion of Blueprint.
  4. forms.css provides decent looking default forms as well as classes for error or flash notifications etc.
  5. ie.css is a separate stylesheet for IE because Microsoft persist in producing crap browsers. Thus all Blueprint's core styles will work in all major browsers.
  6. print.css sets some default print styles to render printed versions of your site as attractively as possible. The print.css file has an option where you can fill in your domain name so that relative links are shown in parentheses behind the text link in the printed version of your page. Without filling in this section only remote links will print properly.

The Blueprint used by Joomla's Atomic template has the first 4 style sheets above compressed into one called screen.css plus the separate print.css, and ie.css files.

Blueprint and its attendant files are not in the root Atomic Template directory. Thus when you look at the Template's editing options for either the HTML or CSS files the only ones you see from the Back End are those of the Template itself. In other words, if you want to tinker with Blueprint files you must do so in an external editor. However, it seems that writing new CSS rules in the Atomic's template.css over-rides any in the BluePrint CSS. If you download the whole of the Atomic Template you will see the following structure, where Blueprint's screen.css, the main driving force behind the grid and its styling, is arrowed.

blueprint directory

In Screenshot 1 showing Joomla Sample Data the main body of the page's content is the block to the left composed of the default 16 columns plus 1 additional column as a margin between that and the smaller area to the right consisting of another 7 columns. In the Template HTML span-1 to span-24 tells Blueprint how many columns are involved in the instruction. append-1 will add however many columns you stipulate to the defined block and last tells Blueprint that that is the final column or end of the row.