To understand how this works I have created a simple template. It is based on the default template in the installation.
Code: Select all
<!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" >
<head>
<title>My page - {title}</title>
{stylesheet}
</head>
</__body>
<!-- A div for the menu -->
<div class="leftsidebar">
<div class="icons">
<p><img src="mylogo.gif" alt="My logo" /></p>
</div>
{cms_module module='phplayers'}
</div>
<!-- A div for the content -->
<div class="thebody">
<div class="heading">{title}</div>
<p class="breadcrumbs">{breadcrumbs}</p>
{content}
</div>
<!-- A div for the footer -->
<div class="thebody">
<div class="bottom"><p>This is my footer.</p></div>
</div>
<__body>
</__html>
This looks like plain HTML except for some tags inbetween. CMSMS will replace the tags with meaningful content in the generated pages.
The meaning of the tags are mostly self-documenting, but here are a few directions:
- {title} - will be replaced by the title of the content (You can set title when creating content pages).
- {stylesheet} - links in the css in the textarea below the template. If you forget this your page will appear without styles. You can skip this tag and link in an external stylesheet with a normal tag in the header.
- {cms_module module='phplayers'} - This is one of several menu alternatives. It will be replaced by a tree representing your content. The output of other modules can be added with tags like this.
- {breadcrumbs} - Will be replaced by a path to the selected content.
- {content} Will be replaced by the real content of the selected page.
The list of available tags is not maintained at the moment.
- Some tags derive from the core of the system, like {title}, {content} etc.
- Some are from Tags extensions. Look in their help files. (Extensions -> Tags)
- Some are from User defined Tags. Just insert their names like this {userdefinedtag}
- Some are from Modules. Look in their help files. (Extensions -> Modules)
You will see that you can use parameters to alter the functionality of many of the tags like this:
{tagname parameter='value'}
I've not included any CSS here. You can experiement with the CSS coming with the default template. (Layout -> Templates).
If you want to use a nice web page as a template, do something like this:
View the source of the nice page. Look for the structural elements (e.g divs or tables). Remove everything else and replace with the tags you want.
If a stylesheet is linked in in the header, you have to find its source (look in the ). Include stylesheets with your template as described above, or upload it as separate file and link in.
Finished!
Some final remarks:
The menu part is probably the most difficult to reuse from another page. However, why would you want it to be the same anyway?
Use the things you like, and make your own improvements.
If you think Positioning is difficult with CSS you can try to use tables and insert your tags wherever you want. (Some purists around does not appreciate this .-), but it will probable give you a quick result, so don't bother to much at the moment. You can change it later when you get more experience with CMSMS and CSS).
Try out different CMSMS menus and styles. (You might find some of the other menus easier to work with)
Take a look at the CMS Show off section
http://forum.cmsmadesimple.org/index.php/board,5.0.html to see what others have done with CMSMS.
There are more plugins and modules available from:
http://wiki.cmsmadesimple.org/ and
http://cmsmodules.com/
Good luck!