40FINGERS DNN Nederlands40FINGERS DNN English

Our Blog

Menu: Blog

Style Helper Skin Object Documentation

By: Timo Breumelhof

This is the documentation for the of the new Style Helper skin object on Codeplex.
This is a skin object I started in 2007, but never got to making it releasable.
And now i decided I should finally finish it..
(I will add a some extra functionality later this year)

I would appreciate it if you would test the skin object and give feedback / report issues (on Codeplex).

Download: stylehelper.codeplex.com

Here's the current documentation for the skin object:



What it does

The 40FINGERS Style Helper Skin object allows you to add CSS and Javascript links and meta tags to the head of your page.
It can also remove CSS links for the head of the page (like the UnloadCSS skin object).

This skin object allows you to set conditions for the adding the file links / meta tags, based on browser, username, role, query string etc.
These filters can be positive (include) or negative (exclude).

Add the skin object to your skin

Add to ASCX skin:
<%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>
<fortyfingers:STYLEHELPER ID="STYLEHELPER1" AddCssFile="Red.css" runat="server" />


Options and attributes

Remove CSS links from the head of you DotNetNuke page


You can remove one or more of the CSS files DotNetNuke injects in the head of the page by default.
You do this by passing a comma separated list of filenames.
The skin objects looks if the value you pass is part of the complete path to the CSS file.

RemoveCssFile="default.css" will remove default.css
RemoveCssFile="module.css" will remove all module.css files (for all modules)
RemoveCssFile="/" will remove all CSS files

Add "something" to Head of the Page.

As I got some requests to allow adding all kind of content to the head of the page, I decided to create an attribute to allow adding anything to the head of your DotNetNuke page.
You can pass multiple strings, but to make sure not conflicts arise, you have to use 2 pipe characters ("||") to seperate them.

Attribute: AddToHead
Example: AddToHead='<script types="text/javacript">alert("Inject to Head Example")</script>||<meta property="og:title" content="my title" />'

As of version 02.06.06 AddToHead also supports tokens for paths. This means you can also inject a link to for instance the Skin folder.
<fortyfingers:STYLEHELPER ID="SH1" AddToHead="<script src='[S]Js/40fingers.js' type='text/javascript'></script>" runat="server" />


Remove elements from the Head of the Page.

This attribute allows you to remove some of the elements from the head of the DNN page, depending on it's attributes.
You can pass multiple strings, you have to use 2 pipe characters ("||") to seperate them.
This will not work for the style sheets or JS as they are injected in a different way.

From version 02.06.06

Attribute: RemoveFromHead
<fortyfingers:STYLEHELPER ID="SH1" RemoveFromHead="rel=SHORTCUT ICON" runat="server" />
Will remove the favicon from the head.


Add CSS/JS files

For CSS files: AddCssFile
For JS files: AddJSFile

Comma separtated list of CSS or JS files to link from the page head.
Use AddCssFiles for css files and AddJsFiles for javascript files.
By default the skin path is used as basepath for the files.
(use the following tokens if you want to use another path)

File Paths

The path to the files can be set using the BasePath attribute, which default to the skinpath.
You can use tokens for the "BasePath" or for the individual files (in AddCssFile/AddJSFile);
[S] for the SkinPath
[P] for the current Portal folder
[M] for this Skin objects install folder
[R] for the root folder ("/")
[D] for the DesktopModules Folder ("/DesktopModules/")

If you use path tokens for a file the value for BasePath will be ignored.

Other Tokens:

You can use: [PortalId] to load a portal specific stylesheet
Example: AddCssFile="Portal-[PortalId].css" will result in this style sheet being added: Portal-0.css, for the first portal.

Querystring parameter
You can load stylesheet with a querystring parameter in it's name
Format: [QS:Parameter]
Example: AddCssFile="File[SQ:Style].css" will result in this file being added if you pass a query string parameter with the name "Style"
So this url: mywebsite.com?Style=V2 would load a stylesheet with the name FileV2.css.
If you don't pass the querystring parameter, the stylesheet does not get loaded.
(I use this to test the different skin variations)

Css Media Type

You can set the default Media Type using the "CssMedia" attribute.
The default value = "screen"

You can also set the CSS media type attribute for a filename like so; "myfile.css:print".
This will add the myfile.css file with a media type "print".
If you want to pass multiple Media types for a file, separate them by colons; "myfile.css:print:handheld".
If you don't pass a media type for a file, the "CssMedia" value will be used.

Css file link location

Attribute: AddAtEnd

Set if the JS / CSS files will be added at the end or the start.
The Start being before module.css at the end just before portal.css

Possible Values:
True / False

Default Value:



Add Meta Tags

Attribute: AddMetaTags

You can add meta tags to the page head.

Possible Values:
The Format used is "Name:Value"
As of version 1.8.3 you have to separate Multiple Meta tags by using a single pipe sign: |
This was changed because a meta tag can contain commas.

Default Value:


<fortyfingers:STYLEHELPER ID="STYLERHELPER5" AddMetaTags="Name1:Value1|Name2:Value2" runat="server" />

 If you want to inject Meta tags that use different attributes (not Name="x" Value="y"), use the AddToHead attribute.


Remove Meta Tags.

You can now remove the existing default DotNetNuke meta tags.
For now only the ones that have an ID (you can check in the page source or the default.aspx file on the server).
To make sure not conflicts arise, you have to use 2 pipe characters ("||") to separate different values.
This is useful if you for instance want to set a custom description meta tag, and remove the original one.

Attribute: RemoveMeta
A Meta tag to remove is passed like this: id=xxx (no spaces)
Example: RemoveMeta="id=MetaKeywords||id=MetaRefresh||id=MetaRobots"

Add this to remove the robots meta tag:
<fortyfingers:STYLEHELPER ID="SH1" RemoveMeta=" id=MetaRobots" runat="server" />



Add CSS class to the body tag

You can add a CSS class to the body element of your DNN page.
You can use a static text or a template.
This allows you to address pecific pages based on their name, id, order in the menu or a users role.

There are two attributes you can use.

AddBodyClass (True/False)

This will inject the body class with the default template

BodyClass (String)

The template for the class. If you set this attribute you don't have to set the AddBodyClass attribute.
The default template is: "[BcName] [BcId] [BcNr]"

Will render the Page Names in the breadcrumb as a class

Will render the Page Ids in the breadcrumb as a class

Will render the Page Order in the breadcrumb as a class

On a page "SubPage" on Level 1 which is a child of the page "RootPage" on Level 0 ,
this will be your body tag (with the default settings):

<body id="Body" class="L0_RootPage L1_SubPage Id68 Id100 L0_Nr3 L1_Nr2">

L0_RootPage > The current pages parent on level 0 named "RootPage"
L1_SubPage > The current page on Level 1, named "SubPage"
Id68 > The "RootPage" Id = 68
Id100 > The "SubPage" Id = 100
L0_Nr3 > "RootPage" is the third page on level 0
L1_Nr2 > "SubPage" is the second page on level 1

This will render a class showing the roles the current user is a member that have view rights set for the current page.

This allows you to address certain user roles with your css (make the background of a site red if your logged in as an administrator for instance)

On a page that has view set for all users, the following classes will be rendered:

- Anonymous user: <body id="Body" class="UPR_All_Users">

- Registered user: <body id="Body" class="UPR_Registered_Users UPR_All_Users">


Set the Doctype of a skin

Attribute: doctype

Use: You can now set the doctype of a skin using the Style Helper skin object.
This means you don't need to create any skinname.doctype.xml files.

Possible Values:
HTML 5, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.1, HTML 4.01 Strict

<fortyfingers:STYLEHELPER ID="STYLERHELPER1" doctype="HTML 5" runat="server" />

Note: the doctype is always set if you use this, it is not influenced by the filters.



Redirect another URL.

Attribute: RedirectTo

Use: This can be used to redirect certain (mainly mobile) browsers to another page or website.
The way the redirect is handled is set with the "RedirectMode" Attribute

Example: RedirectTo="/"


Stop redirecting

With this attribute you set how you on what conditions redirecting is refused.
It depends on the RedirectMode attribute what happens the next time the user visits the site.

Attribute: RedirectStop

Possible Values:

Revisit: Will NOT redirect after the first redirect

RedirectUrl: Will not redirect if the Referrer URL is the Redirect URL

BaseRedirectUrl: Will not redirect if the Referrer URL contains the Base Redirect URL

QueryString: Will not redirect if the following Query String Parameter is passed: "NoRedirect=True".
These values can be combined, comma separated.

Default Value: "RedirectUrl,QueryString"



Persistence of a Redirect.

Attribute: RedirectMode

Use: With this attribute, you can set what happens after the Redirect has stopped

Session: Will not redirect again during this visit, the next browsing session the user visits the site he will be again redirected once.

Once: will redirect once, write a cookie (valid for a year) and will not redirect the next time the user visits the site (unless he clears the cookie).

Always: will always do the redirect next time

Never: will never redirect next time (for testing purposes)

Default value: Session


Multiple Redirects on one site / skin

You can give a redirect a name, to separate several redirects used on one site.
2 redirect with a different name will not influence each other, this way you can for instance have a Mobile redirect and a redirect for Internet Explorer 6 in the same skin.
It also allows you to share the same redirect over different skins using the same RedirectName.

Attribute: RedirectName

Default Value: "Default"


Redirect Handling

If the referrer page is the page to redirect to, no redirection is done.
So if you have the skin object on your home page with a redirect to Mobile.aspx, if the user comes from the Mobile.aspx page he does not get redirected back to that page.

In combination with RedirectMode set to "Always", the can lead to strange effects.
I suggest you set the RedirectMode to "Session" (previously "OncePerSession")

Backlink to the page that redirected.

The Style Helper Skin Object now support two ways for you can get a back link to the page that did the redirect:

A Cookie with the name "40Fingers.StyleHelper.RedirectedFrom" can be written on redirect.
It contains the original page url of the page that caused the redirect.
You can use Javascript (or .NET) to read its value.

Query String Parameter
The url of the original page can also be added to the redirect url as a querystring parameter.
The result will look like this:

As you can see the parameter is URL encoded.
Again, you can use Javascript to read the value and provide a "backlink"

Attribute: RedirectInfo
With this attribute you set how the Original page URL is made available, use:
     "QS" for QueryString
     "Cookie" to set a cookie
     "Cookie,QS" for both.

Example: RedirectInfo="Cookie"



Add Attributes to the HTML element

Attribute: AddHtmlAttribute

Use: This can be used for instance if you want to add support for the Open Graph protocol to a page. In that case you need to add attributes to the HTML element.

Basic: AddHtmlAttribute="Attribute,Value"
You can separate multiple values with a | character.
<fortyfingers:STYLEHELPER ID="SH1" AddHtmlAttribute="xmlns:fb,http://www.facebook.com/2008/fbml|xmlns:og,http://opengraphprotocol.org/schema/" 
runat="server" />
Would add opengraph and Facebook attributes.



The filters are for both Js, CSS and Meta tags.
If you need different filter for JS and CSS for instance, you have to add the skin object to the page twice.
You can however switch filtering on/off for removal/adding.

FilterRemove attribute
Used to switch filtering for CSS file removal on or off (defaults to true).

FilterAdd attribute
Used to switch filtering for CSS / JS / Meta tag file removal on or off (defaults to true).

Effect or filters

Only filters that have a value set are used.
Most filters accept a comma (,) separated list.
If one of them fits, the filter passes.
The result is an OR combination of the different values.
If you use IfUserName="Timo,Peter" the filter is passed if the Username of the current User = Timo OR Peter.

Excluding values

You can exclude values too, you do this by starting the value with an exclamation sign (!).
IfUserName="!Timo" will pass for all authenticated users but Timo.
IfUserName="!Timo,!Peter" passes for all users but Timo and Peter

Filter Matching

Most filter use a regular expression meaning that "Tim" will match both "Tim" and "Timo".
If you want to match only "Tim" you should add a $ at the end; "Tim$".
$ references the end of a string in regular expressions.

The Filters are not case sensitive.

Debug you filters


If the filters don't behave the way you expect them, you can force the skin object to write some of the detected values to the page.
This includes the Browser version, current user name, Roles, etc.

All filters listed at the bottom of this page


Supported Filters

Browser (+ version)


Will filter on the visitors browser and version.
You can also exclude browsers.
Pass a list of comma separated browsernames. Browsers = "ie,firefox" would only add the files if the visitor uses ie or firefox.
You can also filter on browser version, for that you need to add the version and an equals sign.
The version can be passed as as a number with major and sub version number.
You set how the version is interpreted by adding a an equasion sign.
Use = for this specific browser version.
Use > n, for browser version higher then n
Use < n, for browser version lower then n
You can exclude a certain browser by starting with an exclamation sign.

Browser = "Firefox" Will render for all Firefox browsers
Browser = "!Firefox" Will render for all browsers that are not Firefox
Browser = "IE=6" Will render only for Internet Explorer 6
Browser = "IE<8" Will render for IE browsers below version 8
Browser = "!IE<7" Will render for any browser but IE below 7

Notes on browser detection:
The browser is tested against how ASP.NET detects the browser.
This is done using browser files in the App_Brosers folder of DNN.
This is not always 100% correct, especially for not so common browsers
You can always (find an) update for the browser files, to make ASP.NET detect the browser correctly

Alternatively you could use the UserAgent attribute to interpret the raw user agent string.

Check for mobile browsers

Attribute: IfMobile="True/False"

Use: With this filter you can filter on "Mobile visitors".
It uses this technique to check if the users browser is a mobile browser: http://detectmobilebrowser.com/

If you don't set the attribute, there is no filtering.
You set the attribute to True if you want to filter on Mobile browsers.
You set the attribute to False if you want to filter on NON-Mobile browsers.

<fortyfingers:STYLEHELPER ID="FFSH1" IfMobile="True" AddCssFile="[S]//Mobile.css" runat="server" />

Will load Mobile.css if the users uses a Mobile browser

UserAgent String


Compares your values with the detected user agent string (using regular expressions)
An example user agent string for Firefox looks lik this:
"Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv: Gecko/20100401 Firefox/3.6.3"

IfUserAgentString="firefox" would match all freifox browsers (ASP.NET independent)



Checks if the current user name is one of the values you pass.

IfUserName="Timo,Peter", will pass if the username containIfUserName="!Timo,!Peter", will pass if the username does not contain Timo nor Peter.



Checks if the current user is in any of the roles you pass.
You can pass multiple roles (comma separated).

IfRole="Administrators" will match all users in the Administrators role.
IfRole="!Administrators" will match all users not in the Administrators role.



Tests if the value you pass is part of the current pages URL.
You can also use this to test for certain pages, portal alias etc.

IfURL="Contact" matches all pages with contact in the URL.
IfURL="!Contact" matches all pages without contact in the URL.
IfURL=" www.mydomain.com" will match a certain domainname (or portal alias)

Current Culture


Tests if the current ASP.NET culture, matches one of the passed values.
The format used is the ASP.NET culture format: en-US, fr-FR, NL-nl etc)

IfCulture="fr-FR" will match if the culture is fr-FR.
IfCulture="fr-" will match all cultures using French.
IfCulture="!fr-" will match all cultures, but the ones using french.


Text Direction


Tests the current text direction.
You can use either "rtl" or ltr"

IfTextDir="rtl" will pass for RTL languages

Query String


Filter with the querystring parameter.
This means you could switch a CSS file off or on using a query string parameter.
You pass the parameter name and value separated by a semicolon.

IfQS="color:red" could load a css file using this URL:
Please note that this is not persistent, the next page without the querystring parameter, the file will not be loaded.
In a future version I'll add support for cookies, so the file will be persistent.