Custom Language Selector - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Custom Language Selector

  • Custom Language Selector
  • 281561_ls-1.jpg
    HI,
    i want modify my language selector like the attach image. How can i do this?

    Stefano
  • 282416_language-selector.jpg
    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