Flags "in line" instead drop down

[europaul]

Hi !

I need to put the flags "in line", one next to the other, instead using the drop down menu that cames with the default template.

Im using PS 1.5.

Any idea ?

TXS !!!!

[mohsart]

In blocklanguages.tpl

replace

<div id="languages_block_top">

with

<div id="languages_block_top_mod">

remove

{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}" width="16" height="11" />
       </p>
   {/if}
{/foreach}
<ul id="first-languages" class="countries_ul">

remove

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

remove

</ul>

In blocklanguages.css

Add

#header_right #languages_block_top_mod {
   float:right;
   margin: 0;
   padding:2px 6px 1px 6px;
}

 

/Mats

[mohsart]

You may also want to change

<img src="{$img_lang_dir} {$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />

to

<img {if $language.iso_code == $lang_iso}class="opacity"{/if} src="{$img_lang_dir} {$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />

and add

.opacity {
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}

to blocklanguages.css

 

30/0.3 is just an example that I think looks good, make it lower for higher transparancy and vice versa.

 

/Mats

Edited November 21, 2012 by mohsart (see edit history)

[europaul]

Hey, just read your answer. I will try it and tell you the results. Thanks !

[europaul]

Hey, i applied your code and it worked at once.

 

Many thanks for your help !

[europaul]

Before giving this post the solved status, you know how to change the position of the flags ?

 

I need the spanish one first, then the english and so on.

[mohsart]

Not really.

You could look in blocklanguages.tpl and reverse the foreach loop (cannot be done directly in smarty though), or mess around with blocklanguages.css

Perhaps it is possible to edit the database to accomplish the exact order you want.

 

/Mats

[dklap3]

You may also want to change

<img src="{$img_lang_dir} {$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />

to

<img {if $language.iso_code == $lang_iso}class="opacity"{/if} src="{$img_lang_dir} {$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />

and add

.opacity {
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}

to blocklanguages.css

 

30/0.3 is just an example that I think looks good, make it lower for higher transparancy and vice versa.

 

/Mats

 

This is great Mats, almost what I was looking for. However, how do I change it around so the opacity is on the inactive language(s)? Right now the active language has opacity which seems wrong to me.

 

EDIT: Found the solution myself. Just switched "==" and "!=" and it did the opposite. :-)

Edited May 8, 2013 by dklap3 (see edit history)