Creating Designs

Sign up

Takes less than 60 seconds

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, but can be used when you want to control the styling as described below:

  1. The blog/event detail template — if you include a template named detail.html in your design, that template will be used to display blog post and calendar event detail pages.

  2. The login template — if you include a template named login.html in your design, that template will be used to display the default login screen (/login) on your website.

  3. The product detail template — if you include a template named productdetail.html in your design, that template will be used to display detail pages for all products in your website's store.

  4. The shopping cart template — if you include a template named shoppingcart.html in your design, that template will be used to display your website's shopping cart page.


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 - 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

Thumbnail images are not required, but they can be nice to include. If 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 files and name each file exactly the same as its template, with the .gif extension appended. For example, the thumbnail image for the template named "Home.html" should be named "Home.html.gif". If the image is not named exactly the same as the template with the additional .gif 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 Five - 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 My Website -> Designs -> My Designs, and look for the "upload your own design" link. 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. Go to Website -> Designs -> My Designs, then select your design and choose "Edit." This will launch the design editor interface which will allow you to edit and save your design 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.