[SOLVED] Add Flags To Currency Symbols (Blockcurrencies)

[artofadornment]

Hello!

 

I'm using PS 1.5.3.1, and want to have little flags show in the currency drop-down box (top blockcurrencies module) next to the symbols. I only use English language, so I removed the link for switching languages from that top menu a long time ago, and although I have a few localization packs imported/installed, I only have English enabled in the BO.

 

I found this solution in a topic marked as "solved" however it doesn't 100% completely solve my problem. It suggests changing the blockcurrencies.tpl code from:

<a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">
{$f_currency.sign}</a>

to:

<a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">
<img src="../../img/l/{$f_currency.id_currency}.jpg" alt=""></a>

This solution works (the currencies in the drop-down list do appear now as flags), however there are two problems, see photo attached.

 

1.) currency currently selected still shows as a symbol, not a flag. I have no idea how to fix this, but I am sure that what I need must have to replace ths:

<input type="hidden" name="SubmitCurrency" value="" />
{l s='Currency' mod='blockcurrencies'} : {$blockcurrencies_sign}

2.) Symbols don't appear next to the flags. I would like the symbols to be inline with the images.

 

 

Can anyone please help? Thank you in advance!

Elaine

 

Edited February 6, 2015 by artofadornment (see edit history)

[artofadornment]

Update on problem #2: On my own I figured out how to put the symbols in next to the flags, however they are not aligning properly - see photo attached. This looks like a CSS issue, however I don't know where or how to make the drop-down list "wider" so everything will display nicely inline. All I did was change the <a> tag to:

<a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">
   <img src="../../img/l/{$f_currency.id_currency}.jpg" alt="" style="float:left;">
    <span style="float: right;">{$f_currency.sign}</span>
</a>

Edited February 4, 2015 by artofadornment (see edit history)

[artofadornment]

Got some outside help on this, so I'll share the solution here and mark this as solved. I've added some CSS classes to this to fix my alignment issues, if you want to try this you'd probably have to work out your own style if it doesn't look right.

 

blockcurrencies.tpl - edit the div to this:

<div id="currencies_block_top">
<form id="setCurrency" action="{$request_uri}" method="post">
<p>
<input type="hidden" name="id_currency" id="id_currency" value=""/>
<input type="hidden" name="SubmitCurrency" value="" />
{l s='Currency' mod='blockcurrencies'}:
<img src="../../img/l/{$cookie->id_currency}.jpg" alt="" class="currency_flag" />
{$blockcurrencies_sign}
</p>
<ul id="first-currencies" class="currencies_ul">
{foreach from=$currencies key=k item=f_currency}
<li {if $cookie->id_currency == $f_currency.id_currency}class="selected"{/if}>
<a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">
<img src="../../img/l/{$f_currency.id_currency}.jpg" alt="" class="currency_flag" />
<span class="currency_text">{$f_currency.sign}</span></a>
</li>
{/foreach}
</ul>
</form>
</div>

CSS file to edit: themes/(your theme)/css/modules/blockcurrencies/blockcurrencies.css

Edited February 6, 2015 by artofadornment (see edit history)