Language Theme Object Introduction

DNN Version: 09.02.00

• 3 minutes to read

 • 3 minutes to read

The skin object will show you the language in which the current page is available. It supports 2 display modes: dropdown menu and template based repeater (you can even use both at the same time). Apart from that, there is a common header and a common footer available (both templatable).

All templates of the skinobject use the DNN core TokenReplace functionality as template engine. This means that you can control visible appearance of the language skin object to a great extent.

Current Version: 01.00.00

Include in Theme

ASCX

<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>  
<dnn:Language runat="server" id="dnnLanguage" ShowMenu="False" ShowLinks="True" />

HTML Token

[LANGUAGE]

HTML Object Token

<object id="dnnLANGUAGE" codetype="dotnetnuke/server" codebase="LANGUAGE" />

Attribute	Description	Default	Posssible Values	DNN Version
CssClass	Used to style the language dropdown list	SkinObject	String	01.00.00
ShowMenu	Display the dropdown menu	True	Boolean	01.00.00
ShowLinks	Display the language links repeater	False	Boolean	01.00.00
CommonHeaderTemplate	Template used as common header		HTML String	01.00.00
HeaderTemplate	Template for header		HTML String	01.00.00
ItemTemplate	Template for item		HTML String	01.00.00
AlternateTemplate	Template for alternate item		HTML String	01.00.00
SelectedItemTemplate	Template for Selected item		HTML String	01.00.00
SeparatorTemplate	Template for separator item		HTML String	01.00.00
FooterTemplate	Template for footer item		HTML String	01.00.00
CommonFooterTemplate	Template for common footer item		HTML String	01.00.00

Tokens

Name	Value	Description
"Core Token Replace"
[CULTURE:DISPLAYNAME]
[CULTURE:ENGLISHNAME]
[CULTURE:LCID]
[CULTURE:NAME]
[CULTURE:NATIVENAME]
[CULTURE:TWOLETTERISOCODE]
[CULTURE:THREELETTERISOCODE]
[URL]
[SELECTED]
[LABEL]
[I]
[P]
[S]
[G]

Examples:

Default

Default configuration

<dnn:LANGUAGE runat="server" ID="lang01" ShowMenu="False" ShowLinks="True" />

Only Dropdown

<dnn:LANGUAGE runat="server" ID="lang02" ShowMenu="True" ShowLinks="False" />

Dropdown + Flag

Displays dropdownlist and flag of currently selected language

<dnn:LANGUAGE runat="server" ID="lang03" ShowLinks="False"
ShowMenu="True" CommonFooterTemplate=' <img src="[I][FLAGSRC]"
alt="[CULTURE:NATIVENAME]" border="0" />' />

Displays text links for languages.

Selected language has different a Classname

<dnn:LANGUAGE runat="server" ID="lang04" 
		ShowLinks="True"
		ShowMenu="False" 
		ItemTemplate='<a href="[URL]" class="Language" title="[CULTURE:NATIVENAME]" ><span class="Language[SELECTED]">[CULTURE:NAME]</span></a>'
		AlternateTemplate='<a href="[URL]" class="Language" title="[CULTURE:NATIVENAME]" ><span class="Language[SELECTED]">[CULTURE:NAME]</span></a>'
		selectedItemTemplate='<a href="[URL]" class="Language" title="[CULTURE:NATIVENAME]" ><span class="Language[SELECTED]">[CULTURE:NAME]</span></a>'
/>

Displays Flags in Unordered list.

Example of a fully custom dropdown.

Please note that this uses some extra CSS and Javascript.

<dnn:LANGUAGE runat="server" ID="lang05" 
		
ShowLinks="True"
ShowMenu="False" 
HeaderTemplate='<ul class="language-ul-flags">'
ItemTemplate='<li class="lang-item lang-item-sel-[SELECTED]"><a href="[URL]" class="lang-link" title="[CULTURE:NATIVENAME]" ><img src="[I][FLAGSRC] " title="[CULTURE:NATIVENAME]" /></a></li>'
AlternateTemplate='<li class="lang-item lang-item-sel-[SELECTED]"><a href="[URL]" class="lang-link" title="[CULTURE:NATIVENAME]" ><img src="[I][FLAGSRC] " title="[CULTURE:NATIVENAME]" /></a></li>'
SelectedItemTemplate='<li class="lang-item lang-item-sel-[SELECTED]"><a href="[URL]" class="lang-link" title="[CULTURE:NATIVENAME]" ><img src="[I][FLAGSRC] " title="[CULTURE:NATIVENAME]" /></a><span class="lang-menu-toggle" id="lang-menu-toggle"></span></li>'
		FooterTemplate='</ul>'
		/>
<script>
	const langToggle = document.getElementById("lang-menu-toggle");
	langToggle.addEventListener("click", (event) => {
		langToggle.parentElement.parentElement.classList.toggle('lang-list-opened');
	});

</script>