1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Change language text to a flag

Discussion in 'Styling and Customization Questions' started by Betclever, Mar 19, 2015.

  1. Betclever

    Betclever Active Member

    Hello all,

    Any possibility to change the word "English EN" to a flag with the country?

    If yes, I'm using 3 languages.

    Thanks.
     
  2. Betclever

    Betclever Active Member

    UP please
     
  3. 51463

    51463 Well-Known Member

  4. Dylan V

    Dylan V Well-Known Member

    Hi,

    I'll give you my solution to do that. First, go to the templates of your style and search for "footer". Now, search this line of code:
    Code:
                <dl class="choosers">
                    <xen:if is="{$canChangeStyle}">
                        <dt>{xen:phrase style}</dt>
                        <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                    </xen:if>
                    <xen:if is="{$canChangeLanguage}">
                        <dt>{xen:phrase language}</dt>
                        <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                    </xen:if>
                </dl>
    and replace it with:
    Code:
                <dl id="styleChooser" class="choosers">
                    <xen:if is="{$canChangeStyle}">
                        <dt>{xen:phrase style}</dt>
                        <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                    </xen:if>
                </dl>
                <dl id="languageChooser" class="choosers">
                    <xen:if is="{$canChangeLanguage}">
                        <dd><a href="{xen:link 'misc/language', '', 'language_id=1', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">English</a></dd>
                        <dd><a href="{xen:link 'misc/language', '', 'language_id=2', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">French</a></dd>
                    </xen:if>
                </dl>
    These lines represent, for example, the English and French languages:
    Code:
    <dd><a href="{xen:link 'misc/language', '', 'language_id=1', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">English</a></dd>
                        <dd><a href="{xen:link 'misc/language', '', 'language_id=2', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">French</a></dd>
    If you want to add another language, simply add this line below the last language:
    Code:
    <dd><a href="{xen:link 'misc/language', '', 'language_id=2', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">Language Name</a></dd>
    This:
    Code:
    language_id=1
    represents the id of the language that you can find here:

    Screenshot_2.png

    Then, go to "EXTRA.css" and add this:
    Code:
    #languageChooser
    {
        text-indent: -9999px
    }
    
    #languageChooser dd a:before
    {
        content: "";
        float: left;
        width: 16px;
        height: 16px;
        margin: 1px 5px 0 0;
    }
    
    #languageChooser dd:nth-child(1) a:before
    {
        background: url('@imagePath/us.png') no-repeat;
    }
    
    #languageChooser dd:nth-child(2) a:before
    {
        background: url('@imagePath/fr.png') no-repeat;
    }
    :nth-child(1) represents the first language and if you want add a second language, add :nth-child(2), :nth-child(3) for the third language, etc.

    I recommend these icons: http://www.famfamfam.com/lab/icons/flags/

    Result:

    Screenshot_1.png
     
    Last edited: Mar 20, 2015
  5. NinaMcI

    NinaMcI Active Member

    Hi @Dylan V . Thanks very much for sharing how do do this. I've successfully added the flag icons to the footer, and also in the header as you can see in the image below. I cannot for the life of me though get the icons to align side by side rather than one on top of each other.
    I wonder if you can help me with this?

    upload_2015-5-18_13-46-34.png
     
    51463 likes this.
  6. Jallah

    Jallah New Member

    If you use a custom style it's the code in it.
    As we can see on your screenshot it's a different footer than the default.
    @Dylan V is testing on the Default style that's why it's working for him and not you.
     
  7. NinaMcI

    NinaMcI Active Member

    Thanks for your reply @Jallah. The screen shot is actually the header (not the footer). It worked fine in the footer. I just don't know what code to use to make the flags align next to each other :(
     
  8. Jme4200

    Jme4200 New Member

    Thanks for this, worked perfectly on default theme!

    Just to add to this, I also use a custom theme on my xenforo, and i found that by removing the line of code below, it works perfectly with my custom theme

    HTML:
    #languageChooser
    {
        text-indent: -9999px
    }
    [​IMG]
     

Share This Page