P. 1
Custom Layout

Custom Layout

Views: 70|Likes:
Published by JoW Rocks

More info:

Published by: JoW Rocks on Oct 05, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/11/2014

pdf

text

original

CommonSense CMS Layout Customization Manual

Page 1 of 3

CommonSense CMS Layout Customization Manual
Copyright © 2006 Michal Pleban

Table of Contents
Introduction........................................................................................................................... 1 Getting started...................................................................................................................... 1 Understanding CMS special variables.................................................................................. 2 Applying a theme to a site.................................................................................................... 3

Introduction
CommonSense CMS allows easy site layout customization by the means of layout themes. Although the script comes with several themes preinstalled, there often exists the need to adopt the site to a custom layout (for example, to a layout of existing site). This manual describes steps necessary to create a new theme using any common HTML editor, and apply it to a website powered by CommonSense CMS.

Getting started
Layout themes in CommonSense CMS are stored in directory themes. Each theme is stored in its own subdirectory, for example themes/Royal_Blue. A special file, called theme.inc, must be present in this subdirectory; it dictates how the theme actually looks like. Other files placed in this directory can be style sheets, images etc. Let's suppose you want to create a theme named “My custom theme”. Then you should create the following directory structure somewhere on your disk: themes\My_custom_theme Suppose you have a CSS file and some graphics files you would like to use in your theme. You should put them in this directory, like this: themes\My_custom_theme themes\My_custom_theme\styles.css themes\My_custom_theme\image1.gif themes\My_custom_theme\image2.gif Now, to be able to edit your theme in your HTML editor, create a file theme.htm and put it in the main directory, like this: theme.htm themes\My_custom_theme themes\My_custom_theme\styles.css themes\My_custom_theme\image1.gif themes\My_custom_theme\image2.gif Open the theme.htm file in your HTML editor, and you are now ready to start editing your theme.

Copyright © 2006 Michal Pleban. All rights reserved.

CommonSense CMS Layout Customization Manual

Page 2 of 3

Understanding CMS special variables
The theme file is just a static HTML file, which is filled by actual content by the CMS script. Therefore, it must contain several special texts (hereafter called variables), which tell the script where to place the logo, page text etc. Without them, the script would not know where to place the page elements, and the script would be unusable. These special variables have always the form ${name}. You need to place appropriate variables in your HTML page, just as normal page text. On all the pages generated by the script, they will be replaced by appropriate page elements. There are several variables which can be used. Here is a listing of variables you can use: ${title} – Page title (should be used as a page title, and as a header on the page). ${logo} – Upper part of the page, containing logo and search box. ${bar} – Google AdSense links bar (728 pixels wide). ${bar2} – Google AdSense links bar (468 pixels wide). ${links} – Links to custom HTML pages created in admin panel (aligned horizontally). ${links2} – Links to custom HTML pages created in admin panel (aligned vertically). ${top} – HTML code snippets entered in the admin panel for the top part of the page. ${left} – Left part of the page, containing large Google AdSense ad block. ${nav} – Navigation path from the site. ${text} – Actual text of the page (article, category listing etc). ${right} – Right part of the page, containing random article links, RSS feed etc. Placing of these variables depends on how you want your page to look like. Here's how these variables are placed in two different layouts:

${logo} ${bar} ${links} ${top} ${title} ${nav} ${text}

${logo} ${bar2} ${right} ${title} ${nav} ${text}

${links2} ${left}

${left}

${right}

Layout of variables forClassic Gray theme

Layout of variables for Royal Blue theme

Copyright © 2006 Michal Pleban. All rights reserved.

CommonSense CMS Layout Customization Manual

Page 3 of 3

Applying a theme to a site
To be able to use your theme on your CommonSense CMS site, you need to rename your HTML file as theme.inc and put it in the subdirectory where all other theme files are stored: themes\My_custom_theme themes\My_custom_theme\styles.css themes\My_custom_theme\image1.gif themes\My_custom_theme\image2.gif themes\My_custom_theme\theme.inc Now you can upload all your files via FTP server, to the same place where you have CommonSense CMS installed. After uploading the files, the theme should show up along with other themes in the admin panel. To apply the theme to your website, simply login to your admin panel, and click the Theme icon. Your theme should show up on the available themes list. Select it from the drop-down list and click Save.

Copyright © 2006 Michal Pleban. All rights reserved.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->