Frequently Asked Questions and Answers - Part 1

• 1
  • 1a
  • 1b
    • 1bi
• 2
  • 2a
    • 2ai

Every CMS has its own way of handling Templates and Styles. This FAQ contains common questions and answers, especially related to the default installation of CMS Made Simple and the questions that arise when you start using it. Some material in the FAQ should arguably be in the manual and vice versa. Feel free to add to the FAQ any material you find appearing frequently in the forum.

How do i set set debug mode

Getting errors in the Admin Console? This page gives you answers to the some common problems!

To enable debug mode, edit the config.php file in your installation root, and change

   
  $config['debug'] = false
  to
  $config['debug'] = true

Where are my server logs

For access to your server logs you must ask to your host provider.

Position and display tools depend of server configuration or control panel available.

I see no content below the Tabs in module xxxxx

This usually indicates an error of some sort, usually memory errors or a corrupt file or something. You should check your httpd error logs, or sometimes, if error display is turned on, view the page source and look for notices and errors in the source.

File could not be uploaded. Permissions problem?

If you're trying to upload an image, most likely you just need to chmod 777 uploads/images. This should fix your problem by making the folder world writable.

How To Change the Header (Logo) Image

The image in the header is specified in the Layout stylesheet that is used by all the templates. You can change the image by:

• First upload a new image by going to Content/Image Manager. Then click Browse to locate the new image on your computer and then Save to upload it to the website. Make sure the new image filename does not contain spaces (rename it first if need be).
• Go to Layout/Templates and click the CSS icon for the template you want to change. The Current Associations page shows the Stylesheets this Template is using. Remember the name (something like Layout: Top menu + 2 columns.
• Then go to Layout/Stylesheets and click on the stylesheet you remembered in the previous step.
• Scroll down to find the section shown below and change the filename to match your new file. Do not add any quotation marks to the line.
• Also modify the height and width to match your uploaded image (i.e. from 80px and 198px as shown). Note that the height needs to be changed in two places:

  div#header {
     height: 80px; /* adjust according your image size */
     background: #385C72;           
  }

  div#header h1 a {
  /* you can set your own image here */
     background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px; 
     display: block; 
     height: 80px;         /* adjust according your image size */
     text-indent: -999em;  /* this hides the text */
     text-decoration:none; /* old firefox would have shown  underline*/
  }                        /*  for the link, this explicitly hides it*/

Click submit to save your changes to the stylesheet and then browse the site to see your new header image.

How do i get the Menu Bar over the Header Image

If you want to make your main menu bar appear over, or next to, a main header image, this forum post describes how. An excerpt:

You can get the menu to appear beside the logo by playing around with the margins and padding in #top-nav and #menu_horiz, for example try margin-top: -50px; and margin-left: 250px;

Also you can adjust the width of #menu_horiz and float it to the right for some other options.

How do i get two Images in the Header

Following is one technique for having a header containing two images, one on the left and the other on the right (Adapted from the forum). What you want is a 'liquid' / 'stretchy' page so you need to do most of it in '%'.

  <div id="header">
  <div id="left">
  </div>
  <div id="right">
  </div>

  #header{width:**%}
  #left{float:left;width:**;height:**;margin:**;padding:**;}
  #right{float:right; bla bla bla}

The widths for left & right can be **px or **%, margins can be same: px or %. You may have to futz around for IE.

How can i install a Development Environment on my PC (1)

See Install on Local Windows PC

How can i install a Development Environment on my PC (2)

How to set up a Development Enviroment on your PC, so that you can try out CMSMS offline.

The simplest way is to downloade a server package, for instance XAMPP from apachefriends. XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start.

NOTES

• Before you try to apply .htaccess for Pretty URLS, you might want to enable mod_rewrite in the file apache/conf/httpd.conf. Uncomment this codeline, by removing the #:

#LoadModule rewrite_module modules/mod_rewrite.so

• Make sure to save the .htaccess file in ANSI format, not UTF-8.

How to Change the Width of Your Site

The default template and style sheets constrain each page of your site to a maximum and minimum width. Making the browswer window wider will not cause text to reformat beyond this width, and making it narrower will cause a horizontal scroll bar to appear.

Check which layout stylesheet you are using (Layout/Templates and click the CSS-icon for the template you are using). The stylesheet contains the minimum and maximum width settings. Look for div#pagewrapper and set the min and max width to your liking. The default settings in the Layout Stylesheet are:

  /* center wrapper, min max width */
  div#pagewrapper {
     border: 1px solid black;
     margin: 0 auto;     /* this centers wrapper */
     max-width: 80em; /* IE wont understand these, so we will use javascript magick */
     min-width: 60em;
     background-color: #fff;;
     color: black;
  }

The min and max page width for Internet Explorer is set here in the Template. For other browsers it's in the stylesheet called e.g. "Layout: Top menu + 2 columns".

  </script>
  <!--[if lte IE 6]>
  <style type="text/css">
  #pagewrapper {width:expression(P7_MinMaxW(720,950));}
  #container {height: 1%;}
  </style>
  <![endif]-->
  {/literal}

Adapt Your Template

Many people convert an existing website into CMS Made Simple. In that scenario, you likely have enough to do without tweaking yet another set of CSS pages and templates. What you really want to do, then, is simply replace all the supplied templates with your own.

As described [by Ted] in the forum, these are the basic steps:

• Find a representative page from your current website.
• Create a new blank template in CMS Made Simple.
• Paste the HTML of your chosen page into the box.
• Replace the body of it with a {content} tag (i.e. this is the part that will change from page to page)
• Replace the menu section (Home, Contact, Link to Us) with {bulletmenu} or {cms_module module='phplayers'}.
• Put a {stylesheet} tag somewhere in between the <head></head> tags.
• Maybe put {title} in between the <title></title> tags.

Now you have a new template ready to go, you can create a content page to test it with. Do this by:

• Create a new blank content page
• Specify the template name you created above (you can make it the default template to save a step on each new content page).
• Paste in the text you replaced with the {content} tag above
• Save the page

Now step back and admire your handiwork. With luck, you'll have a page very similar to the one you started with. Note that the menus won't work correctly until you've added more pages -- they'll be automatically generated.

A longer example with more step by step information can be found in [this long forum post].

Cyrillic Support

The idea behind this page is to collect all the info, relating national Cyrillic alphabets support in CMS Made Simple. Although there shouldn’t be any major problems since CMSMS is UTF-8 based thus aware of national alphabets, it seems to be a good idea to share the tips and tricks here, so some valuable info won’t get lost into the forum archives.

WARNING! The information below might be outdated (trick based on an ancient 0.13 version of CMSMS). Refer to the forum thread at http://forum.cmsmadesimple.org/index.php/topic,12132.0.html for updated instructions.

Adding Cyrillic Support in auto_alias_content

First, turn on auto_alias_content in ./config.php:

  #Automatically assign alias based on page title?
  $config['auto_alias_content'] = true;

Then, download the excellent transliteration PHP class package by PixelApes from their website. Drop the translit.php file into the ./lib/ folder of your CMSMS installation. Then, you need to load it to CMSMS (probably loading it from some admin include file is a better idea?). Add the following code to ./include.php:

  ...
  require($dirname."/lib/classes/class.group.inc.php");

  // ZYV
  require_once($dirname."/lib/translit.php");
  ...

Now the final touch. You need patch the SetAlias function of the content class. Open ./lib/classes/class.content.inc.php and patch it accordingly:

  function SetAlias($alias) {
  ...
    if ($alias == '')
    {
      // ZYV
      if (isset($gCms->config['admin_encoding']) && isset($gCms->variables['convertclass'])) {
        $class =& $gCms->variables['convertclass'];
        $text = $class->Convert(trim($this->mMenuText), $gCms->config['admin_encoding'], "windows-1251");
      } else {
        $text = trim($this->mMenuText);
      }
      $alias = Translit::UrlTranslit($text);
  ...

Note that you need to decode mMenuText from UTF-8 only if you are using UTF-8 as the main CMSMS character set. If you use a different charset like KOI8-RU, then remove utf8_win1251 function from the code above and recode translit.php in KOI8-RU (file is originally shipped in Windows-1251 by PixelApes).

Enjoy, now your pretty URLs should be generated automatically by CMSMS in concordance with common Cyrillic transliteration rules.

Tip is contributed by --ZYV 08:46, 26 August 2006 (CDT)

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:

• go to Layout -> Templates
• for each template in turn, click on the 'copy' icon on the far right side (between the yellow icon and the checkbox)
• 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
• go to Layout -> Stylesheets
• 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:

• click on Content -> Global Content Blocks
• Click on Add Global Content Block
• Enter a name for the block, e.g. TitleText
• Enter the title you wish, without any formatting. E.g. 'Super Widgets'
• 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.

Modular CSS

This material overlaps a lot with this User Handbook page and probably should be consolidated with that (e.g. by adding the Mike Stenhouse links to that page)

The arrangement of the stylesheets follows a layout designed by Mike Stenhouse and documented at his site. The different stylesheets are:

Typography

Provides fundamental font information, including face, size and weight. Font colour is generally not defined here.

Colours

Specifies the font, background, border and link colors.

Layout various

Most of your site specific changes will occur here, especially in conjunction with the templates of the corresponding names.

Nav Vertical and Horizontal

Controls the menu navigation bars

Forms

All form related styles are defined here.

Tools

Various CSS idioms that help make the styles work better in different browsers. You'll rarely, if ever, need to modify these.

Sub Menu Heading

The standard EllNav Horiz/Vert set of templates has a horizontal main menu and then a secondary vertical menu. Sometimes its nice to add a heading to the vertical menu to place it in context on the page. This article is taken from a []http://forum.cmsmadesimple.org/index.php/topic,4705.msg26467.html#msg26467 forum post]] which describes a solution.

The steps required are:

• Create a new user-defined tag by going to Extensiosn -> User-Defined Tags
• Click on Add User Defined Tag
• Provide a tag name of parent_title
• Provide code as follows:

  global $gCms;
  $db =& $gCms->GetDb();

  $vars =& $gCms->variables;

  $query = "SELECT content_name FROM "
    .cms_db_prefix()
    ."content WHERE content_id = (SELECT parent_id FROM "
    .cms_db_prefix()
    ."content WHERE content_id = '"
    .$vars['content_id']
    ."');";

  $dbresult = $db->Execute($query);
  if ($dbresult && $dbresult->RowCount() > 0) {
    $row = $dbresult->FetchRow();
    echo $row['content_name'];
  } else {
    echo $vars['pageinfo']->content_menutext;
  }

Submit, and the tag is now ready for use in any templte. For example, you can add this to the EllNav Horiz/Vert L 1col template (and likely also the EllNav Horiz/Vert L 2col template by matching the code below with the template code:

   <!-- Start Content (Navigation and Content columns) -->
   <div id="content" class="clearfix">

      <!-- Start Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>
      <h2>{parent_title}</h2>
         {cms_module module='menumanager' template='ellnav-accessible.tpl' start_level='2' collapse='1'}
      <hr />
      </div>
      <!-- End Navigation -->

Notice the new line inserted which contains: {parent_title}.

Now open a page that uses this template, and, voila!, there is now a heading above the submenu that matches the first level menu.

Using the Menu Manager to Create Sub Menu Headings

Another way to create a menu header is to create a simplified template in the menu manager. Your header could be a styled text label or an image that changes depending on which section you're in.

Make a new menu template just for the header. The code for this header-only menu template is:

  {if $count > 0}
    {foreach from=$nodelist item=node}
      {if $node->current == true or $node->parent == true}
        {* ADD WHAT YOU WANT TO DISPLAY AS A HEADER HERE. *}
      {/if}
    {/foreach}
  {/if}

In this menu template, replace the comment line with the HTML/Smarty code that displays what you want in your menu header. You can make your own, or just copy/paste from your side menu template. A few examples are shown below.

In your page template, add {menu start_level ='1' number_of_levels='1'} where you want the header to appear — usually just before your side {menu}. Styling and formatting of the header can be included in either the menu template or page template.

Examples

• For just the text, use "$node->menutext" in your menu template.
• To use an image, use "<img src='__your_path__/{$node->alias}.jpg'/ alt="{$node->menutext}">". Simply name your header images after the page aliases of the top-level pages change __your_path__ to the folder where the images are saved.

Menu Manager Node Parameters

This list is taken from the help file available from the CMSMS menu manager layout page. References to additional parameters appear in the forums.

The parameters for the $node object used in the template are as follows:

• $node->id -- Content ID
• $node->url -- URL of the Content
• $node->accesskey -- Access Key, if defined
• $node->tabindex -- Tab Index, if defined
• $node->titleattribute -- Description or Title Attribute (title), if defined
• $node->hierarchy -- Hierarchy position, (e.g. 1.3.3)
• $node->depth -- Depth (level) of this node in the current menu
• $node->prevdepth -- Depth (level) of the node that was right before this one
• $node->haschildren -- Returns true if this node has child nodes to be displayed
• $node->menutext -- Menu Text
• $node->alias -- Page alias
• $node->target -- Target for the link. Will be empty if content doesn't set it.
• $node->index -- Count of this node in the whole menu
• $node->parent -- True if this node is a parent of the currently selected page

Optional Parameters

• (optional) includeprefix="" - Include only those items who's page alias matches one of the specified (comma separated) prefixes. This parameter cannot be combined with the excludeprefix parameter.
• (optional) excludeprefix="" - Exclude all items (and their children) who's page alias matches one of the specified (comma separated) prefixes. This parameter must not be used in conjunction with the includeprefix parameter.
• (optional) template="bulletmenu.tpl" - The template to use for displaying the menu. Templates will come from the database templates unless the template name ends with .tpl, in which case it will come from a file in the MenuManager templates directory (defaults to simple_navigation.tpl)
• (optional) start_page="home" - Starts the menu displaying at the given start_page and showing that element and it's children only. Takes a page alias.
• (optional) start_element="1.2" - Starts the menu displaying at the given start_element and showing that element and it's children only. Takes a hierarchy position (e.g. 5.1.2).
• (optional) start_level="2" - This option will have the menu only display items starting a the given level. An easy example would be if you had one menu on the page with number_of_levels='1'. Then as a second menu, you have start_level='2'. Now, your second menu will show items based on what is selected in the first menu.
• (optional) show_root_siblings="1" - This option only becomes useful if start_element or start_page are used. It basically will display the siblings along side of the selected start_page/element.
• (optional) show_all="0" - This option will cause the menu to show all nodes even if they are set to not show in the menu. It will still not display inactive pages however.
• (optional) number_of_levels="1" - This setting will only allow the menu to only display a certain number of levels deep.
• (optional) items="contact,home" - Use this item to select a list of pages that this menu should display. The value should be a list of page aliases separated with commas.
• (optional) collapse="1" - Turn on (set to 1) to have the menu hide items not related to the current selected page.
• (optional) lang="en_US" - Parameter is used to specify what language to use for display on the frontend. Not all modules support or need this.

Getting Javascript to work

See below

Using {} characters in your pages

{} characters are special in Smarty (the template system that CMSMS uses). Smarty recognizes several types of tags, some of which can be within JavaScript or CSS code. Since you do not want Smarty to try to parse the JavaScript or CSS as Smarty template code, you need to surround the offending code in {literal} {/literal} tags.

Just put {literal}{/literal} tags around it like this:

  {literal}
  {} {These now work.}
  {/literal}

Another example using Javascript or CSS:

  {literal}
  <script language="JavaScript" type="text/javascript">
  // code here
  </script>

  <style type="text/css">
  /* css here */
  </style>
  {/literal}

[More info]

Goto FAQ Part 2

This FAQ grew over the 32kb size of text which made the Mediawiki system complain that some browsers don't support text files above 32kb, not mine but some other browsers. So i divided the FAQ in a FAQ 1 and a FAQ 2..

This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

FAQ

From CMSMS