Use of IDs and Classes in Containers and Skin

Return to previous page

  • 4/7/2015
  • 1508 Views

Comments

1508 Views

Use of IDs and Classes in Containers and Skin

Last updated 6 years 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)
Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out