+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Custom Language Selector

Custom Language Selector

2 posts, 0 answered
  1. Stefano
    Stefano avatar
    29 posts
    Registered:
    14 Jun 2011
    29 Jun 2011
    Link to this post
    HI,
    i want modify my language selector like the attach image. How can i do this?

    Stefano
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    04 Jul 2011
    Link to this post
    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
2 posts, 0 answered