CMS Template

From Deep Thought

Jump to: navigation, search

Contents

[edit]

Creating A Page Template

  1. Login as Superuser.
  2. Click "Template Manager" in the site controls menu on the left sidebar.
  3. Click the New button at the top and bottom of the templates list.
  4. Enter a name for this template, we recommend something with the format MYSITE YYYY-MM-DD
  5. In the data box enter the HTML that will define your page. (See the Basic Example below).
  6. Set the type of template, the default is "Page Template"
  7. Check off "Default Template" if this will be a default template for new pages on the website.
  8. Set Super-Admin Use Only if you want to restrict who can update this template.
  9. Click the "Save" button at the top or bottom of the template entry form
[edit]

Special Template Codes

The templates for the Cyber Sprocket CMS contain normal HTML plus special tags that are marked by enclosing them in curly braces. For example {CMS FIELD='myfield'}.

[edit]

ADMIN_BODY

The ADMIN_BODY tag determines where on the page the initial edit bar will appear. Normally this is put immediately after the <body> HTML tag, but it can go anywhere on the page. Without this tag on a page template you would need to manual enter the long URL string with the proper settings in order to edit the content of a page.

ADMIN_BODY is recommended for every page template you create.

This sister tag for ADMIN_HEAD is also required.

[edit]

ADMIN_HEAD

This is the sister tag for ADMIN_BODY. The ADMIN_HEAD tag is where the javascript code will go for managing the edit bar. Normally this appears between the <head>...</head> html tags.

[edit]

CMS FIELD

The CMS FIELD tag specifies an editable region of a page. Every region of the page that can be updated on a page-by-page basis should have at least one CMS FIELD associated with it. The name of that field is specified by the CMS FIELD tag. 

{CMS FIELD='fieldname'}
A page region is the general area of a page, i.e. the left side or the right side, as defined by your
...
HTML tags or table cells.

You do NOT need one field per paragraph as editable regions can contain zero or more blocks (see Creating A Block Template) within it.

[edit]

META_DATA

The META_DATA tag is used to display the meta tag information for the page. This usually appears in a page template within the <head>...</head> HTML tags. The meta data is derived from the page structure settings within page manager. This includes things like the "keywords" and "description" settings that you put in the page details when creating a new page via the Page Manager.

[edit]

NAV

The NAV tag is used to put an automatically generated website menu on your page. The menu can be horizontal or vertical and can contain a variety of combinations of parent, children, sibling, or uncle pages. Knowing your overall site structure and how pages relate to each other will have a big impact on the settings you define in the NAV tag.

In order to implement the NAV tag you will need to create a Nav Template and reference that template ID in your tag definition.

The NAV tag includes parameters to determine the behaviour of the menu: 

{NAV TEMPLATEID="39" PARENTS="1" UNCLES="1" SELF="1" SIBLINGS="1" CHILDREN="1"}
[edit]

TITLE

This will output the title of the page as set in the Page Manager. This normally appears between the <title>...</title> html tags within the HTML header (<head>...</head> tags).


[edit]

Examples

[edit]

Basic Page Template

Basic Example
Enlarge
Basic Example
  • Logo at the top of the page
  • Main content on the left side
  • An information column on the right side.
  • A footer with an auto-created navigation menu and copyright notice

The image shown uses the CSS referenced inside this template example to create the background shadow via an image as well as setting font styles. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		{META_DATA}
		<title>community fun and fitness | {TITLE}</title>
		<style type="text/css">
			@import '/2007-12-16.css';
		</style>
		
		{ADMIN_HEAD}
	</head>
	<body>
		{ADMIN_BODY}
		
		<div id="logo"><a href="/"><img src="/images/112007/logo.png" 
                      title="community fun and fitness" 
                      alt="community fun and fitness" /></a>
                 </div>
		<div id="content">
			
			<div class="left">
				{CMS FIELD='mainbody'}
			</div>
			<div class="right">
				{CMS FIELD="rightcolumn"}
			</div>
			
			<div class="divider"></div>
			
			<div id="nav">{NAV TEMPLATEID="39" PARENTS="1" UNCLES="1" 
                                         SELF="1" SIBLINGS="1" CHILDREN="1"} </div>
                        <div id="copyright">©2007 community fun and fitness</div>
		</div>
	</body>
</html>
[edit]

Creating A Block Template

Blocks are a pre-defined editable item that can appear within an editable region on a page template (see CMS FIELD below). A block can be a simple paragraph, and image, or a pre-formatted web form. The various block types and how they behave are defined by the block templates.

[edit]

Paragraph

  1. Login as Superuser.
  2. Click "Template Manager" in the site controls menu on the left sidebar.
  3. Click the New button at the top and bottom of the templates list.
  4. Enter a name for this template, we recommend something simple like "Paragraph"
  5. In the data box enter the HTML that will define a simple paragraph. (See the Paragraph Example below).
  6. Set the type of template to Block Template
  7. Leave default template unchecked
  8. Set Super-Admin Use Only if you want to restrict who can update this template.
  9. Click the "Save" button at the top or bottom of the template entry form
[edit]

Examples

[edit]

Basic Paragraph Template

  • A simple paragraph with 8 pixels of whitespace underneath. 
<div style="margin-bottom:8px;">
{CMS data="onlydata" editor="textarea" fieldtitle='Paragraph Text'}
</div>
[edit]

Creating A Nav Template

Nav Templates (automatic site menus) are a special beast that maybe only Craig Coffman The Original understand. Someday he may share his knowledge with us here on the wiki.

  1. Login as Superuser.
  2. Click "Template Manager" in the site controls menu on the left sidebar.
  3. Click the New button at the top and bottom of the templates list.
  4. Enter a name for this template, we recommend something simple like "Navbar"
  5. In the data box enter the super-special navigation syntax (us).
  6. Set the type of template to Nav Template
  7. Leave default template unchecked
  8. Set Super-Admin Use Only if you want to restrict who can update this template.
  9. Click the "Save" button at the top or bottom of the template entry form
[edit]

Examples

[edit]

A Nav Bar

---HEADER---
---END---

---LEVEL1---
<a href="{RELATIVE_URL}">{SHORTTITLE}</a> | 
---END---
---LEVEL1:SELECTED---
<a href="{RELATIVE_URL}">{SHORTTITLE}</a> | 
---END---

---LEVEL2---
<a href="{RELATIVE_URL}">{SHORTTITLE}</a> | 
---END---
---LEVEL2:SELECTED---
<a href="{RELATIVE_URL}">{SHORTTITLE}</a> | 
---END---

---LEVEL3---
<a href="{RELATIVE_URL}">{SHORTTITLE}</a> | 
---END---
---LEVEL3:SELECTED---
<a href="{RELATIVE_URL}">{SHORTTITLE}</a> | 
---END---

---FOOTER---
---END---
[edit]

Links

[edit]

The CMS

[edit]

How To Guides

  • CMS User's Guide - If you are the "website editor" for your company, click here.
  • CMS Template - CMS template information and examples.
  • CMS Store Administration - If you are the "manager of the webs store", click here.
  • CMS Building A New Site - How to build a brand new CMS site from a "clean slate" installation
  • CMS Installation Guide - If you are a super techno-geek responsible for installing your own private copy of the CMS on your server, click here
Retrieved from "http://www.cybersprocket.com/wiki/index.php/CMS_Template"
Personal tools
Cyber Sprocket Labs
Cyber Sprocket Tech