ECMS Horizons
 
 

Style Classes

Generating Style Classes for Your Site

How to Access your Style Classes

To access your Style Classes, navigate to Webpages & Content from the Dashboard. On the Webpages & Content page you should see three tabs. Beside the currently active Dashboard tab, you should see a Style Classes tab. Select it.

fig1.PNG

This will take you to the Style Classes page. Here, you can see all of the Style Classes that you have created.

fig2.PNG

How to Manage Your Style Classes

You can edit various aspects of your Style Classes. The most important being the Class Details. This section helps you identify your Style Classes and apply them to sections.

First, you will notice the Class Reference Name. This is the name that you see when you select a Style Class for a section. Next, you will notice the Description. It is an optional field in which you can populate it with information regarding the Style Class. Finally, there is the Class Name. The Class Name is used to call the Style Class within the HTML. For more information regarding the Class Name, please see the NOTE: Style Class Naming Guidelines section below.

fig15.PNG

Next, is the Block Styles. Here you can modify the background, borders and box shadows. You may notice that under Background that there are three fields for Standard, Highlight, and Contrast. The Standard field would be considered as the default field as most of the styles you see from your Style Class will typically be under Standard. The styles applied under Highlight and Contrast are also important to consider. These styles will be visible in Newsletter Subscribe section, Shopping Cart section, and many other vital website sections.

fig16.PNG

HTML has six different heading sizes; H1, H2, H3, H4, H5, H6. It is important to layout your headings in a logical fashion as they do play a major role in Search Engine Optimzation. With your Style Classes, you can modify all six headings. However, only one set of fields is shown for the sake of convienence, as they are identical for each respective heading size. The first option is font colour. Again, you can choose from three different font colours for Standard, Highlight and Contrast respectively. You can also change the scale of your style class which will influence the behavior of the font size and line spacing. You can also change the weight which will allow your text to appear normal, very thin, or very bold. (Hint: The bigger the number, the bolder it is!) You can also change the font style and the alignment.

fig17.PNG

Here, we have the options avaliable for Body Text and Links. The options for Body Text is identical to the options avalible for the Headers. It is important to note that the styles, except for the colour, selected for the Body Text will be applied to the links as well. With the links you can change the colours of the link depending on it's current state. It is vital to note that the Link Colours should not be similar or identical to the colours used for the Body Text or the visitor will simply not notice the links. You can also add text decoration such as underline to the links to make them stand out more.

fig18.PNG

Finally, we have Availability of the style class. You can toggle it's State to make it active or inactive. This is good if you want to remove the Style Class from your whole site quickly without deleting it.

fig19.PNG

 NOTE | Style Class Naming Guidelines

The Class Reference Name is what you use to identify and recognize your Style Classes. There are no strict naming rules that you must follow while creating your Class Reference Name. However, it is recomended that you make the name short, clear, and descriptive so you know what each Style Class is for.

The Class Name, on the other hand, is what the system uses to apply your style classes to your desired sections. As a result, it must follow some strict naming guidelines.

  1. The Class Name must be in lowercase.
  2. There must be no spaces. If you wish to put a space between words, you must use an underscore or a hyphen.
  3. It is recomended that you make Class Names short and easy to remember. This will make it easier to manually apply your style class to various components of your site.

How to Add Your Style Classes to Your Site

You must add your Style Classes to your site before you can apply them to a section. To do this, navigate to your Master Page from Webpages & Content.

fig11.PNG

Then select Edit Master Page Details.

fig12.PNG

You will be taken to a form and if you scroll down to Important Website Settings, you will see another header called 'Associated Classes'. Select the classes that you wish to use under Avalable and press >> to move them into the Selected box. If you wish to move all Avalable style classes into the Selected box press All >>. Don't forget to save your changes!

fig10.PNG

 

 

How to Add Your Style Classes Your Sections

All sections to must contain a style class. When you create a new section, you must select a style class. Fortunately, it is very easy to do. Simply scroll down to Section Styles and select one of the Available classes. The class that is highlighted in green is the class that is currently applied to the section.

fig13.PNG

IAfter adding a Style Class and saving the changes in your section, you will notice that on one side of the section, you can see the Standard, Highlight, and Contrast background and text colours.

fig14.PNG

Manually Applying Style Classes

Sometimes you may wish to apply unique Style Classes to specific components within your site, however you do not want to create a new section. A good example of this would be creating a table with unique style classes for each table row.

A Style Class applied to a section modifies the three components.

  1. The Typography
  2. The Backgrounds
  3. The Block Styles

If you wish to apply it to a specific section, you must go into the Source of your WYSIWYG editor and modify your section there. You must add a 'class' attribute to the HTML of the section that you wish to modify.

To read more about the class attribute, please visit this link.

The Classes for Typography follow this naming scheme.

  • class_name-std
  • class_name-hil
  • class_name-con

The 'class_name' is whatever you decide that your class name will be. After the dash, you can see that you can choose between std, hil, or con. They represend your Standard, Highlight, and Contrast styles respectively.

The Classes for Backgrounds follow this naming scheme.

  • class_name-std-box
  • class_name-hil-box
  • class_name-con-box

The only difference between the Typography and the Background naming scheme is that the Background naming scheme has '-box' is added to the end of the name.

The Classes for Block Styles follow this naming scheme.

  • class_name-shadow
  • class_name-border

As you can see, there are no std, hil, or con in the name. This is because the box shadow and border are universal to the Style Class and do not change regardless of the nature of the style class.

An example of a paragraph with unique Typography, Background, and Block Styles.

<p class="class_name-hil class_name-con-box class_name-shadow class_name-border">&nbsp;</p>

As you can see, the paragraph now features it's own unique style class. It presents the Typography designated for Highlight, the Background designated for Contrast, and an unique box shadow and border from the Block Styles.

 NOTE | Mirrored Sections and Style Classes

If you mirror a section, the style classes will remain the same. When you view the section, the style class will be presented with the Reference Name of "DEFAULT (from mirrored section)". However, it is important to note that you can change your mirrored section's Style Class without changing the original's.

© 2004 by eCommunities, All rights reserved. Site & Service Policies

Powered by ECMS Horizons