Importing a new template

Overview

The biggest issue you will face is dealing with menus... either they are static and you need to match the URLS or they are dynamic CSS, and you need to hand code your CSS to match our LI menu classnames.

In general, here is the process.

Prepare your files, Setup up a trial site

  1. Create your your template using the website editor of your choice (e.g Dreamweaver), style the template and content if created, using CSS where possible
  2. Set up a trial website, choosing one of the Customisable Template options for best results.
  3. This will set up a template on the website, including images and css, that you can replace with your custom files.


Where to setup your Template HTML, CSS , DOCTYPE's etc

Management of your custom template is handled in the Custom Template Editor section of the website

  1. Choose the Design button from the left menu
  2. Click the Custom Template Editor link that appears on the popup window


HOWTO: Setup the template within the CMS

  1. If your page design includes interior content as well as the template, remove the interior content and save the file as another name.
  2. Copy your template HTML, go to the Custom Template Editor and Choose Template A
  3. Switch from WYSWIG mode to HTML mode by pressing the HTML button in the editor.
  4. You should see HTML code from the current template in the editor. Delete this and past in your new template HTML
  5. Add the words with square brackets, [CONTENT] exactly where you want your content area of your template to be.
  6. If you want the page title to be a heading in the content area put [HEADING] exactly where you want the heading to go. You should still put <h1> tags around your [HEADING], and use CSS externally to style the H1 to your preferred format. The H1 is best for accessibility and for SEO. There are many more of these fields you can use.
  7. Please note  you will not have access to the HTML, META or BODY tags... These will be managed by the CMS and you will be able to link meta tags, additional css, jscript elsewhere, so put your effort to everything inside the BODY content area. 

 

Please note that HTML META and BODY tags will eventually be stripped, but not neccessary straight away... So its a good idea to get rid of your BODY, META and HTML tags straight away by editing your template in HTML mode.

Delete all the <head> and <meta> tags etc above and including the <body> tag. If the body tag contains an onload="MM_loadImages(...)" or similar, then you can move that to the bottom of the template and insert in a <script></script> Scroll down to the bottom of the template and remove the </body></html> tags... so hopefully now you've worked out that you can only have the HTML from within the BODY area of your template.

You can still use a CSS and JS, but read on for where that will go. CSS = /style.css  JS= /_scripts.js

    Managing, uploading images

    1. Make all your images src paths relative to the root with a predcedding slash (including in stylesheets), eg src="/images/clear.gif"
    2. If you want to use static HTML menus or links in your template, then make all your menu URLS relative to the root with a preceding slash, eg href="/contactus.html"... you can also use a dynamic menu by including [MENULEFT] or [MENUTOP] where you want it to go... There are CSS Menu options...  
    3. Using the FTP details in the Manage Files area you can upload all your images more quickly, images should go in the "images" folder.

    Where to manage your CSS

    1. Put any stylesheets into "style.css", or via the style editor in the CMS

    Where to manage your javascript

    1. login to our CMS
    2. Go to the design settings, scroll down to CUSTOM TEMPLATE EDITOR (or admin users should see "templts" option in the admin menu). If your template isnt set up as a custom template a notice in red text will be displayed at the top of the page.
    3. Find the Javascript (scripts.js) on the page located below templates A-F
    4. This will open an HTML window, paste the relevant script there and save. This script file will then be added to the template in the HEAD section of the HTML.

    Next Steps

    1. Then edit it to make sure it looks ok, paying the most attention to image paths, javascript paths, URL paths...  if you got it right, then the images should be visible. Sometimes saving and re editing it will clean up your mistakes with our auto search and replaces..
    2. Because you should not put too much CSS on the body element, please put the following settings into the CMS Colours and Images Area. These elements will be automatically inserted into the CMS generated BODY tag

      • Browser Background Colour
      • Browser Background Image
      • Text Default Colour
      • Links Default Colour

    3. If you wanting to use a CSS menu then you may need to change the menu type to a LI stylesheet special menu in the menu design area under text buttons. Once you have done that, you can use your CSS stylesheet skills to create beautiful multilevel dropdown menus.
    4. For each of your pages, you need to create them as "Add a new page" link from left menu, then top left should have "Single Plain Blank Page",  unless you are using one of our special CMS templates like shopping carts. use your prefered save as FILENAME when adding your pages as you are using in your hard coded template menus/links... This way you can match up the CMS pages to your hard links. If you are using the CSS powered menus, then no worries, our system will take care of the linking. 

      That's about it in a nutshell. Basically just get your URLS right, both for menus and images... trial and error will get you through

       

       

       

      TIPS

      • Avoid setting margins and background colours on the BODY CSS class, margins will be 0 by default and the background needs to be set in the DESIGN SETTINGS colours area... Otherwise that background colour or image will be used in the CMS when people are editing their page content, and this might not be relevant to your content area. Use an additional DIV if you want to center or give padding to the global container.
      • It is best to use our CSS Menus. A little work at the start gives a really nice result. Customers will get upset that they can't easily add/remove pages if you have used a hard coded menu.

      Organising your CSS file

      1. Put your globals at the top. eg body {} should contain font family and font size. Colours and images can be inserted into the BODY HTML tag from the CMS global colours and images design setting area.
      2. Put your custom formating code next, eg elements that layout special boxes or columns or custom list item settings
      3. Put your menu code at the very bottom of the CSS, consider the issue that it may inherit CSS settings from earlier in the file
      4. Remove margins/padding or background or any line height or anything other than the above from your body tag. Margins are 0 by default, and tou can put background attributes in the customer configurable design settings and color edit area 
      5. Remove any global * or html CSS, this will only lead to trouble.
      6. If you have a #CONTENT qualifier for any of your main content elements, then remove the qualifiers from these global settings and move them to the top of your CSS. This is because your containers will not be available when the user is editing their content. The content will be rendered in the WYSIWYG editor, without your container website design... Thus it is best for all, if you fix up your CSS to ensure your special content markups will render in the CMS.

       

      A sample template code might look like this. Fields in square brackets are where dynamic content is inserted. Otherwise you can use as much HTML and CSS as you like. Note that their are no BODY nor META tags included, as these are generated by our CMS.

      <table width=750><tr><td width=750>
      [BANNER]
      </td></tr></table>
      <table width=750>
      <tr>
      <td valign=top width=150>[MENULEFT]</td>
      <td valign=top width=600><h1>[HEADING]</h1>[CONTENT]</td>
      </tr>
      </table>
      <table width=750><tr><td width=750>
      [COPYRIGHT]
      </td></tr></table>

      Index Previous Next