Some websites have content in a lot of different languages. When editors view the page tree in a specific language, pages that do not exist in that language are shown in a gray font and the language code of the page’s master language is shown.
As some of the language codes are kind of cryptic looking and the editors don’t always recognize all of them, they want to see the name of the language instead.
In a simplified example of an Alloy site viewed in Norwegian, only the start page is translated to Norwegian and the language codes are shown for the rest of the pages.
When faced with this challenge I initially reached for JavaScript, but struggled. Then I thought I nailed it overriding the Resolve-method in (take a deep breath) EPiServer.Cms.Shell.UI.Rest.Internal.MissingContentLanguageInformationResolver, but it had some nasty side-effects. I then turned to Episerver World, and Johan Kronberg suggested I tried a CSS-only solution.
Using the CSS content property, and the starts-with selector for selecting elements with a given title attribute, this targets the span elements containing the language code for all three languages, hiding the language code and adding the full language name. For this example, the editors only use Norwegian or English editor UI language.
span[title^="This page is in English."],
span[title^="This page is shown in English"] {
position: relative;
left: -9999px;
}
span[title^="This page is in English."]:after,
span[title^="This page is shown in English"]:after {
content: "English";
position: relative;
left: 9999px;
margin-left: -15px;
}
span[title^="Denne siden er på English."],
span[title^="Denne siden vises på English"] {
position: relative;
left: -9999px;
}
span[title^="Denne siden er på English."]:after,
span[title^="Denne siden vises på English"]:after {
content: "Engelsk";
position: relative;
left: 9999px;
margin-left: -15px;
}
span[title^="This page is in Norsk."],
span[title^="This page is shown in Norsk"] {
position: relative;
left: -9999px;
}
span[title^="This page is in Norsk."]:after,
span[title^="This page is shown in Norsk"]:after {
content: "Norwegian";
position: relative;
left: 9999px;
margin-left: -15px;
}
span[title^="Denne siden er på svenska."],
span[title^="Denne siden vises på svenska"] {
position: relative;
left: -9999px;
}
span[title^="Denne siden er på svenska."]:after,
span[title^="Denne siden vises på svenska"]:after {
content: "Svensk";
position: relative;
left: 9999px;
margin-left: -15px;
}
span[title^="This page is in svenska."],
span[title^="This page is shown in svenska"] {
position: relative;
left: -9999px;
}
span[title^="This page is in svenska."]:after,
span[title^="This page is shown in svenska"]:after {
content: "Swedish";
position: relative;
left: 9999px;
margin-left: -15px;
}
span[title^="Denne siden er på svenska."],
span[title^="Denne siden vises på svenska"] {
position: relative;
left: -9999px;
}
span[title^="Denne siden er på svenska."]:after,
span[title^="Denne siden vises på svenska"]:after {
content: "Svensk";
position: relative;
left: 9999px;
margin-left: -15px;
}
The final result looks like this:
The CSS file were registered in module.config like this:
<clientResources>
<add name="epi-cms.widgets.base"
path="Styles/LanguageNameInPageTree.css"
resourceType="Style" />
</clientResources>It is possible that Episerver will change these texts (or the markup) in future releases, but it works for now...