You are here: Documentation
Personal tools
Views

User Handbook/Getting Started/Designer/Customizing Templates

From CMSMS

Table of Contents

This page in: English - Deutsch - Français - Svenska - Русский - Norsk - Polski - Nederlands - Español - Lietuvių

Customizing the default templates

All the default templates that come with CMS Made Simple are more or less made of the same HTML code. The only thing differing is what kind of menu that is used and if there are one or more content blocks. The rest is styled purely through CSS.

This is because the CMS Made Simple default templates do not use tables. Instead <div> tags are used to define each block of content in the page. The position and style for each of these div blocks can then be customized through CSS.

On this page we will walk through the template, piece by piece, to explain what it is and what you may want to change.

The style and appearance is then modified in the stylesheets that are attached to each template.

Declaring DOCTYPE and specifying language 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

This is the DOCTYPE (document type declaration). It tells browsers what version of (X)HTML that your document is using, so that it can interpret it correctly. It is also necessary for validation tools to check the syntax of your code.

The first two lines can be left unchanged. What you may need to change is the language declaration in the <HTML> tag. That's where the language of the content of your page is specified. Change "en" to the two-letter code for your language of preference.

Read more about DOCTYPE at W3C.

Codes for the Representation of Names of Languages

Head tags 

<head>

<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>

What is between the <title> tags is what appears for example in your browser's title bar. {sitename} is defined in Site Admin->Global Settings. If you also want the name of each page to be displayed, you can add the tag {title}. The {title} tag is a placeholder that is replaced by the name of the current page that you have entered as title for the page (Content -> Pages -> Edit/Add page).

{stylesheet} is a tag that links to all stylesheets that you have attached to a template. It means that you only have to add this tag once and all attached stylesheets will be linked to.

{metadata} will hold all metadata you set in Site Admin->Global Settings for global metadata, as well as additional metadata you can set per page in the Options tab in Content -> Pages -> Edit/Add page

The page wrapper 

<body>

<div id="pagewrapper">

This is the beginning of the div block that the entire page is wrapped in. In the stylesheet you can set the width of the page, if it is to be centered and so on.

How to customize it:

  • Look for div#pagewrapper in one of the stylesheets with a name beginning by Layout.

The header 

   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />

The header of the page is where you find the CMS Made Simple logo. As you can see there is no information in the template, but all the content of the header is set by CSS. This makes for very clean HTML code. However, if you like you can also add text or other information that you want to appear in the header, directly in the template.

How to customize it:

  • Look for div#header and div#header h1 a (for the link) in one of the stylesheets with a name beginning by Layout. That's where you set the background color, logo, height etc.

Breadcrumbs 

   <!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   <!-- End Breadcrumbs -->

The breadcrumbs are links to show the visitor what page that he/she currently is on and what the hierarchy of that page is. It can look something like this: Home >> Section page >> Sub-section page

In CMS Made Simple there is a tag that automatically adds the breadcrumbs for each page: {breadcrumbs}. delimiter="&raquo;" means that » is used as the delimiter between each level.

initial='1' means that the breadcrumbs starts with a delimiter. If left out or set to '0', no delimiter will be displayed before the first level.

How to customize it:

  • Look for div.breadcrumbs in one of the stylesheets with a name beginning by Layout. There you can customize the font, background etc.
  • To read about how to use the {breadrumbs} tag, click the Help link for Breadcrumbs in Extensions -> Tags in the Admin Panel.


The rest of the default template is currently being updated to the latest version.

Note: There is a wonderful Flash video of how to convert a template to a CMSMS template here: http://cmsmadesimple.org/uploads/media/mint_chocolate.htm


This page in: English - Deutsch - Français - Svenska - Русский - Norsk - Polski - Nederlands - Español - Lietuvių

Retrieved from "http://wiki.cmsmadesimple.org/index.php/User_Handbook/Getting_Started/Designer/Customizing_Templates"