40FINGERS DNN Nederlands40FINGERS DNN English

Our Blog

Menu: Blog

Style Helper Skin Object 02.02.01 for DotNetNuke 5

By: Timo Breumelhof

40Fingers StyleHelper DotNetNuke Skin Object

Update: Raphael Müller reported a bug in v 02.02.00.
It got fixed and we released v 02.02.01

New:

Filenames for Css & JS Files templatable

The 40Fingers DotNetNuke Style Helper skin object now allows you to load a stylesheet based on (for now) Portalid and a Query String parameter.
I have used this where a client used the same skin with different colors on several portals.
To avoid creating 10 DotNetNuke skins and being forced to update them all, if anything changes, I added this option.

The DotNetNuke skin I created for the client is a Host skin and contains a Portal-n.css file for every portal, where n is the Portalid.
If a new portal with Portalid=9 is created (using different colors), I add a Portal-9.css stylesheet to the skin.
The new skin is installled and the colors switch automatically for the new portal.

Available 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)

 

Add to Head of the DotNetNuke 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" />'

Remove DotNetNuke 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"

Improved Redirect Handling

There were some issues I had with the redirect handling.
Example:
You want to redirect Mobile users to a DotNetNuke page called Mobile.aspx.
The issue with the previous implementation was that if the user would land on the Mobile.aspx page, then if he would click a link to the "regular home page", he got redirected to the Mobile page again.
This was due to the fact that the cookie checking the redirect was not written in that case, as the user has not been on the "Home page" yet.

To prevent this, I added a check:
If the referrer page is the page to redirect to, no redirection is done.

So if your on the Mobile.aspx page and click a link to the regular home page, you don't get redirected, bcause that would take you back to the Mobile.aspx 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.

I got a question to make the original landing DotNetNuke page available somehow.
The use case is this:
- A user googles for a Product and lands on your products page (not the home page).
- You want to redirect a Mobile user to the Mobile site, but also make the link to the original Products page available.

The Style Helper Skin Object now support two ways you can get back 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"

You can download the new version of the DotNetNuke  Skin Object here:
http://dnnskinextensions.codeplex.com/releases/view/73344

Full documentation here:
http://www.40fingers.net/WeblogsNews/Weblogs/tabid/58/ID/23/language/en-US/Style-Helper-Skin-Object-Documentation.aspx