1. Create a Theme
Prev | Chapter 4. Common Tasks | Next

## 1. Create a Theme

One of the essential features of a CMS is the ability to apply a common look & feel to many pages, adding the graphics and some other components like the navigation menu. In MeshCMS you can achieve this result by using a theme. There is a special directory in MeshCMS whose default path is `/meshcms/themes`. A theme is a subdirectory of `/meshcms/themes` that contains all the elements needed by the theme itself. Those elements are:

- the theme main file: a JSP page named `main.jsp` that defines the common part of the pages and where the variable parts must be inserted;

- the theme CSS: a CSS file named `main.css` that has the only special feature of being automatically linked from the page if the defaultcss custom tag is used. This should always be done, since using that syntax, the CSS will also be sent to the wysiwyg editor to display the page body being edited;

- an additional CSS for MeshCMS specific styles (page editor and modules), named `meshcms.css`. If this CSS is not found in the theme, the default one will be used. You can override it if you want to change the appearance of MeshCMS components (the default is located in the `/meshcms/admin/theme` directory);

- any other file needed by the theme: other CSS files, images, javascripts and so on. You can then use these files in your main file by inserting the themepath tag that will be replaced with the right path to the theme directory.

You can assign a theme to a page using the Page Manager tool in the Control Panel. There's no need to assign a theme to each page: if a page has no theme, the theme of the parent will be used. For example, if `www.yoursite.com/apage.html` has no theme, it will look like `www.yoursite.com`. In many cases a theme is assigned to the home page and that's all.

### 1.1. The Theme Main File

The main file of a theme is a JSP file that will include component of the page being shown:

    <%@ taglib uri="meshcms-taglib" prefix="mesh" %>

    <html>
     <head>
      <title><mesh:pagetitle /></title>
      <mesh:defaultcss />
      <mesh:pagehead />
     </head>

     <body>
      <mesh:editor>
       <mesh:pagebody />
      </mesh:editor>
     </body>
    </html>

This theme file is very basic, but it works: when applied to the sample MeshCMS home page, it looks this way:

The same basic theme can be used to edit the page:

Now you know that a basic theme isn't complicated at all. In fact, it is a normal HTML page (which you can create with your favorite editor), that includes some custom tags that will be replaced by MeshCMS with the contents of the page. This is how MeshCMS translates the page above:

    <html>
     <head>
      <title>Home Page</title>
      <link type="text/css" rel="stylesheet" href="/meshcms/themes/bare/main.css" />
      <link type="text/css" rel="stylesheet" href="/meshcms/admin/theme/meshcms.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     </head>

     <body>
      <p>Welcome to MeshCMS 2.0. Here is a list ...</p>
      ...
     </body>
    </html>

When you create a theme, you should create a normal HTML page along with its own CSS file and images and store all files in a directory. Use some text placeholder to point out where to put page components. For example, write [TITLE] where you expect to see the title of the page, [SITE MENU] where you want to see the menu, [BODY] where the text of the page should be located and so on. Please note that the notation with square brackets has nothing special. They are just placeholders. You might also use the "lorem ipsum" text instead of [BODY]. Your file might look like this one:

This is the corresponding HTML code:

    <html>

    <head>
      <title>[TITLE]</title>
    </head>

    <body style="margin: 0px;">
    <table width="770" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2" valign="bottom" style="background: url(flowers.jpg) no-repeat; ¶
         height: 120px; padding: 10px; font-size: 22px;">[TITLE]</td>
      </tr>
      <tr>
        <td bgcolor="#E2E0C9">
        <table border="0" align="center" cellpadding="3" cellspacing="0">
          <tr><th>Site Menu:</th></tr>
          <tr><td>[SITE MENU]</td></tr>
          <tr><th>MeshCMS Menu:</th></tr>
          <tr><td>[MESHCMS MENU]</td></tr>
        </table>
        </td>
        <td><table border="0" cellspacing="0" cellpadding="5">
          <tr><td>[BREADCRUMBS]</td></tr>
          <tr><td>[BODY]</td></tr>
        </table></td>
      </tr>
      <tr align="center">
        <td colspan="2" bgcolor="#DDBC00">
          Powered by <a href="http://www.cromoteca.com/meshcms/">MeshCMS</a>
        </td>
      </tr>
    </table>
    </body>

    </html>

When you are happy with your page, open it with a source code editor. Replace:

- [TITLE] with `<mesh:pagetitle />`

- [SITE MENU] with `<mesh:simplemenu />`

- [MESHCMS MENU] with `<mesh:adminmenu />`

- [BREADCRUMBS] with `<mesh:breadcrumbs />`

- [BODY] with `<mesh:pagebody />`

There is a link to an image in the file: you must add `<mesh:themepath />` before the image path so it will be found correctly. `url(flowers.jpg)` becomes `url(<mesh:themepath />/flowers.jpg)`.

Then add this line at the beginning of your file:

    <%@ taglib uri="meshcms-taglib" prefix="mesh" %>

Save your file and name it `main.jsp`. The CSS must be named `main.css` and must be located in the same directory. This directory must be located in the `/meshcms/themes` directory in your site, and the name of the directory will be used as name of the theme itself. All images and other files must be located in the same directory. You can use subdirectories, but then you need to write paths accordingly: for example, if you put all images in a subdirectory called `images`, you will use `url(<mesh:themepath />/images/flowers.jpg)` in the example above.

When your brand new decorator is available, reopen the home page of your web site and your new look & feel should now be used to display the page:

    <%@ taglib uri="meshcms-taglib" prefix="mesh" %>

    <html>

    <head>
      <title><mesh:pagetitle /></title>
    </head>

    <body style="margin: 0px;">
    <table width="770" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2" valign="bottom" style="background: ¶
         url(<mesh:themepath />/flowers.jpg) no-repeat; height: 120px; ¶
         padding: 10px; font-size: 22px;"><mesh:pagetitle /></td>
      </tr>
      <tr>
        <td bgcolor="#E2E0C9">
        <table border="0" align="center"cellpadding="3" cellspacing="0">
          <tr><th>Site Menu:</th></tr>
          <tr><td><mesh:simplemenu /></td></tr>
          <tr><th>MeshCMS Menu:</th></tr>
          <tr><td><mesh:adminmenu separator="<br />" /></td></tr>
        </table>
        </td>
        <td><table border="0" cellspacing="0" cellpadding="5">
          <tr><td><mesh:breadcrumbs /></td></tr>
          <tr><td><mesh:pagebody /></td></tr>
        </table></td>
      </tr>
      <tr align="center">
        <td colspan="2" bgcolor="#DDBC00">
          Powered by <a href="http://www.cromoteca.com/meshcms/">MeshCMS</a>
        </td>
      </tr>
    </table>
    </body>

    </html>

There are other tags that you must add in your decorator:

- `<mesh:pagehead />` and `<mesh:defaultcss />` go inside the `<head>` tag of your file to include headers and CSS;

- `<mesh:editor>...</mesh:editor>` must enclose all the contents of the `<body>` tag;

- `<mesh:setlocale />` to define the locale of the pages that will use the theme (optional);

- you will probably want to add one or more modules; otherwise you can't take advantage of available modules in your pages;

- other tags could be useful in some cases.

After these other modifications, you should get this source code:

    <%@ taglib uri="meshcms-taglib" prefix="mesh" %>
    <mesh:setlocale value="en" />

    <html>

    <head>
      <title>
        <mesh:pagetitle />
        <mesh:pagehead />
        <mesh:defaultcss />
      </title>
    </head>

    <body style="margin: 0px;"><mesh:editor>
    <table width="770" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2" valign="bottom" style="background: ¶
         url(<mesh:themepath />/flowers.jpg) no-repeat; height: 120px; ¶
         padding: 10px; font-size: 22px;"><mesh:pagetitle /></td>
      </tr>
      <tr>
        <td bgcolor="#E2E0C9">
        <table border="0" align="center" cellpadding="3" cellspacing="0">
          <tr><th>Site Menu:</th></tr>
          <tr><td><mesh:simplemenu /></td></tr>
          <tr><th>MeshCMS Menu:</th></tr>
          <tr><td><mesh:adminmenu separator="<br />" /></td></tr>
        </table>
        </td>
        <td><table border="0" cellspacing="0" cellpadding="5">
          <tr><td><mesh:breadcrumbs /></td></tr>
          <tr><td><mesh:pagebody /></td></tr>
        </table></td>
      </tr>
      <tr align="center">
        <td colspan="2" bgcolor="#DDBC00">
          Powered by <a href="http://www.cromoteca.com/meshcms/">MeshCMS</a>
        </td>
      </tr>
    </table>
    </mesh:editor></body>

    </html>

Prev | Up | Next
Chapter 4. Common Tasks | Home | 2. Edit a Page