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:

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>