The World's Best CMS for Designers

If you know HTML and CSS, you can easily create your own designs for the LightCMS system. No other system makes it easier. Check out the simple steps to designing for LightCMS below.

Step One - Design Your Site

Design how you want! You can start from scratch in Photoshop or any other design tool you want to use. You can even use one of our free designs as a starting point if you wish. 

Editable Regions

While designing, keep in mind how your design will work on our management system. You will build a template (frame) of the site that always stays the same. Then, you will create editable regions where the user can add and change content. As you design, think about where you want these editable regions to be.

Templates

Your design will include HTML files we call templates. Each template can have its own unique design and its own arrangement of editable regions. You must have at least one template in your design, but you can have as many templates as you like. Usually, a site will have at least two templates as follows:

  1. The Home Page Template — since the home page is usually different than all of the other pages in a site, it generally has its own unique template. You should name this template "home.html"

  2. The Inside Page Template(s) — often a single template can work for every other page in the site, but if you need more flexibility, you can create as many templates as you like. You should name your primary inside template "inside.html"

Special Templates

In addition to home.html and inside.html, there are a few special templates that the system can recognize and use in certain cases. These templates are not required (the system will use your website's default template if they are not included), but can be used when you want to control the styling specifically as described below:

  1. The blog/event/product detail templates — if you include a template named detail.html in your design, it will be used to display blog posts, calendar events and product detail pages. You can fine tune this more specifically by including blogdetail.html, calendardetail.html, or productdetail.html. These element-specific detail pages will override detail.html for their specific element, if included.

  2. The login template — login.html controls the display of the the default login screen (/login) on your website.

  3. The shopping cart template — shoppingcart.html controls the display your website's shopping cart page.

  4. The search results template — searchresults.html controls the display of search results.

  5. The site map template — sitemap.html controls the display of your websites built in friendly sitemap (/sitemap).

  6. The 404 error template — 404.html controls the display of the 404 error page, which appears if a user tries to access a page that doesn't exist on your site.

Dynamic Body Classes

Instead of including special templates, you can often achieve a similar result by addressing our dynamically-generated body classes in your CSS files. LightCMS generates the following body classes automatically as defined below. Targeting these body classes allows you to customize these special pages without having to create additional HTML files.

  • dynamic-shoppingcart - the shopping cart page (/shoppingcart).

  • dynamic-productdetail - all product detail pages.

  • dynamic-blogdetail - all blog post detail pages.

  • dynamic-tags - all blog tag pages.

  • dynamic-calendardetail - all event detail pages

  • dynamic-login - the log in screen (/login).

  • dynamic-searchresults - all search results pages.

  • dynamic-404 - all 404 error pages.

  • dynamic-sitemap - the sitemap page (/sitemap)

Step Two - Cut-up and Build Out Your Site

Once you've created your design images, it's time to cut them up into HTML and CSS. The great thing about our software is that you can use whatever method you choose to do your coding work. So, build out the HTML template files referenced above, and remember to leave room for those editable regions.

Files, Directories and Paths

When you're finished building out your site, you'll have multiple files, just like you would for a normal website. You'll have:

  • HTML files for each of your templates (i.e. home.html, inside.html . . . etc.).

  • Supporting files such as javascript files (i.e. scripts.js) and cascading style sheets (i.e. styles.css)

  • Graphics files that appear in the template (i.e. .png, .gif and .jpg images).

All files should use paths relative to the site root. For example, the following shows a link to a style sheet called mystyle.css, located in a folder called "styles".

<link rel="stylesheet" type="text/css" href="styles/mystyle.css" />

Need Help with Coding Work?

There are numerous companies who provide HTML coding services and LightCMS integration. One great place to find the help you need is in the LightCMS Designer Network, a listing of the most experienced LightCMS designers and their offered services.

Step Three - Add Tokens

Now that your templates are built out in HTML, it's time to integrate LightCMS's dynamic functionality by adding tokens. Tokens are simple bits of code that add dynamic tools to your HTML template files. 

The most important token is the Editable Region. In steps one and two, you planned to create editable regions in various places on your templates. Now you simply need to add the <$region$> <$/region$> token whenever you want to create an editable region in your design. Adding this simple token transforms your design from static to dynamic, allowing your website users to add and edit website content with our software's easy-to-use tools.

There are several tokens available for you to use throughout your templates. Please see our Token Reference section to get full documentation on all available tokens.

Step Four - Design Editor Integration (optional)

If you choose, you can enable your design to work with LightCMS's built-in Design Editor. The Design Editor allows users who are given access to make adjustments to backgrounds, fonts, colors, borders, alignments and more without touching any code. You can enable editing for your entire design, specific templates, specific regions, or not at all. You have complete control and the integration process is very easy.

For details on how to enable Design Editor features on your design, please see this article about Design Editor Integration.

Step Five - Check a Few Things

You're almost done, but before you upload, you may want to consider a few important things.

Check for Common Mistakes

We've compiled a list of the most common errors encountered when creating new designs. Please take a look at our support article entitled "Avoiding Common Design Mistakes" just to be sure you have everything all set.

Include Thumbnail Images

When you include thumbnail images, the system will display them wherever the user is able to select templates. To include thumbnail images with your templates, follow these steps:

  • Take screen shots of your templates and size them to exactly 320 pixels wide by 240 pixels tall

  • Save the images as .gif or .png files and name each file exactly the same as its template, with the .gif or .png extensions appended. For example, the thumbnail image for the template named "Home.html" should be named "Home.html.gif"or "Home.html.png", depending on the image file extension used.. If the image is not named exactly the same as the template with the additional .gif or .png extension, the system will not display it.

  • Create one thumbnail image for each of your templates and include the images anywhere in your .zip file (see below). The system will recognize them by their filenames and display them where appropriate.

Step Six - Zip and Upload

Now that your design is complete, all files (graphics, CSS, HTML, thumbnails ... etc.) should be archived in a ZIP format to upload. Organize your files inside a folder on your computer (see notes on "files, directories and paths" under step 2 above), then right-click (Control-click on Mac OS X) and choose the appropriate archive option to make a .ZIP archive. The name of your zip file will become the name of your design.

Next, login to your website, go to Design and look for the "upload your own" link on the left hand side of the Design Editor. Follow the onscreen instructions to upload your design.

Making Changes to Your Design

Should you need to make changes to your design, you have three options:

  1. You can access and edit your design files via FTP. This is the most common and convenient method and it allows you to work on your designs live on our server using the tools you are most comfortable with. For more information and instructions on connecting via FTP, please see our FTP page.

  2. Changes to the HTML, CSS, INC and JS files in your design can be made inside our software. Click on the Website toggle switch -> Design -> mouse over your design -> click the options menu gear icon in the top right of the template thumbnail and choose "Edit Source." This will launch the Source Editor and will allow you to edit and save your HTML, CSS, INC, and JS files.

  3. You can also make changes to your design files outside of our system, re-zip your files and re-upload. As long as your zip file is named exactly the same thing, your new design will replace your old design.

Design Template Version Tracking and Archiving

Our system is equipped with version tracking and archiving for all design template files. Every time you save changes to an HTML, CSS, INC or JS file in your design templates, the system stores the file in that version. All versions are stored for 30 days for all websites. On paid websites, we also store the most recent three versions indefinitely. Versions are created whenever you save changes through our built-in editing interface or via FTP. However, if you want to revert to a previous version, you will have to use the built in editing interface to access the saved versions.

Common Questions

Back to top

Copyright © 2014 LightCMS® Content Management System Powered by LightCMS LightCMS is a product of NetSuite