XF 1.4 Change language text to a flag

[Betclever]

Hello all,

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

If yes, I'm using 3 languages.

Thanks.

 

[Betclever]

UP please

 

[51463]

It's not possible with xenforo unless you custom change the templates.

read this

https://xenforo.com/community/threads/language-switch-phrase.11165

example
http://www.tsjechie.net/forum/

 

[Dylan V]

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:

            <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:

            <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:

<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:

<dd><a href="{xen:link 'misc/language', '', 'language_id=2', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">Language Name</a></dd>

This:

language_id=1

represents the id of the language that you can find here:



Then, go to "EXTRA.css" and add this:

#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:

 

[NinaMcI]

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?

 

[Jallah]

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?

View attachment 106385

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.

 

[NinaMcI]

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

 

[Jme4200]

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:

            <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:

            <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:

<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:

<dd><a href="{xen:link 'misc/language', '', 'language_id=2', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">Language Name</a></dd>

This:

language_id=1

represents the id of the language that you can find here:

View attachment 101789

Then, go to "EXTRA.css" and add this:

#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:

View attachment 101790

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

#languageChooser
{
    text-indent: -9999px
}