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
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
Pin HeadingContent for pin, so on and so forth. |
table-red
Column Heading | Column Heading | Column Heading |
Content | Content | Content |
Content | Content | Content |
Content | Content | Content |
table-black
Column Heading | Column Heading | Column Heading |
Content | Content | Content |
Content | Content | Content |
Content | Content | Content |
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
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.