Jump to content

[SOLVED] Add Flags To Currency Symbols (Blockcurrencies)


Recommended Posts



I'm using PS, 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}">


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




Edited by artofadornment (see edit history)
Link to comment
Share on other sites

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>


Edited by artofadornment (see edit history)
Link to comment
Share on other sites

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">
<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" />
<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>

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

Edited by artofadornment (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...