You are here: Documentation
Personal tools
Views

FAQ/Layout and Design/Getting Started

From CMSMS

This page in: English - Deutsch - Français - Svenska - Русский - Norsk - Polski - Nederlands - Español - Lietuvių

Contents

Getting Started

This page describes common changes you're likely to want to make to your default installation of CMSMS. Its a quick and dirty guide, not meant to replace the excellent User Handbook design guide pages. Specifically, it tells you how to change:

  • modify the page title (i.e. <title> tags)
  • the top left hand side logo
  • choose your own font face, weight and size
  • the background color and font colours
  • change the menu colors to match


Some things are purposefully kept simple to get you going fast, but where available it will include links to more information. This guide assumes that you want to use the same general format of the sample pages (e.g. a 'main page' surrounded by a grey border that uses CSS styles for menus). If you have your own template and CSS already, then you don't really need this guide.

First, Save the Originals

Fight the urge to go right into the files and start changing them randomnly. This works well right up until you modify something critical and then can't work out how to get back to the original values. On the other hand, it is preferable to change the original files since there is a lot of integration between the templates and the styles which can make it hard to make completely new templates.

You can quickly make backup copies of all the templates and styles by:

  1. go to Layout -> Templates
  2. for each template in turn, click on the 'copy' icon on the far right side (between the yellow icon and the checkbox)
  3. when it asks for the new name, use Z oldname, e.g. Z Bulletmenu Vert 1 col. This causes the saved templates to sort in the same order as the original and pushes them out of the way to the bottom of the list
  4. go to Layout -> Stylesheets
  5. repeat the same for all stylesheets. Yes, this is tedious (Is there a better way using the Template manager?')


Note that the resulting copies aren't directly usable, for example because the Z templates are not hooked up to the Z stylesheets.

Change the Title Bar text

The default Title Bar text (i.e. as found in the <title> tags in the HTML header) is stored in each template as literal text. For example in the CSSMenu Vert 1 col template this is near the top: 

<!-- Type the title of your site here -->
<title>CMS Made Simple Demo - {title}</title>

You can change this to suit your own website by simply changing it. And then repeat that for every template. However, if you're going to change each template, you could instead use a similar mechanism used for the footer text, and instead put the title into a Global Content Block. Do this by:

  1. click on Content -> Global Content Blocks
  2. Click on Add Global Content Block
  3. Enter a name for the block, e.g. TitleText
  4. Enter the title you wish, without any formatting. E.g. 'Super Widgets'
  5. Click Submit to save

Now edit each template in turn, replacing the above text with: 

<!-- Type the title of your site here -->
<title>{global_content name='TitleText'} - {title}</title>

Next time you want to change your title, simply modify the TitleText Global Content Block and all your pages will be immediately updated.

Modify the Logo

See Header Images for simplest possible change - switching the default CMS graphic - as well as more complex arrangements.

Changing Colours

Adjusting the colours from the default can be a little daunting and requires a lot of trial and error if you're not a CSS guru. This is a quick guide to some of the more common changes.

Most colours are set in the stylesheet Colours. Here is the default version, but with comments added to explain what they affect. Note that a page has two main areas: the outside 'frame' area which is typically a neutral grey colour, and the content area that has the actual page contents. 

/* Layout sections */
	body {
		background: #ccc;  /* background of the area outside the content page */
		color: #333;       /* color of most text in content page (not menus or headings) */
		}
		
	div#pagewrapper {
		border: 1px solid #000;   /* the thin border that frames the page content */
		background: #fff;         /* background color of the content page */
	    }
		
	div#header {
		color: #fff;               /* header text colour */
		background-color: #BF8D5A; /* header background colour */
		}
		
	div#footer {
		color: #fff;               /* footer text colour */
		background-color: #385C72; /* footer background colour */
		}
		
/* Links */		
	a,
	a:link 
	a:active {
		color: #385C72;
	}
	a:visited {
		color: #E7D3AB;
	}

/* Headings */	
	h1, h2, h3, h4, h5, h6 {
		color: #000;
	}

Note that div#header background-color is not included in the standard template. The a:visited and a:active link colours are also listed separately, in case you like to give your visitors information about where they've already clicked.

If you want to make the individual page sections blend into each other, set the body background, div#pagewrapper background, div@header background-color and div#footer background-color all to the same value, and remove the border attribute from div#pagewrapper.

Retrieved from "http://wiki.cmsmadesimple.org/index.php/FAQ/Layout_and_Design/Getting_Started"