Hello there! This blog article is a follow-up to replace the original article I wrote and cross-posted way back in 2010. Wow!! I've moved it here, due to this topic coming back up in the forums recently.

Here we go...

I was asked today how to use the Text skin object in DNN.  Instead of writing a long tutorial or e-mail about it, I tried looking for an existing blog or article describing this.  I would’ve been happy to recommend such a resource, but I was unable to find one despite several web searches.  This leads me to the post you’re reading.

FYI – If you have such an article, feel free to let us know in the comments below, but also know that the site where your article is needs better SEO.  ;)

What is a Theme Object?

First of all, a theme object is an ASP.NET user control that is used in DNN themes to provide a limited feature.  For example, the search box, menu, login link, copyright statement, and more, are all skin objects.  They allow a skin designer to include dynamic content without having to know how to build the content itself, or knowing any programming.

Other than the previous description, this post will assume that you know how to create and package your own theme.

Text Theme Object

The Text theme object itself is a very useful feature in theming, as it allows you to include localized text, while not having to create a copy of the theme for each language, or using any other number of workarounds.

For example, if you have static text next to your login theme object that says, “Welcome, “ then you might want to have alternatives for another language, if you plan to support it.

I am going to use that example for the rest of this post.

The Code

There is minimal code needed to implement the Text theme object.  If you’re using an HTML skin, then you would simply need to do the following:

<object id="dnnTEXT-Welcome" codetype="dotnetnuke/server" codebase="TEXT">

    <param name="ShowText" value="Welcome, " />

    <param name="CssClass" value="NormalBold" />

    <param name="ResourceKey" value="Welcome.Text" />

    <param name="ReplaceTokens" value="False" />

</object>

If you are using an ASCX skin (which you should be), then you would need two updates.  First, put this line of code into the top section of the source:

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

Next, put this code into the appropriate spot of the source in the theme:

<dnn:TEXT runat="server" id="dnnTEXT-Welcome" ShowText="Welcome, " 

CssClass="NormalBold" ResourceKey="Welcome.Text" ReplaceTokens="False" />

Resource Files

Next, you need to make sure your theme has resource files.  In your skin package, you should have a folder named App_LocalResources.  This folder will contain the necessary files to tell your skin the appropriate text to use for the theme object when the specific language is asked for during the page request life cycle.

If your skin file is named index.ascx or index.html, then your default resource file for English would be named index.ascx.resx.  If your additional supported language is French, your filename might be index.ascx.fr-FR.resx.

The English file code would be something like this:

<?xml version="1.0" encoding="utf-8"?>

<root>

  <data name="Welcome.Text">

    <value>Welcome, </value>

  </data>

</root>

The respective code for the French language file might look like this:

<?xml version="1.0" encoding="utf-8"?>

<root>

  <data name="Welcome.Text">

    <value>Accueil, </value>

  </data>

</root>

Text Theme Object Properties Explained

There are a few properties that you’ve seen in the previous examples that you might be wondering about.  Here is an explanation of those properties:

Runat – (required, ASCX only) The value must be ‘server’
Id – (required) This is a unique name for the tag, much like in standard HTML
ShowText – (optional) This value will be used as the default, should an appropriate resources file for the current language not be found
CssClass – (optional) This value is the name of a CSS class that will be available to the rendered HTML page to stylize the text in the web browser
ResourceKey – (required) This value references the id (name) of the text to retrieve from the resources file
ReplaceTokens – (optional) This true/false value will tell DNN to look for system tokens and replace them with the appropriate text

That’s it.  Everything should work!