Site Map Mara Editing Advanced Step by step
print

The Theme - Step by Step

The body section of theme.php

The body section is where you'll build your page components, and it's pivotal to a good result. As we've said this is just HTML, so basically you can include any standard Web markup you like. This markup will appear on all pages that use the theme. There is one proviso, which is that at some point you must include a placeholder, <!--CONTENT--> which determines where the page-specific content will be inserted. Thus the absolute minimalist theme body would be:

<body><!--CONTENT--></body>

and this will simply display the content of any page with no embellishment whatsoever.

In practice you'll more likely want to determine a number of page zones to contain other stuff that always appears on all pages. For example a website with no menu is kinda hard to navigate, so we need a zone for a menu.  We quite likely also want some kind of banner to proudly proclaim what site this is.  If you're that way inclined, you might also want space for adverts. Or, for news links, blog post links, or anything else.

You can use any block-level tag to define your zones, but <div> is the most popular.  Some coders advocate the new HTML5 document markup, but in my experience it doesn't work in all browsers, and even at that doesn't always give reliable results. Meanwhile older websites you're importing may have used tables for layout. Today this is not advised because it makes responsive design much harder. However, it's useful to know that Mara will work just fine with imported table-based layouts.

Let's start off by looking at a straightforward layout with a banner,  a menu bar, the content, and a footer. Many modern websites dispense with vertical columns and just have the content fill the page widthwise. One advantage is that no great change is needed to such a layout to suit narrow or wide displays, such as a phone or dekstop.  This might look something like:

 

A full width layout of this kind is easy to build using divs. Divs are block elements, so they will fill the available space and will not allow anything else to sit alongside them. Just what we want here.  The outline code is really simple:

<body>
  <div id="cms_banner" >
      -Your company logo or whatever other top banner you prefer goes here-
  </div>
  <div id="cms_top" >
      -This is usually a narrow band containing a menu-  
  </div> 
  <div id="cms_content">
      <!--CONTENT-->
  </div>
  <div id="cms_bottom" >
      -A footer of some kind-
  </div>
</body>

You'll note that we give our sections IDs,  and although you can use any ID you like, or use classes instead, it's best to stick to the Mara conventions.  The items don't have to be in this order. For example you might want to place your top menu above the banner. 

The default browser display of this markup, with no css.

This will work as is, but all of the sections will be single lines (the height of the text they contain) and there will be nothing to distinguish one section from another.  So, we're displaying our content perfectly well, it's just that it ain't pretty. To improve on this situation we need to resort to some css.  

The css goes in a separate file, theme.css.  You don't need to include any code to invoke theme.css, it will automatically be invoked provided it's in the theme folder. 

Unsurprisingly, in theme.css we find ID references to match the page sections we've created in theme.php.  We also find two other references, html and body. These are effectively outer containers for the whole of the page.

html{

}
body {
 background: white;
 color:black; 
 min-height:1000px;
 font-family: Arial, sans-serif; 
}
#cms_banner {
 background: blue; 
 color:white; 
 min-height:200px;
}

#cms_top {
  background:black; 
  color:white;
  min-height:70px;
}
#cms_content {
 min-height:400px;
}
#cms_bottom {
 background: #444;
 color:white;
 min-height:100px;
}

The main things we do here are to set text and background colours for the various zones, and to set minimum sizes for some. 

Since css is inherited, we don't need to set parameters for zones which will use the same setting as the body.

This is starting to look more acceptable.  The sections use different colours, and their heights have been determined. The alignment of the text is still the default though. We'll maybe need to look at that once we've decided what content to include. We've also changed to a sans serif font for small text. Always a good idea, serif text is hard to read in small sizes. In this theme we'll stick to using 'Web safe' fonts which should display OK on all computers. In more advanced themes we'll show you how to use custom soft fonts so your text can be any style you like.

Next, let's add some content.

Notes:

Good practice dictates that if we declare a background colour, then we also declare the text colour.  You'll note that we also set a default pair of background and text colours for the whole page, under the body properties. Declaring singleton text colours or backgrounds is a gotcha which frequently leads to unreadable white-on-white- or black-on-black text. Remember, the visitor's computer might not be using the default Windows colourscheme, so what seems OK on yours might not be OK on other computers. 

The danger with divs

Another gotcha to beware of is to never fix the height or width of a div.  If you do, and it contains content too large for the available space, then a strange thing happens. You might expect that the div would expand to hold the content.. or maybe that the content would be wrapped to fit.  In fact neither happens, and instead the content does a passable imitation of Superman punching his way out of a building through the wall. This situation leaves you with, well, one hell of a mess, and it's to be avoided at all costs.


Antidisestablishmentarianism.

Kapow. Div-man strikes again!

Straight through the container wall and over the adjoining text. If you don't want this to happen, avoid setting fixed widths or heights on block containers such as divs. Even if doing so has no immediate bad effect, sooner or later someone will enter some overly long word or other.. and this will happen.

 

  You can set the overflow and text-overflow properties to change this behaviour so either the text is either cropped or a scrollbar is added. Neither is very satisfactory though.

  If you want  to prevent the div from being too small vertically, use min-height instead.  (min-width has no effect since a div with unspecified width will fill the available space regardless) 

Antidisestablishmentarianism.

 

The div now expands if it's too small.

Alternatively, and a better solution, change the display property for any fixed-width div to something other than block, such as table or flex. Here, the div expands to accommodate text which won't fit. In other words it's 'smart' enough to realize that the width you specified cannot always be applied. Which, I think, most people would agree is what should happen. Only by default, it doesn't.