Custom Language Selector - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 29-Jun-2011 00:00

HI,
i want modify my language selector like the attach image. How can i do this?

Stefano

Posted by Community Admin on 04-Jul-2011 00:00

Hello Stefano,

You can use the css rules of the basic theme as blueprint to achieve the design from the screenshot. In the Language selector designer choose "Horizontal list" option (see attachment) and paste the CSS from below to the theme which you have applied to the site. I have changed the original CSS so it looks more like the selector from the screenshot.

/* --- Horizontal language selector --- */

/* Language selector wrapper */

.sflanguagesHorizontalList

margin: 0;

padding: 0;

list-style-type: none;

/* Single language link wrapper */

.sflanguagesHorizontalList .sflanguageItem

margin: 0 0 0 25px;

padding: 0;

white-space: nowrap;

float: left;

list-style-type: disc;

.sflanguagesHorizontalList .sflanguageItem:first-child

margin-left: 0;

list-style-type: none;

/* Single language link */

.sflanguagesHorizontalList .sflanguageItem a:link, .sflanguagesHorizontalList .sflanguageItem a:visited, .sflanguagesHorizontalList .sflanguageItem a:hover, .sflanguagesHorizontalList .sflanguageItem a:active

color: #4d4d4b;

font-weight: bold;

.sflanguagesHorizontalList .sflanguageItem a:hover

color: #444;

/* Current language */

.sflanguagesHorizontalList .sflangSelected a:link, .sflanguagesHorizontalList .sflangSelected a:visited, .sflanguagesHorizontalList .sflangSelected a:hover, .sflanguagesHorizontalList .sflangSelected a:active

color: #bbb;

cursor: default;

Let us know if you need further help.

All the best,
Katia
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed