• http://www.yourdomain.com/login
• http://yourdomain.publishpath.com/login

When you signed up for your website you were sent an email to the email address used during the sign up process.  In that email was your:

• Email address to be used as your username.
• Your domain
• Login link

If you did not receive this or need to have it sent to you again please email support@lightcms.com with the information you are requesting.

If you want to utilize a different template than the default template for use on the product detail and the shopping cart pages, follow these procedures:

Product Detail

1. Create a template to use for the product detail page.
2. Name the template "ProductDetail.html"
3. Add the template to your design and re-upload.

The product detail page will now use the ProductDetail.html page as it's template.  The product detail templates cascade as ProductDetail.html, Detail.html, and the default template you have selected.

Shopping Cart

1. Create a template to use for the shopping cart page.
2. Name the template "ShoppingCart.html"
3. Add the template to your design and re-upload.

The shopping cart page will now use the ShoppingCart.html page as it's template.  The product detail templates cascade as ShoppingCart.html and then the default template you have selected.

Free design templates

You may download any of the fully-functional design templates that are included with the system (see all of our available templates in our design viewer). To download a design, login to your website and select Designs from the top toolbar. Then, click the Collection link in the top left and select Gallery in the drop down menu.  You will then see all of our available designs. Click on the design you want, then click the gear icon button in the top right and select Download from the drop down menu to download a .zip file containing the design in its entirety.

By doing this, you can see how we create the HTML and CSS code for designs on our system. Plus, you can even use one of our designs as a starting point for your own design if you wish.

Starter design template pack

Our starter design templates are great for designers needing a solid starting point for making templates for the CMS. With minimal "style," they are perfect for the designer that wants to start with a "blank canvas" and build their design on top of it, or for designers who need a reference when building their templates from scratch. The HTML templates offer several distinct home, inside, and admin layouts along with navigation options such has horizontal, vertical, accordion, and drop-down menus. You can use as many of them as you like in your designs. The included CSS provides the underlying layout positioning as well as classes to style all of the content elements provided by the system. Finally, the templates include all of the system tokens and lots of code comments to make everything easy to understand and modify.

These templates were intentionally left un-styled as much as possible so designers can focus on mark-up, tokens, and style. Feel free to use these as the starting framework for your CMS templates – they're full-functioning and ready to go – just add your own styles.

Download Starter Design Templates (56KB)

1. Login to your website.
   
   
   
   
2. Navigate to the page where you want the Logout button or link to be.
3. Add a graphical button or text and highlight it.
4. Click the Hyperlink Manager button.
   
   
   
   
5. Give the URL as /Utilities/logout.aspx and Click the OK button.
   
   
   
   
6. Click the Save my changes button.
   
   

Token update: <$date format="MMMM d, yyyy"http://help.lightcms.com/$>

There are many other ways to change the formatting of the date token by adding the format="Insert Formatting Here".  Please view http://msdn2.microsoft.com/en-us/library/8kb3ddd4.aspx for many other options.

Because the menus are inline with the rest of the page, they are subject to any CSS rules that might be in effect on that page and potentially their appearance/behavior can be modified unintentionally.  I would recommend that anyone looking to explore these issues becomes familiar with the /Styles/water.css that is added to every page and avoid overriding the CSS rules in that document. To view the water.css stylesheet you will need an add-on for Firefox such as the Web Developer toolbar. It is also helpful to avoid re-using the same class names.

Address to your files:

• http://yourdomain.publishpath.com/websites/yourdomain/

Address to your files if you added a folder called media:

• http://yourdomain.publishpath.com/websites/yourdomain/media

If you plan to use the site with your own domain name, such as http://www.yourdomain.com, having the complete website address links could cause you to be logged out when you go to them. 

Example:

1. I login to my site at http://www.yourdomain.com to change some text on the Submit A Site page.
2. If I had used a complete website address such as http://yourdomain.publishpath.com/submityoursite, I would be taken directly to that address, and logged out because I went to a different address then what I logged into. 
3. If I had used a absolute path for this address, such as /submityoursite, it would still be logged in because I would still be at the same address.

If you find that you are being logged out take a look at the address bar and see if you are on a different address then what you logged in under.  If so, you should go to the link you created and make it a absolute path.

But, there is an easy fix.

Once you have added a form element to a page, simply hover over the edit button for the element and select "settings."  Then, uncheck the box that says "include basic form styles" and update.  This will remove all default styles for the form element and you will be free to style your form however you wish.

HINT:  You might want to copy the default form styles which are rendered on the page over to your custom stylesheets before you disable the form styles.  By doing this, you will have a starting place for the form styles and can simply tweak and change as needed.

1. Take a screen shot of a website page that is using your template. You can take a screen shot by putting the site on your screen and pressing the "print screen" key on your keyboard (at the upper right of many keyboards). This will copy the image to your clipboard. Then, open an image editing software and paste the image from your clipboard.
2. Size the image to EXACTLY 160 pixels wide by 120 pixels tall.
3. Export the image as a .GIF file and name the image exactly the same as the name of the template for which you are creating the thumbnail, appending the .GIF extension. For example, if the template is named "Inside.html" the thumbnail image should be named "Inside.html.gif".
4. Save the image to your computer.
5. Repeat for each template in your design.

Once you have created a thumbnail image for each template in your design, you now need to get the thumbnails loaded onto the system with your design. Follow these steps:

1. Login to your website and select My Website --> Designs from the top toolbar. This will take you to the design manager.
2. Click on "My Designs" and look for your design in the list.
3. Click the "Download" button next to your design. This will download a .zip file containing your design.
4. Locate the .zip file on your computer and unzip the files.
5. Rename the .zip file you just downloaded to something different. This will serve as a backup of your design.
6. Copy the thumbnail images you created earlier into the folder that you just unzipped.
7. Rezip the design folder containing all of the downloaded files plus the new thumbnails and name the .zip file exactly what the original .zip file was named when you downloaded it.
8. Go back to the "My Designs" page on your website and click on "upload a design now" at the top.
9. Browse to the location of the new .zip file you just created and upload.
10. That's it. The new design files should overwrite the old files and everything should be the same, with the addition of the thumbnails you just created.

This article will explain a few best practices for you to consider as you plan the navigation for your site.

• Design your navigation in a way that can be styled by CSS as unordered lists of links. Our system outputs the menu items dynamically as unordered lists. Therefore, you need to make sure you design your menus so that the look you desire can be achieved through CSS styling.  If you have questions about this, please contact us and we'll be happy to take a look at your design.
• Choose a navigational menu configuration. There are two navigational configurations that are most common:
  • Option one: Root menu plus section menu plus breadcrumb. Using these three navigational tokens in combination provide a great way to separate out the navigational functionality but still provide ready access to all appropriate pages in your site.
    
    Example: One of our product websites, www.lightcms.com, is a good example of this type of navigational layout. Visit the site, or see a visual example on our token reference page.
  • Option two: Global menu. The second common option is to use a single global menu which will generate a nested list of all pages in your site.
    
    Example: This support site provides a good example of global menu navigation. Notice the single, vertical, expandable list of menu items on the left side of the site.

However, if you want to utilize a different template from the default template to use for blog posts and calendar events, follow this procedure:

1. Create a template to use for blog posts and calendar events
2. Name the template "detail.html"
3. Add the template to your design and re-upload.

The system will find your detail template by its filename and use it whenever it displays the detail page of a blog post or calend

Avoid Common Mistakes with Template Files

Be sure your design has at least one template

Your design must include at least one html template file, but it may include as many template files as you like. Each template file should have a unique name. These filenames will be what you see when you choose your template inside the software, so make them descriptive (i.e. Home.html, Inside.html, AboutUsSection.html . . . etc.)

Be sure every template has an editable region named "main"

Every template in your design must have an editable region named "main". For more information on this, see the editable region token reference page.

For best results, be sure every design has a "Home.html" and an "Inside.html"

While designs can function without meeting this guideline, they will work better if they do. This naming convention enables LightCMS's "apply template" functionality, allowing users to automatically apply the home template to the home page and the inside template as the default template with a single click.

Avoid Common Mistakes with Regions

Be sure your region names are unique

For example:

• <$region name="SideColumn"$><$/region$>
• <$region name="SideColumn1"$><$/region$>

Not:

• <$region name="SideColumn"$><$/region$>
• <$region name="SideColumn"$><$/region$>

Be sure your region names don't contain spaces

For example:

• <$region name="SideColumn"$><$/region$>
• <$region name="Side_Column"$><$/region$>

Not:

• <$region name="Side Column"$><$/region$>

Be sure your region names don't contain hyphens

For example:

• <$region name="SideColumn"$><$/region$>
• <$region name="Side_Column"$><$/region$>

Not:

• <$region name="Side-Column"$><$/region$>