You supply the artwork… we’ll build the skins!™

The DotNetNuke community is one of the best around
which makes contributing so much easier

You are here: Blog
Saturday, November 18, 2017

Dotnetnuke, Web Design and Online Marketing articles

Adding texts to your skins

Jan 16

Written by:
Monday, January 16, 2012  RssIcon

DotNetNuke Skin Localization

When converting a web design (Photoshop, Dreamweaver, Indesign, HTML...) to a DotNetNuke skin you have a couple options for adding texts.
I'm not talking about dynamic content here. Dynamic content text, the one your editors will likely edit and change, should obviously not be fixed in the skin. In this case you will create a regular pane so the editors can add an HTML module and customize the text there.

Now imagine you have a footer where you want the Business name, phone number and email address. This text will usually never change and you want it to appear on all pages.
In this case you can opt to add the text directly on the skin or again, create a content pane and let your users enter it. If you need some nice design here, maybe you'll prefer to make it fixed on the skin so it's never changed and always looks great.

In the previous example, no matter how many languages you site is, the business name, email and phone will always be the same. So it still makes sense to have them fixed on the skin.

But things go complicated quite easily. What if the phone for English customers is different from the phone for international customers, and you need that it changes with the active language?
Will you create two skins? Will you create a pane and convert the skin text to an HTML module?

The Text SkinObject

There is another flexible option based on the Text SkinObject.
With this skin object you can add texts to you skins that are not hard coded on the skin and are fully localized.

The Text skin object uses the DotNetNuke localization capabilities to display translated texts on the skin based on the current active language.
The text will be rendered inside a tag, and you can include there pretty much what you want (text, links, images, ...).

Configuration

The Text skinobject supports four properties:
  • CssClass: that class that will be applied to the outer tag
  • Resourcekey: the name of the key in the resource file that will be used to find the text to inject in the skin
  • ShowText: if the resourcekey is not found or empty, the text in this property will be used instead. Consider this the default text. Note: in DNN5 this property was named Text but was changed on DNN6.
  • ReplaceTokens: (true/false) when this option is set to true DotNetNuke will replace system tokens with their actual values at runtime.

Here is an example of the Text skinobject included in an HTML skin:

<object id="dnnTEXT1" codetype="dotnetnuke/server" codebase="TEXT">
    <param name="ShowText" value="You are here:" />
    <param name="CssClass" value="Breadcrumb" />
    <param name="ResourceKey" value="Breadcrumb.Text" />
    <param name="ReplaceTokens" value="False" />
object>

If you are using ASCX skins you first have to reference the source file:

<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>

and then you can use it with this code:

<dnn:TEXT runat="server" id="dnnTEXT1"
    ShowText="You are here:"
    CssClass="Breadcrumb"
    ResourceKey="Breadcrum.Text"
    ReplaceTokens="False" />

Then you have to create a resource file with the same name as the skin file. For example if you have skin named "IndexFull.ascx", you have to create a resource file with the name "IndexFull.ascx.resx" in the folder App_LocalResources. Then provide a separate translated version of the same file for each language you have to support (IndexFull.ascx.es-ES.resx, IndexFull.ascx.fr-FR.resx, IndexFull.ascx.pt-PT.resx, ...).

Pro Tip


If you have different skin layouts using more than one skin file you can use a "SharedResources.resx" resource file to include keys shared by all skins. This is useful when using multiple languages since you will only have to translate one file.

Copyright 2009 - 2011 PSDtoDNN - You supply the artwork… we'll build the skins!™
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation