• Share
    • Twitter
    • LinkedIn
    • Facebook
    • Email
  • Feedback
  • Improve this Doc
Show / Hide Table of Contents

Language Theme Object Introduction

DNN Version: 09.02.00
10/02/2024 • 3 minutes to read
Contributors  Timo-Breumelhof
10/02/2024  • 3 minutes to read  • Contributors  Timo-Breumelhof

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>

Theme ObjectsAbout ThemesCreating Themes
Back to top by the community, for the community... #DNNCMS