ArticleLive Templates

• Web forms
  Web forms are responsible for starting the template initialization process. Unlike typical web forms they don't contain any content because all content is displayed according to the HTML template file. Web forms can, however, contain code to load data accessible by the HTML template file.
  
  
• Panels
  Panels are ASP.NET user controls that are used to render static or dynamic content, or to perform a specific task. They are positioned on your pages from within the HTML template files.
  
  
• Images
  Each template has its own images to match. The images are kept in the /Images directory.
  
  
• HTML template files
  HTML template files are used to dictate the layout of each page. The file consists of HTML with panel placeholders to indicate where the content will be rendered. Different types of content include panels, page data, and config data.
  
  
• Stylesheets
  Stylesheets are used to help with the layout of each page and to apply the visual theme of the template, including fonts, colors, sizes, etc.
  
  
• Miscellaneous files
  The ArticleLive templates contain a few miscellaneous files that are used for reasons other than to render the page. They include preview.jpg, which is used as a preview when selecting a template in the installer or on the settings page.

• Panels
• Page data
• Config data

/ directory.

• Styles.css - General styles used on the pages of the site.
• WindowStyles.css - Styles used on all pop-up windows, such as "Print Article".
• HelpTip.css - The style of the glossary help tip popups

Container styles

Each page is typically wrapped in some container objects that have styles to apply widths, padding, spacing, and even colors. Some common container styles include (note, they aren't necessarily part of every template):

• GlobalContainer - This style is typically applied to a <div> wrapped around the entire page immediately inside the <form> tags.
• PageContainer - This style is typically applied to a <table> that defines the position of the page header, page body, and page footer.
• HeaderContainer - This style is typically applied to a <td> inside the PageContainer that helps position the page header.
• BodyContainer - This style is typically applied to a <td> inside the PageContainer that helps position the body of your page.
• FooterContainer - This style is typically applied to a <td> inside the PageContainer that helps position the page footer.

Here's an example of some container styles:

Body styles (columns)

The page body is typically divided into columns. These are cells of a table with the class "BodyColumns". The classes are:

• BodyColumns - This style is typically applied to the <table> that defines the body columns.
• LeftColumn - This style is typically applied to the leftmost <td> inside the BodyColumns table.
• CentreColumn - This style is typically applied to the centre <td> inside the BodyColumns table.
• RightColumn - This style is typically applied to the rightmost <td> inside the BodyColumns table.

The column styles can be adjusted to alter background colors, borders, spacing, and even the styles of child content. An example of some body styles is shown below.

Panel styles

Note: The following instructions may not apply to all templates and are a rough guide based on the built-in templates.

Each panel has the class of "Panel", as well as a panel specific class, which is usually the name of the panel. You can edit the design of the panel by opening the styles.css file and searching for the class name (ie. the name of the panel). If it doesn't exist then you can create it.

To edit styles that are applied to all panels in a specific area, you can use the "Panel" class. The following code edits all panels on your site.

To set the style of all panels in the left column, centre column, or right column use the code shown below.

You'll notice that the headings in the centre column are declared using .CentreColumn .Heading rather than .CentreColumn .Panel .Heading. This is for simplicities sake, as both methods have the same effect.

Form styles

The forms are broken down into the following styles:

• FieldLabel - The style of all form field labels
• Field400 - The style of a field that is 400px wide. These width specific styles are used on forms with uniformed field widths.
• FieldFull - The style of a field that is 100% wide.
• Field - The style of any other field
• FormButton - The style of all form submit and cancel buttons

The following stylesheet is an example of some form styles:

Applying a template

There are two places where you can select a template to apply to your site. Firstly, in the installer and secondly, on the settings page in the control panel. When selecting a template you will see a template selection box, as shown below.

To view a larger preview click the "Click to Enlarge" link and the preview image will display in a larger window. To select a template, simply click the templates name in the list and then click on the forms submit button.

Editing templates

Templates can be edited in the control panel by clicking on "Templates" in the menu at the top right of the page. On the templates page you can switch to edit a different template by choosing the desired template from the drop-down-list and clicking "Switch". The template file list displays a list of all HTML template files and cascading stylesheet files.

Custom templates

It's not difficult to setup your own template, complete with its own custom look, feel and even behavior. There are 2 ways to get started.

1. You can create a new directory in the /Templates/ directory of the ArticleLive application.
2. You can copy an existing template and place it in the /Templates/ directory.

4 of 9