The theme.css file

styling the appearance of a theme for your site

The place you will likely do most customising is the theme stylesheet, theme.css. This has three main sections: Global styles which apply to standard tags, styles which apply to the various IDs and classes attached to theme divisions, and styles applying to the menus. The theme.css files in the example themes are documented, but let's take a closer look at one:

Custom fonts

Optionally, you can include custom fonts in your Mara site. These should be in .woff format, and are placed in the font/ folder of the theme. You do not of course have to do this, pages can use the traditional Web fonts.

The first section of the theme.css declares the soft fonts, using the @font-face syntax. For example:

@font-face {
    font-family: cms_sans;
    src: url('font/custom_font.woff');

The label 'cms_sans' can be anything you like so long as it is not the name of a standard font. Then, in your css you refer to this label where you would typically use 'sans-serif' 'Arial' or suchlike. It's always best to include a fallback standard Web font for browsers which don't understand soft fonts. So, on a site with custom fonts you might for example use:

#cms_content {
  font-famly:cms_sans, Arial, sans-serif;

-to make this your default font for the center page section. A point to bear in mind is that custom fonts often contain only a limited subset of unicode characters, therefore they may not be suitable for internationalised sites. Also, be aware that whilst there are many thousands of free fonts for download, not all are of acceptable quality. Some contain coding errors leading to jagged text or other grief. For a professional result, best to use reputable sources.

The global styles:

The default font for most browsers is serif, and this largely historical arrangement is very unsuitable for small text, so setting a sans serif default font is wise. It's also good practice to define the default colors. Failure to do so can cause problems such as black-on-black text on computers using special desktop themes.

BODY {color:black; background-color:#ffffff; font-family:Arial,sans-serif;  margin : 0 0 0 0}

The standard headings introduce automatic spacing, which presumably was seen as a timesaver when introduced years back, but the drawback is that using this default also means you can never have unspaced headings. Therefore, often better to remove the automatic spacing, and space the headings manually when required. Since this has a global impact on how you present your headings, you really don't want to have to change these values on an established site. So, decide now.

H1, H2, H3, H4, H5, H6 {margin-top:0px; margin-bottom:0px;}

Underlined links are so 90's, so get rid of that underline globally and add a hover effect:

A {color:#0000ff; text-decoration:none; font-weight:normal;}
A:hover {color:#00ffff;}
A img {border:none;}

You can of course apply any of these settings to the #cms_content section instead of the body if you do not want them to apply to menus, etc. But, as good practice you should always declare a default body text and background color pair. That ensures that unstyled text is never rendered invisible (white on white or black on black) by, for example, the failure of a stylesheet subsection to load. 

The content divisions

Mara defines a set  of standard IDs which should be present on most sites. You do not have to use these IDs, but using them permits several builtin functions to change the appearance of the page in response to URL parameters, which is beneficial in various circumstances.  These IDs can be attached to any suitable block-level container - div, table, paragraph or HTML5 content tag.  The actual css shown here is of course an example, you are not required to use this particular scheme.

   /* Container for whole of page. 
   Here, the page will fluidly adjust to browser window size up to 1200 pixels, 
   above which it will show a blank unused border which has the attributes of either the body tag or any outer container.
   The content will be centered in this border.  */
  margin: auto;

  /* Topmost page section, usually contains company logo, site description or the like. */

  /* Narrow horizontal bar containing top menu or quicklinks, usually in a distinct background color. */
  background: linear-gradient( #9999ff, #0000a8, #000070);
  /*  background-image:url("bar.gif"); alternative to gradient if you must support older browsers */
  background-position: left top ;

  /* Lefthand vertical bar, usually contains tree-style main menu.  
  Probably best not to put menu styling here, as it would then also apply to non-menu items in this bar. 
  You may wish to determine whether the menu must remain fixed-width or can expand laterally, and by how much. */

 /* Where the actual page content goes 
 Whether to justify paras is a matter of choice. It looks neater, but some say it has a negative impact on readability. */

  /* Optional righthand vertical bar, on some sites this contains advertising or related-content links. */

  /* The page footer. */

Remember that any images you reference here by filename alone or relative path will be in the theme folder, not the page location. That's how css works.


The menus take a certain amount of default styling from system.css. This is to ensure that they operate correctly even if there is no theme css. Thus, in theme.css you do not need to include all of the sections if you do not want to. For a description of the options, see the menu system documentation.

The 'thememenu' is not strictly a menu, by the way, but the expanding list of available themes to the right of the #cms_top section. This does not display if there is only one theme, by the way.

Other items

Any other css you need can be placed here. This may relate to your own work, or to plugins.


Powered by Mara cms