by IWR Consultancy

Sample Themes

In this release, we've reduced the number of sample themes. The focus here is on demonstrating how to build the most popular page layouts, and this is better achieved by providing just a few well-documented samples. The structure of Mara themes is in any case really easy to understand when compared with some other Web frontends. If you know how to use CSS, then you can get to work rightaway on creating something which is your own personal expression, rather than a clone of someone else's work! That is the intention, and that's why we don't  provide you with ten thousand premade themes.


The standard theme for the official site, this is a highly responsive, three-column layout which adapts to available screen space. On desktops a lefthand menu is used, this being generally more informative as to what content is available. On narrower screens this reverts to being a top dropdown menu. As we've mentioned before, this is a click-based menu rather than hover-based, which better suits touchscreens. A righthand bar is optionally available for display on very wide screens, which could contain permalinks, additional logos, sponsored advertising or the like, depending on your site's requirements. 

The css for this theme is necessarily quite complex, but offers a good illustration as to how to implement the more advanced capabilities of Mara. A fair amount of branding is present,  which will need to be replaced if using this as the basis for your own site. However, it was felt that a highly graphical theme such as this could not be satisfactorily presented minus the graphics... so that's why they've been retained.

If you adjust your browser's window width you'll see how the additional features are handled in order to keep within available space. We do this using @media statements rather than by floating, since this is a more predictable approach where pages may contain varied content. The design minimum width is 400px, which should cover even the smaller handheld devices. 

Probably not the easiest to base a first-time Mara site on owing to its relative complexity, but the code in this theme does serve as a good 'howto' on deploying the more advanced capabilities of the CMS.


A single column layout with a top dropdown menu, this is typical of the majority of business websites. With a  single column, making this kind of layout responsive to screen width is comparatively simple, and in fact no floating or complex css is needed to achieve this. If you take a look at theme.php and theme.css, you might be pleasantly surprised at just how little is in there.

Intentionally a little Spartan in apearance, since we aim to make this a straightforward, clean-looking theme to start building your own site with. We have given the dropdown menu a few interesting features like dynamic pointers (to distinguish static links from dropdowns)  which you can keep or remove as you wish. 


We put this one together on the observation of another webmaster that it would be handy to have a theme that just displays the page with no frills. This one has applications for reading pages on handheld devices, and for partially sighted individuals who wish to use a textreader, or to use the browser's text enlargement feature unhindered by graphical embellishments. To keep things as uncluttered as possible there are no menus. Instead, there's just a pair of links, one that takes you to the site map, and one that returns you to the homepage, viewed in the default theme. 


We've included this as we felt it was one of the better-looking of the early designs. It's been made width-responsive though, whereas the v5 implementation was fixed-width. It's a good illustration of how to make a 'dark theme' in Mara. Goths, take note - black backgrounds, no problem here. 


An example of a recent trend in webdesign for having a fullscreen image with a few overlaid items of text, as the site's frontpage. You would probably not want to have this style of presentation on every page of your site, so the best way to apply this in practice is to name your derivative theme with a leading period, and reference it in the homepage meta tags. This design relies on features of the most recent browsers such as background resizing, so it does not accommodate legacy equipment.


A straightforward blog theme is included, in the '.blog' theme folder. (Note the leading dot)  If you want to have a blog section in your site, then just put some content pages into the blog folder. Set their meta cms_theme tags to '.blog' and they become blog posts.

The pages in the blog folder are listed in date order on the blog frontpage. This order can be changed by setting meta tags.

The .blog theme  has been made more responsive than in previous releases. To keep things straightforward we've used a simple article list, but if you check the instructions on you'll see that some quite sophisticated layouts are possible, such as blogs with a full width flyer for the latest article, caption images for the next three, text links for the rest.

The .blog2 theme demonstrates a more sophisticated blog index page layout.

To see the blog in action, just load the sample page, which is blog/index.php

Powered by Mara cms