Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Use of IDs and Classes in Containers and Skin

Return to previous page

  • 4/7/2015
  • 4572 Views

Comments

4572 Views

Use of IDs and Classes in Containers and Skin

Last updated long time ago

Comments

Common

(Enter the content of this article below)

Advanced

 
There is something fundamentally different in how you use Skins and Containersand this influences the HTML, IDs and Classes you can use.

A page can have only one Skin, but because you can have several Modules all with a container on the same page there are 2 things you should take care of.

1. You cannot use Ids in the static HTML of your container.
The reason for this is that a container can appear more than once on the same page
(if 2 modules have the same container).
Using an ID would result in an XHTML error, since ID’s must be unique.

2. You should try to use unique "root" CSS classes in your containers and address those.
If you don’t ,you risk two containers influencing each other.
If two containers have a style selector (read class) in common their styles will influence each other.
In that case the container that gets loaded last on the page will overrule the one before it.

This also allows you to use less stylesheets.

If you have a blue and a red container your HTML could look like this:

Blue Container:
<div class="Container CBlue">

<!-- Container content -->
</div>

Red Container:
<div class="Container CRed">

<!-- Container content -->
</div>

Then Container.css could contain all the CSS both share plus:
.CBlue {color:#00F;}

.CRed {color:#F00;}

Which saves you 2 stylesheets being loaded: Blue.css and Red.css

FORMATTER ERROR (Snippet Not Found)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out