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.

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.

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 "My Website --> Designs" from the top toolbar. Then, click the "Design Gallery" tab and you will see all of our available designs. Click on the design you want, then click the "download" button 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.

Barebones template pack

Our barebones 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 EF_Barebones.zip (56KB)

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

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.