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
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.
Example: AddToHead='<script types="text/javacript">alert("Inject to Head Example")</script>||<meta property="og:title" content="my title" />'
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.
By default the skin path is used as basepath for the files.
(use the following tokens if you want to use another path)
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.
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.
You can load stylesheet with a querystring parameter in it's name
Example: AddCssFile="File.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
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
True / False
Correct Module.cssload order
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
You can add meta tags to the page head.
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.
<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.
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: "[BcName] [BcId] [BcNr]"
[BcName] Will render the Page Names in the breadcrumb as a class
[BcId] Will render the Page Ids in the breadcrumb as a class
[BcNr] Will render the Page Order in the breadcrumb as a class
Example: 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">
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
[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">
Set the Doctype of a skin
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.
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.
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
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.
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.
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.
Default Value: "Default"
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.
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.
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.
Add Attributes to the HTML element
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.
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/"
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.
Used to switch filtering for CSS file removal on or off (defaults to true).
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.
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
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
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
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
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:126.96.36.199) 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="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
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)
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.
Tests the current text direction.
You can use either "rtl" or ltr"
IfTextDir="rtl" will pass for RTL languages
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.