40FINGERS DNN Nederlands40FINGERS DNN English

DNN Style Helper Documentation

About StyleHelper Skin Object for DNN

The 40FINGERS Style Helper Skin object allows you to manipulate the CSS, Javascript links and meta tags DNN loads by default.
You can remove them, change them and add your own.

The StyleHelper also allows you to do this only when certain conditions are met.
Some examples of the available conditions are: browser type / version, username, role, query string etc.
These filters can be positive (include) or negative (exclude).

Quick Start

  1. Download the StyleHelper Skin Object below
  2. Install the StyleHelper on your DNN installation
  3. Add a StyleHelper reference to your DNN skin

Please note:
The Style Helper is a DNN Skin Object.
This means you can only use it from your skin, you can't use it as a Module.

Download Stylehelper Skin Object

40F DNN StyleHelper 02.09.07

Released: 24 November 2017

Fixed

  • Order of Tabs in BodyClass in an ML website.
  • Issue with Browser version for IE 11

40F DNN StyleHelper 02.09.06

Released: 13 July 2017

Added

  • AddToBodyClass

    This will add a class to the already set Body Class.
    Mostly used to conditionally add a class to the Body tag.

  • [TOKENS] for BodyClass and AddToHead


    [Portal:Name] = Portal Name
    [Page:IconFile] = The Current Page Icon File
    [Page:IconFileLarge] = The Current Page Large Icon File

40F DNN StyleHelper 02.09.05

Released: 1 April 2017

Added

  • ForceSkinCssOrder

    This will move both Skin.css and Portal.css to the end of the head.
    Correcting any Extension that injects its style-sheets in the wrong order (after Skin.css).

40F DNN StyleHelper 02.09.04

Released: 14 January 2017

Fixed

  • IfBrowser now correctly works for MS Edge.


40F DNN StyleHelper 02.09.03

Released: 16 December 2016

Fixed

  • Token in Body CSS class

    Issue with [Portal:Id] token in Body CSS class

40F DNN StyleHelper 02.09.02

Released: 18 November 2016

Added

  • Attribute: "CssClassCase"

    With this attribute you can set the casing of the generated Css Classes.
    Possible values: "None", "lowercase", "UPPERCASE", "PascalCase"
    "None" is default.
    Please note that this will also change the casing of the letters in the template you passed

Improved

  • Removed split string from AddToHead

    The string passed to AddToHead was split in items on every occurrence of "||". This caused issues with the injection of some javascripts.
    I now removed the split as it does not seem to add anything and removing should not cause any issues.

40F DNN StyleHelper 02.09.01

Released: 23 September 2016

Fixed

  • "Entities.Portals"

    Issue where the use of "Entities.Portals" conflicted with other components on the page.

40F DNN StyleHelper 02.09.00

Released: 23 September 2016

Release notes:

This version will work with DNN 06.01.01 and up.

Improved

  • Parsing of the tokens

    Changed parsing of the tokens so you can use a lot of additional tokens for the Body class.
    [Portal:Id],[PortalId],[Portal:Alias],[Page:Name],[Page:Level],[Page:Title],[Page:Description],[Page:Url],[Page:RelativeUrl],[Page:Id],[Page:Skin],[Page:Container]

40F DNN StyleHelper 02.08.12

Released: 19 January 2016

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • URL correction

    IfURL now checks against the URL in the Address bar, not the DNN Url

Fixed

  • GetBrowserClass

    Small issue in GetBrowserClass()

40F DNN StyleHelper 02.08.11

Released: 19 August 2015

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • New tokens for Bodyclass

    New tokens for Bodyclass; [PageName] & [PageLevel]
    Will render the current page name and level as a class.

40F DNN StyleHelper 02.08.10

Released: 25 July 2015

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • New token for Bodyclass

    New token for Bodyclass; [IE] will render the current IE version and a class to indicate it's position to IE12
    For IE9 this will render the classes: ie9 lt-ie10 lt-ie11 lt-ie12

40F DNN StyleHelper 02.08.09

Released: 3 June 2015

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • AddCssFile

    AddCssFile now accepts path starting with "http://", "https://" and "//" without adding the skin path.

40F DNN StyleHelper 02.08.08

Released: 6 May 2015

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • "Edit" for users

    AddBodyClass reported "Edit" for users without any edit rights. This was caused by DNN reporting the Controlpanel being in Edit state for registered users and is now fixed by adding an extra check.

40F DNN StyleHelper 02.08.07

Released: 21 February 2015

Release notes:

This version will work with DNN 06.01.01 and up.

Improved

  • Doctype

    Doctype is no longer case sensitive + you can now also use "html5" (was "html 5" before)

  • Packaging script

    Packaging script changes(should not influence functionality)

Fixed

  • AddToBodyTop

    AddToBodyTop, now injects the content just after <body>

  • AddToBodyBottom

    AddToBodyBottom, now injects the content just before </body>

40F DNN StyleHelper 02.08.06

Released: 14 October 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • CorrectModuleCss attribute

    Some module load style sheets after skin.css, while they should be loaded before.
    Although you can overwrite their styles by using a more specific selector or !important, I prefer them loading in the correct order.<br />
    If CorrectModuleCss = true, StyleHelper will look for style sheets from the /Desktopmodules/ and /Admin/ folder and move them to position before skin.css.
    (Only for style sheets loaded through Client Resource Management)

  • AddAfterBody attribute

    This will render the passed string after the Body tag, before the From tag.
    In some cases Google analytics needs code to be injected between Body and Form tag.
    Example: <fortyfingers:STYLEHELPER ID="SH1" AddAfterBody="Injected after the Body tag" runat="server" />

40F DNN StyleHelper 02.08.05

Released: 27 September 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • BodyClass Token for Control panel state

    BodyClass token: [CPState].
    This will render "View, Edit or Layout" depending on the state of the controlpanel.
    Default in BodyClass attribute = "CP-[CPState]", rendering:
    CP-None, CP-View, CP-Edit or CP-Layout

40F DNN StyleHelper 02.08.04

Released: 11 July 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • Doctype attribute

    Fixed fallback for unsupported doctype attribute to: do nothing

40F DNN StyleHelper 02.08.03

Released: 8 July 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • RedirectStop issues

    Fixed some small RedirectStop issues

40F DNN StyleHelper 02.08.02

Released: 10 May 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • Page Type Body Class

    When you add this to the Body Class Attribute: [PageType]
    The Body element on the page will get a class indicating if this is the Home, Splash, Login page etc.
    The injected class will be like this: "PageType_xxx"
    Where "xxx" can be replaced by "Home", "Splash", "Login", "Register", "User", "Search" or "Normal" depending on the Site Settings.

40F DNN StyleHelper 02.08.01

Released: 9 May 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • Remove Javascript files

    The new "RemoveJsFile" attribute allows you to remove JS files that have been injected using DNN Client Resource Mangement (CRM).
    This version will only remove DNN's JS files, not the ones injected by Modules!
    In short; when a JS link in the HEAD of the page looks like this: ..../file.js?cdv=xx you can remove it.
    (Don't include the ?cdv=xx" part when referencing a file for removal)

  • Redirect user without page rights

    Attribute: IfNoViewRights

    This can be used to redirect Users that don't have view rights on a page.
    I used this to give logged in users a better explanation than the standard DNN message.
    Should be used in combination with the RedirectTo attribute for the redirect URL.
    Ignores the redirectmode attribute as the redirect needs to be done before DNN processes the page.

40F DNN StyleHelper 02.08.00

Released: 23 April 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • Remove Control

    This will hide the control based on its server id (the ID in the ascx file).
    Can be used to remove for instance a pane, based on one of the conditions. RemoveControl="RightPane" will remove the RightPane from the page source.
    Multiple ID's can be passed like this: RemoveControl="BottomPane||RightPane"

40F DNN StyleHelper 02.07.06

Released: 29 January 2014

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • BodyClassToken for Levels

    BodyClass="[BcLevel]" will render a class for the current pages level and it's parents

Fixed

  • IE 11 detection

    ASP.NET detects IE11 as "internetexplorer", while previous versions returned "ie".
    That's corrected now, StyleHelper now also return "ie" for IE11. :-)

40F DNN StyleHelper 02.07.05

Released: 27 November 2013

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • Mulitple remove from head issue

    Adding multiple items to remove from the head caused an error.
    That's fixed now.

40F DNN StyleHelper 02.07.04

Released: 14 November 2013

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • [Culture] and [Language] tokens for BodyClass

    This allows you to address certain cultures or languages using CSS.
    The default template for the BodyClass attribute is now: "[BcName] [BcId] [BcNr] [UserPageRoles] Cult-[Culture] Lang-[Language]"
    Example body element:
    <body class="... Cult-en-US Lang-en">

40F DNN StyleHelper 02.07.03

Released: 13 November 2013

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • Order of inject and remove from head

    The order of injecting and removing was incorrect.
    Because of this a combination of removing and injecting could also remove the injected element.

40F DNN StyleHelper 02.07.02

Released: 24 October 2013

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • comma separated values
  • mobile detection REGEX

40F DNN StyleHelper 02.07.01

Released: 4 October 2013

Release notes:

This version will work with DNN 06.01.01 and up.

Added

  • IfUserMode

    Condition based on the user mode
    Possible values:
    None = User Not logged in</li>
    View = User Logged in, Control Panel in View Mode
    Edit = User Logged in, Control Panel in Edit Mode
    Layout = User Logged in, Control Panel in Layout Mode

40F DNN StyleHelper 02.07.00

Released: 3 October 2013

Release notes:

This version will work with DNN 06.01.01 and up.

Fixed

  • Remove individual style sheets in DNN 6.1+

    From this version it is again possible to remove individual style sheets in DNN 6 & 7
    I found a way around the issues I had before, without adding a custom provider.

40F DNN StyleHelper 02.06.07

Released: 8 July 2014

Release notes:

This version will work with DNN 05.06.00 - 06.01.00.

Fixed

  • Redirect Stop issues

    Fixed some minor redirect Stop issues

40F DNN StyleHelper 02.06.06

Released: 26 September 2013

Release notes:

This version will work with DNN 05.06.00 and up.

Added

  • RemoveFromHead

    Allows you to remove elements from the head of the page, depending of their attributes.
    For instance: &lt;fortyfingers:STYLEHELPER ID=&quot;SH1&quot; RemoveFromHead=&quot;rel=SHORTCUT ICON&quot; runat=&quot;server&quot; /&gt;
    will remove the favicon.
    This will not work for the style sheets or JS as they are injected in a different way.
    Pass multiple pairs separated by two pipe characters (||).

  • AddToHead support tokens

    Now allows the use of tokens for the path. <br />
    For instance:
    <fortyfingers:STYLEHELPER ID="SH1" IfBrowser="!IE<9" AddToHead="<script src='SJs/40fingers.js' type='text/javascript'></script>" runat="server" />

    Will inject a JS file for all browsers but IE below version 9.<br />

    Tokens:
    [S] = Skin folder
    [P] = Portal Home directory
    [M] = Skin object home folder
    [R] = Installation Root
    [D] = DesktopModules Folder

40F DNN StyleHelper 02.06.05

Released: 28 August 2013

Release notes:

This version will work with DNN 05.06.00 and up.

Fixed

  • Page Order class in Body Class

    On upgraded installations where some pages have a CultureCode and some not the order was incorrect.
    This has been corrected by removing a not needed CultureCode check.

40F DNN StyleHelper 02.06.04

Released: 19 October 2012

Release notes:

This version will work with DNN 05.06.00 and up.

Added

  • Attribute ContentFalse

    This is the content that gets injected when the conditions

Fixed

  • SuperUser Detection

    Passing IfRole="SuperUsers" did not detect Host users
    This has been corrected now and the code has been rewritten.

40F DNN StyleHelper 02.06.03

Released: 18 September 2012

Improved

  • IfQs behavior

    lfQs also to test if a query String Parameter exists
    You can now pass a QS paramter without value
    Where IfQS="ProductId:122" would test for a QS parameter ProductId with value 122
    IfQS="ProductId" allows you to test if querystring parameter ProductId exists (has any value).

40F DNN StyleHelper 02.06.01

Released: 13 July 2012

Release notes:

Changes to detectmobilebrowser detection:

Added

  • Attribute DetectMobileRegex1

    You can use this attribute to overwrite the first regex used by the detectmobilebrowser.com method

  • Attribute DetectMobileRegex2

    You can use this attribute to overwrite the second regex used by the detectmobilebrowser.com method

  • Attribute DetectMobileIncludeTablet

    On detectmobilebrowser.com/about> there's a method to include tablets as mobile devices (by changing the first regex).
    If you set DetectMobileIncludeTablet to True, the first regex is replaced and Tablets are treated as mobile (although I'm not 100% sure this is up to date)

40F DNN StyleHelper 02.06.00

Released: 4 July 2012

Release notes:

If you upgrade to this version and have used redirecting in your existing skins, make sure to test them!
Changes to Redirect:

Intro: Redirect Logic changes
The way redirect were handled in a previous version was quite basic.
I mostly used it to redirect Mobile devices from the Home page of a regular website to a mobile site
I came a cross a more complex problem for a client were certain page should be redirected to the matching mobile pages.
To support that I restructured Redirecting and when to stop redirecting.

Added

  • Attribute RedirectName

    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 RedirectStop

    With this attribute you set how you on what conditions the redirect is refused
    If the redirect is refused, it depends on the RedirectMode attribute what happens the next time the user visits the site.
    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 floowing Query String Parameter is passed: NoRedirect=True
    These values can be combined, comma separated.
    Default Value: "RedirectUrl,QueryString"

  • Attribute RedirectBaseUrl

    You can use this as a base for redirecting.
    If set this will be combined with the RedirectUrl to the Url to redirect to.
    You can use the RedirectBaseUrl in the RedirectStop to stop redirecting if you link back from any page on the redirect site.

  • Relationships with RedirectMode

    With "RedirectStop" you set on what conditions redirect should NOT take place.
    With "RedirectMode" you set what should happen after a redirect did not take place.

Improved

  • Attribute: RedirectMode

    You can now use: Always, Once, Session & Never
    Never; was added as a way to not remove the the skin object, but switch the rediect off for testing purposes.
    Session is the new default value, this used to be "Once". This was changed because session is the most common scenario.

  • Body Class


    Added attribute: FilterBodyClass
    By default the bodyclass ignores the filters you use.
    It if you set this attribute to True, the body class is only added if the filter conditions are met.

Fixed

  • Bug in AddHtmlAttributes in DNN 6


    The code to insert attributes to the HTML element changed in DNN 6 and did not work anymore. This has been corrected now.

40F DNN StyleHelper 02.05.00

Released: 5 June 2012

Release notes:

Release For DNN 5.2.3+

Added

  • Mobile Redirect QS paramter re-use

    For mobile redirect, I added a way to copy querystringparameters from the orignal URL to the Redirect URL.

    For that I extended the RedirectTo attribute by adding a Querystring Parameter Token: [QS:Parameter]

    This will look for a Query String Parameter and add it to the redirect URL.

40F DNN StyleHelper 02.04.01

Released: 25 May 2012

Release notes:

Release For DNN 5.2.3+


Added

  • 2 path tokens add to the LoadCssFile attribute:

    [R] = Root folder ("/")
    [D] = DesktopModules Folder ('/DesktopModules/")

40F DNN StyleHelper 02.04.00

Released: 16 April 2012

Added

40F DNN StyleHelper 02.03.00

Released: 20 January 2011

Added

  • Change an existing Meta tag

    You can use the ChangeMeta attribute to change an existing Meta tag.

    Use:
    Pass id of the meta tag and the atribute to change like this:
    id=xxx|myattr=yyy
    This will look for a meta tag with id xxx and change the myattr attribute to yyy.
    You can use some tokens, this is explained below
    You can pass mulitple meta tags at once by separating them by double pipe characers:
    id=xxx|attribute=yyy||id=qqq|attribute=rrr
    Example:
    ChangeMeta='id=MetaDescription|content=NewDescription||id=MetaKeywords|content="Timo, 40fingers'

  • You can now also use tokens to add or manipulate Meta tags

    Add Meta tags using the AddToHead attribute or ChangeMeta Attribute

    Tokens you can use:
    [PortalId] the Portalid
    [SQ:Property] will be replaced by the value of the Query String Parameter named "Property"

    • will reference the original value set in the admin interface (only for ChangeMeta)


    These can be used to SEO optimizations, some examples:
    ChangeMeta="id=MetaDescription|content=Our Product is [QS:Product]"
    This will add the passed Product Query String Parameter.
    So this URL:
    .......Default.aspx?Product=DotNetNuke
    will result in this Meta Description:
    "Our Product is DotNetNuke"

    As you can also reference the original Description:
    ChangeMeta="id=MetaDescription|content=*"
    This means you could enter the same Description in the DNN admin interface:
    Our Product is [QS:Product]
    With the same effect, but the advantage that the text is not hard-coded in the skin

Stylehelper documentation

How to Add the skin object to your skin

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

 

Options and attributes


Remove CSS links from the head

Attribute:
RemoveCssFile

Use:
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.

Examples:
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" />'

Tokens:
You can use also use the tokens that are listed under AddBodyClass in the AddToHead attribute.

 

Add CSS/JS files

Attribute:
For CSS files: AddCssFile
For JS files: AddJSFile

Use:
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:

PortalId
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

Use:
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:
False

 

Correct Module.cssload order

Attribute: CorrectModuleCss

Use:
Some extensions do not follow the DNN style sheet load order.
(where all CSS should be loaded before Skin.css)
With this option you can correct that for extensions that use CRM to load styel sheets

Possible Values: True / False

Default Value:: False

<fortyfingers:STYLEHELPER ID="SH1" CorrectModuleCss="True" runat="server" />

 

Add Meta Tags

Attribute: AddMetaTags

Use:
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:

Example:

<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.

 

Change DNN Meta Tags.

You can change some of the existing default DNN meta tags.
The ones that have an ID in the page source can be changed.

Attribute:ChangeMeta
A Meta tag to change is passed like this: id=xxx|content=yyy
Where xxx is the id of the meta tag
yyy is the new content
Example: ChangeMeta='id=MetaRobots|content=noindex, nofollow'
This will set the DNN page to NoIndex from the skin.

 

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 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.

Attribute: AddBodyClass (True/False)

Use: This will inject the body class with the default template

Attribute: BodyClass (String)

Use: The template for the class. If you set this attribute you don't have to set the AddBodyClass attribute.
The default template is: "
Page-[Page:Name] Level-[Page:Level] [BcName] [BcId] [BcNr] CP-[CPState] [PageType] [UserPageRoles] Cult-[Culture] Lang-[Language] [IE]"

Portal Tokens

Token Description Results(s)
[Portal:Id] ID of the Portal 59
[Portal:Alias] Portal Alias dnn6dev.com/test-site
[Portal:Alias.Root] Portal Alias without Child portal part dnn6dev.com/
[Portal:Alias.Protocol] Current Protocol http/ https
[Portal:Name] Portal Name My Website

Current Page tokens

Token Description Result(s)
[Page:Name] Page Namen  Body_Class_All
[Page:Level] Page Level  1
[Page:Title] Title of the page  Body_Class_All
[Page:Description] Description of the page  
[Page:Url] URL of the page  
[Page:RelativeUrl] ID of the Portal  
[Page:Id] ID of the Page  
[Page:IconFile] The page's Icon File  
[Page:IconFileLarge] The page's Large Icon File  
[Page:Skin] Skin name  
[Page:Container] Container Name  
[CPState] ID of the Portal  
[Culture] Current Page Culture  
[Language] Current Page Language nl, en, fr

Other Tokens

[CPState] State of the control panel None, View, Edit, Layout
[PageType] Type of the page PageType_Home, PageType_Splash, PageType_Login, PageType_Register, PageType_User, PageType_Search, PageType_Admin, PageType_Normal
[IE] Is the browser is Internet Explorer add a class  

[UserPageRoles]

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)

Example: 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">

Tokens related to the current page's Breadcrumb

Token Description Result
[BcName] Will render the Page Names in the breadcrumb as classes

L0_Add_CSS_Classes L1_Body_Class_All

[BcId] Will render the Page Ids in the breadcrumb as a classes Explanation: 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
[BcNr] Will render the Page Order in the breadcrumb as a classes L0_Nr4 L1_Nr2

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

Example:
<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:

Cookie
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:
http://www.mysite.comt/Mobile.aspx?RedirectedFrom=http%3A%2F%2Fwww.mysite.com

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.
Example:
<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.

 

Filtering

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

Attribute:
ShowInfo

Use:
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)

Attribute:
IfBrowser

Use:
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.

Examples:
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.

Example:
<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

Attribute:
IfUserAgentString

Use:
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:1.9.2.3) Gecko/20100401 Firefox/3.6.3"

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

Username

Attribute:
IfUserName

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

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

UserRole

Attribute:
IfRole

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

Examples:

IfRole="None", will match all users not in any roles (unauthenticated users)
IfRole="Administrators" will match all users in the Administrators role.
IfRole="!Administrators" will match all users not in the Administrators role.
IfRole="SuperUsers" will match all Host / Superusers

 

URL

Attribute:
IfURL

Use:
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.

Example
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

Attribute:
IfCulture

Use:
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)

Examples:
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

Attribute:
IfTextDir

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

Example
IfTextDir="rtl" will pass for RTL languages

Query String

Attribute:
IfQS

Use:
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.
"Parameter:Value"

Example:
IfQS="color:red" could load a css file using this URL:
www.domain.com/?color=red.
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.

 

 

DNN Style Helper

Manipulate your DNN CSS, JS etc.

Subjects