Style Guide

Table Styles

To apply the different table styles you just need to select the desired style when creating a new table.

First click on the table icon above to create a new table, then in the pop up there is a field call 'Class', here you need to select a style. Scroll down to the bottom and you will see table-pins, table-red and table-black these are the three table styles (examples below).

*Note when applying the table-pins style the pin heading needs to be a H3.

table-pins

table-red

table-black

Message Styles

This is the hint style, to apply this style select all desired content then in the select box called 'Styles' go down to the bottom where you will find 'hint', select that and your done. 

This is the warning style, to apply this style select all desired content then in the select box called 'Styles' go down to the bottom where you will find 'warning', select that and your done. 

This is the vels style, to apply this style select all desired content then in the select box called 'Styles' go down to the bottom where you will find 'vels', select that and your done. 

This is the more style, to apply this style select all desired content then in the select box called 'Styles' go down to the bottom where you will find 'more', select that and your done. 

Button Styles

Readmore buttons

If you would like a red button as used for the readmore buttons, just select the text and choose the 'readmore' style.

For example: Read More..

PDF links

If you would like a pdf link to display as a simple button highlight the linked text and choose the style called pdf.

For example: Download PDF

click here

Red action buttons

The below code sample demonstrates how to create an action button, these are for use in the right hand sidebar. The class of icon-basket will show a little shopping basket icon, other available icons include: icon-heart, icon-cog, icon-ok, icon-cancel, icon-info, icon-chat, icon-basket, icon-down, icon-video, icon-user, icon-book, icon-phone, icon-search.

<div class="action">
    <div class="icon-basket">
<h3><a href="/accelerus/products/how-to-buy">How to buy <span>Pricing details</span></a></h3>
 </div>
</div>

All of the main red action buttons, i.e. the ones the sidebar and the ones on the home page are modules. The home page ones are called Home Page Action Buttons and the sidebar ones are called Sidebar action buttons (then a descriptor for the buttons).

When editing these buttons it probably easiest to do so in html mode. To do this click on the [Toggle Editor] link above the wysiwyg (i.e. the textarea). Then just edit the button code or paste in the above code for new buttons (editing the text, link and icon as you need).

Simple red buttons

If you would like a simple red button highlight text and choose the style called red-button.

For example: Red Button

Other website features

Testimonials

To add more testimonials you go to 'Components' -> 'RSMonials' -> 'Testimonials', then on the right hand side click the new icon and file in the desired fields hit save and your done.

Forms

Forms are located under 'Components' and then 'ChronoForms'. To edit an existing form click on the 'Wizard Edit' link next to the form name, from there you can edit, or add and delete fields.

To add new fields just drag a field type from the left hand menu to the right where all the existing fields are. Once the fields are udated click on the 'Emails' tab in the first email section click (Click to configure), a new form will pop up, if this a complete new form you will need to fill out all fields if you're just editing an existing for click on the 'Template' tab then click 'Generate Auto Template', this will update the email template that gets sent to administrators.