Site Map Mara Editing Advanced Step by step
print

The Theme - Step by Step

The banner

You might be satisfied with a textual banner, but more often  you will want to display some kind of graphic at the page top.  There are two ways of inserting a graphic, either as a foreground or background image.

The foreground image method is more universal, and will work even in very old browsers.  The background image method only works well in the latest browsers which support CSS3, however it has some advantages, notably that it's easier to specify the file to use, and you can more easily  overlay text or other images on top of the banner if you want to.

The Foreground method

The foreground method uses the well-known img tag.  A proviso here is that the tag must have a src attribute, and since this is a CMS and not a static page, the src attribute will look for the file in the folder where the page is... not where the theme is. Ideally we want the image to be in the theme folder, so it becomes part of the theme. We do this by using a bit of PHP code to tell the browser where to find the file. Like so:

<div id="cms_banner" >
    <img alt="Company logo" src='<?php echo themedir ?>maralogo500.png' class='center'>
</div>

The themedir php constant contains the path from the root of the webspace to the theme folder. It has a trailing slash so you don't need to add one. The advantage of this approach is that if you rename your theme then nothing needs updating; the change is taken care of automatically.

Gotcha: Mistakes in php code can lead to a totally blank screen. If this happens don't panic, just look for the last place you changed some php code. If you still can't spot the problem, check your server's error log. Usually it's a simple thing like a missing semicolon.

The center class is a Mara feature which allows for easy horizontal centering of images. Unfortunately there is no easy way to vertically center a foreground image in a standard div.  The best workaround is to allow the div to find its own height. If you want some space top and bottom, then use the padding css property. We'll see later that we can change the nature of the div to make vertical alignment work. For now, just accept this though.

The Background method

Making your logo a background image allows you to control its behaviour entirely from the stylesheet.  In the webpage, the container can simply be an empty div. Provided of course that the empty div can be identified in some way, in the css.  So:

theme.php:

<div id='cms_banner'>
</div>

theme.css:

#cms_banner {
  background: url('maralogo500.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-color: blue;
  background-size: auto;
  min-height: 140px;
}

In this case there is no need to specify a path, because the image is expected to be wherever the css file is.  Wherever you are... there's your logo. Oh dear.  ;)

The banner logo will be centered in both directions. Try altering the browser width and observe that the logo will look acceptable over quite a wide range of page widths. If the page is very small, the logo may be cropped at the righthand edge though. We'll look at how to avoid this happening later, when we come to address responsiveness.

We must specify a min-height. Since there is no content at all in the div, it would otherwise have zero height.  

Notes:

When making banners, the png file format is best. This provides crisp outlines, and supports transparency if required. The gif format is a satisfactory alternative. The jpg format typically used for photos is not ideal, but can be used provided that the quality is set to a high level.

If a banner contains text, it's not a good idea to shrink or expand it. Always display it at original size.

Backgrounds will, by default, start at top left and repeat across the page if smaller than the container. This a legacy from the early days of the Web, and is really not very appropriate for today's uses. That is why we need so many additional statements to make the background behave as we want.

Artists are likely to supply logos in tiff format. This format is unsuitable for use on the Web as is.  Conversion to png is relatively straightforward though.