EndPreviousNextEnd EndPrint This TopicEnd

Using ID’s to style modules

Within any CSS file you can prefix any ID Selector to the beginning of any class. This enables you to display the same module differently within each Container.

 

 

Example

 

If your website required a small Enquiry Form inserted into the Left-Hand Side Container (cLS), with a design that would be different to a globally styled Enquiry Form, prefix the chosen ID Selector (Example below = #cLS) to the beginning.

 

Below, I have duplicated the existing global style and changed the colours from grey text on a white background to white text on a grey background.

 

.EnquiryForm fieldset {

         background-color: #FFFFFF;

         color: #666666;

 width: auto;

         border: 1px solid #666666;

          border-top: 10px solid #666666;}

 

The new style within the CSS file may look like this (Changes are highlighted in Red):

 

#cLS .EnquiryForm fieldset {

          background-color: #666666;

          color: #666666;

          width: auto;

          border: 1px solid #FFFFFF;

          border-top: 10px solid #FFFFFF;}

 

 

See also

Naming Container ID’s

Global Fonts

Layout and Structure

Core Modules

Topic Link