Site Map Mara Editing Advanced Step by step
print

The Theme - Step by Step

The head section

As mentioned, the <head> of the page sent to the browser consists mainly of the theme.php head section, plus a few items from the selected page's head. It's not obligatory to have a head section, but in most cases you will want one to cover various items which pertain to searchengines, character sets, etc.

<head>
  <title>Our Website</title>
  <meta name="Author" content="">

  <meta name="Generator" content="Mara CMS">
  <link rel="icon" href="<?php echo themedir ?>web.ico"> 
  <meta http-equiv="X-UA-Compatible" content="IE=11" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php include_once plugin('menu'); ?>
</head>

The first two items, you'll want to adjust to suit your site. The title will be prepended to the title on a specific page. So for example your browser's title bar might show 'Our Website :: Page One' or 'Our Website :: Page Two' - If you don't want a prepended title, then just leave the theme title blank. This is a handy feature though, as it allows you to name the site in the title without having to hardcode this into each page.

You'll also need to create a web.ico file. This is the little logo shown in the URL bar of some browsers.

The statements below the space are unlikely to need changing on a straightforward site.

 

Notes (for those interested in the details)

X-UA-Compatible is important. It prevents IE11 going into 'Intranet mode' and displaying pages as if it were IE7.  If you've used any CSS3 and this happens, the result will be an unholy mess. Some sources say this meta should be first in the head section, but my tests show that it doesn't make any odds.

The Content-Type (character set) declaration is important, and must match the page content.  Most sites use UTF-8 these days, but some pages may use windows-1251. If this doesn't match the content the effects may be worse than text just not displaying correctly. For example, links to local webpages or files may not work.

Viewport .. Well, Google says this tag is necessary for 'responsiveness' compliance, but I'm not sure it actually makes any difference when it's set to 1.0 anyway.  The browser should use a scaling of 1.0 by default so why is this needed? Heaven knows. Probably best to keep it in though.

We've already mentioned that some plugins need to be declared in the head section. You can also declare any javascript libraries or the like that pages will use here. It's worth noting that they cannot be declared in the page head section, they MUST be in the theme head, or the page body. So if you want to use jQuery, Gridlex or the like, declare them here. (Mara does not load anything of the kind in visitor mode by the way, so no conflicts should arise. )

You'll note that you don't need to declare the system or theme css and javascript files. Nor do you need to declare any plugin.js or plugin.css files in plugins, the single plugin declaration takes care of these too.

One final point, Mara uses HTML5 as its native document type, and you don't need to declare this. If you wanted to use an earlier document type though, you declare this with a meta tag. See the advanced section for details.