removing dropdown and display flag inline

[Nikoleta]

My question is if you know know how to remove the drop down and display the flags inline? want to have just two languages : one english and one bulgarian one
I go to FTP-> modules ->blocklanguages.tpl and this is the flowing code: 
<!-- Block languages module -->

{if count($languages) > 1}

<div id="languages_block_top">

<div id="countries">

{* @todo fix display current languages, removing the first foreach loop *}

{foreach from=$languages key=k item=language name="languages"}

{if $language.iso_code == $lang_iso}

<p class="selected_language">

<img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code|escape:'html':'UTF-8'}" width="16" height="11" />

</p>

{/if}

{/foreach}

<ul id="first-languages" class="countries_ul">

{foreach from=$languages key=k item=language name="languages"}

<li {if $language.iso_code == $lang_iso}class="selected_language"{/if}>

{if $language.iso_code != $lang_iso}

{assign var=indice_lang value=$language.id_lang}

{if isset($lang_rewrite_urls.$indice_lang)}

<a href="{$lang_rewrite_urls.$indice_lang|escape:htmlall}" title="{$language.name|escape:'html':'UTF-8'}" rel="alternate" hreflang="{$language.iso_code|escape:'html':'UTF-8'}">

{else}

<a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name|escape:'html':'UTF-8'}" rel="alternate" hreflang="{$language.iso_code|escape:'html':'UTF-8'}">

 

{/if}

{/if}

<img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code|escape:'html':'UTF-8'}" width="16" height="11" />

{if $language.iso_code != $lang_iso}

</a>

{/if}

</li>

{/foreach}

</ul>

</div>

</div>

 

<script type="text/javascript">

$(document).ready(function () {

$("#countries").mouseover(function(){

$(this).addClass("countries_hover");

$(".countries_ul").addClass("countries_ul_hover");

});

$("#countries").mouseout(function(){

$(this).removeClass("countries_hover");

$(".countries_ul").removeClass("countries_ul_hover");

});

 

});

</script>

{/if}

<!-- /Block languages module -->

 I tried to remove the existing code and use the code from the folowing link, but nothing happened ( also I clear the cache of the site in performance but not help...)
https://mypresta.eu/en/art/developer/prestashop-languages-display-flags-only.html

Please help

 

Edited December 7, 2016 by Nikoleta (see edit history)

[Nikoleta]

hey, Are anyone know how to fix this ?

[razaro]

Think you edited wrong file, so not  FTP-> modules ->blocklanguages.tpl but

like in tutorial is said  FTP-> themes -> YourThemeName -> modules ->blocklanguages.tpl

[Nikoleta]

ah Yes, you are right , but see how now look the icons in the shop www,nfashion.bg .. don't know how to fix this : 

[razaro]

You need bit of css

#languages_block_top {
    display: inline-block;
    padding: 6px 0 0 12px;
}

add this to global.css. Should be fine after.

[Nikoleta]

 I want to display all language flags instead of dropdown menu. on the top of right corner. How can i do that?

[Nikoleta]

Hm, no nothing happened.,,I added the code in global.css ...

: #languages_block_top {

display: inline-block;
padding: 6px 0 0 12px;
}

[razaro]

Repeat steps from tutorial and also try to add code to default-bootstrap/css/modules/blocklanguages/blocklanguages.css

And you want it right so 

#languages_block_top {
    display: inline-block;
    padding: 6px 0 0 12px;
    float:right;
}

If needed clear cache in back office > advanced preferences.

 

1. float: right;

[Nikoleta]

Hey razaro, I follow your steps and again nothing happened, so I decide to use the easier way , with a drop down menu, but if you opened the site you will see that there is a space on the flags , when you need to choose one of the languages. Do you know how to remove this?

 

The code is :

 

<!-- Block languages module -->

{if count($languages) > 1}

<div id="languages-block-top" class="languages-block">

{foreach from=$languages key=k item=language name="languages"}

{if $language.iso_code == $lang_iso}

<div class="current">

<img alt="{$language.iso_code}" height="11" alt="" src="{$img_lang_dir}{$language.id_lang}.jpg" width="16" /> {$language.name|regex_replace:"/\s\(.*\)$/":""}</span>

</div>

{/if}

{/foreach}

<ul id="first-languages" class="languages-block_ul toogle_content">

{foreach from=$languages key=k item=language name="languages"}

<li {if $language.iso_code == $lang_iso}class="selected"{/if}>

{if $language.iso_code != $lang_iso}

{assign var=indice_lang value=$language.id_lang}

{if isset($lang_rewrite_urls.$indice_lang)}

<a href="{$lang_rewrite_urls.$indice_lang|escape:'html':'UTF-8'}" title="{$language.name|escape:'html':'UTF-8'}" rel="alternate" hreflang="{$language.iso_code|escape:'html':'UTF-8'}">

{else}

<a href="{$link->getLanguageLink($language.id_lang)|escape:'html':'UTF-8'}" title="{$language.name|escape:'html':'UTF-8'}" rel="alternate" hreflang="{$language.iso_code|escape:'html':'UTF-8'}">

{/if}

{/if}

<img alt="{$language.iso_code}" height="11" alt="" src="{$img_lang_dir}{$language.id_lang}.jpg" width="16" /> {$language.name|regex_replace:"/\s\(.*\)$/":""}</span>   

{if $language.iso_code != $lang_iso}

</a>

{/if}

</li>

{/foreach}

</ul>

</div>

{/if}

<!-- /Block languages module -->

 

Edited December 12, 2016 by Nikoleta (see edit history)

[Nikoleta]

I fixed the problem!
Thanks!