Controling styles for individual websites by adding extra classes to HTML tag

When working with CMS like Dynamicweb or Syncron VIA, you sometimes share files across domains or subdomains. It makes sense to share common CSS codes when you want to some some common styles like fonts, colours or logos.

 

The same styles… almost…

It is also common that some small differences exists on subdomains, perhaps a campaign site or a site target for a specific group of people. You then need to apply some small changes to those sites. Ofcause you can do this in many ways, and the CMS you use will probertly be a part of your decision on how to implement it. Here is one way to do it:

Add a CLASS to HTML tag with some site related information.

For instance I could add this code to my blog:

<html class="wwwnetsidk"...

The rule should be simple, for instance:

  • Replace not-valid characters like “.” from the DOMAIN NAME to “nothing”

The reason it should be simpel is that it makes it easy to figure out what it should be for a given domain name. Things which are using the KISS (“Keep It Simple, Stupid!”) principle will more likely be used by people, as (in general) people are lazy (I know! Smiley, trust me.)

 

When this rule have been applied you can add extra lines to your shared CSS file like this:

html.wwwnetsidk {background-color: red;}

The princip is used widely, for instance by http://www.modernizr.com/ which addes a lot of feature related classes to your HTML element telling you for instance which HTML5 features are supported. Just look here at parts of what modernizr adds to your HTML document:

js no-touch postmessage history multiplebgs boxshadow opacity...

Dynamicweb CMS

Working with Dynamicweb CMS, here is an example of adding extra information to HTML element – “areaid-xx” will add the ID of the area. In Dynamicweb you can have several areas, which are individual websites. So you might have areaid=1 which is www.netsi.dk and areaid=2 which is m.netsi.dk. In the example below I have also added extra information telling if the person is a returning person.

<html class="areaid-<!--@Global:Area.ID-->
<!--@If Defined(Global:OMC.Visitor.IsReturning)-->IsReturning<!--@EndIf(Global:OMC.Visitor.IsReturning)-->"...

You may add any information you wish, perhaps have a look at the tags that Dynamicweb CMS offers.

Syncron Via CMS

Here are an example of how I have implemented this feature in the Danish CMS system Syncron Via. The system is using a lot, and the code here is applied to the template used to render the outer Page data:

<xsl:variable name="serverName" select="
translate(
/Page/RequestContent/ServerVariables/Entry[@Name='SERVER_NAME']
, '.-', '')" />
...
<html class="{$serverName}"...

This is what I do: define the class to be added to the HTML element in a variable and add it to the HTML class attribute.

US

Leave a Reply