[Solved] Modify Language Block Selector

[GoGoMo]

Hi! How do I replicate the pointer or down arrow appearing beside the Dollar currency for the language block selector in my site's theme? I brought a Prestashop theme (#42155) from TemplateMonster and the theme developer originally had three language translation flag icons positioned horizontally which prevented showing other additional language flag icons properly in the language selector in front office when I enabled default languages in the back office. I wish to have uniformity for the currency block selector and language block selector in my site's theme design. Can somebody please tell me how to do this?

 

My website url is jacmelfoodcompany.com

Edited March 4, 2013 by GoGoMo (see edit history)

[PascalVG]

Hi GoGoMo,

 

I get an error when surfing to your site...

 

 

Internal Server Error

 

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, [email protected] and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Edited February 24, 2013 by PascalVG (see edit history)

[GoGoMo]

Thank PascalVG for alerting me about the server error. I started experiencing problems last evening but everything was running fine after ASO performed a force cpanel install so I'll have to contact them to find out what the problem is exactly. Thanks again.

 

Update: Server issue was resolved and site is functioning properly now.

 

I have the following code for the currency block:

 

<div id="currencies_block_top">
<form method="post" action="/en/" id="setCurrency" class="jqtransformdone">
 <label style="cursor: pointer;">Currency:</label>
 <div class="jqTransformSelectWrapper" style="z-index: 10; width: 124px;"><div><span style="width: 124px;">Dollar</span><a class="jqTransformSelectOpen" href="#" style=""></a></div><ul style="width: 122px; display: none; visibility: visible; height: 308px; overflow: hidden;"><li><a index="0" href="#">Brazilian Real</a></li><li><a index="1" href="#">British Pound</a></li><li><a index="2" href="#">Canadian Dollar</a></li><li><a index="3" href="#" class="selected">Dollar</a></li><li><a index="4" href="#">Euro</a></li><li><a index="5" href="#">Gourde</a></li><li><a index="6" href="#">Indian Rupee</a></li><li><a index="7" href="#">Malaysian Ringgit</a></li><li><a index="8" href="#">Philippine Peso</a></li><li><a index="9" href="#">Rand</a></li><li><a index="10" href="#">Russian Ruble</a></li><li><a index="11" href="#">UAE Dirham</a></li><li><a index="12" href="#">Yen</a></li><li><a index="13" href="#">Yuan Renminbi</a></li></ul><select onchange="setCurrency(this.value);" class="jqTransformHidden" style="">
   <option value="13">Brazilian Real</option>
   <option value="2">British Pound</option>
   <option value="4">Canadian Dollar</option>
   <option selected="selected" value="1">Dollar</option>
   <option value="3">Euro</option>
   <option value="7">Gourde</option>
   <option value="5">Indian Rupee</option>
   <option value="9">Malaysian Ringgit</option>
   <option value="14">Philippine Peso</option>
   <option value="6">Rand</option>
   <option value="12">Russian Ruble</option>
   <option value="8">UAE Dirham</option>
   <option value="11">Yen</option>
   <option value="10">Yuan Renminbi</option>
 </select></div>
 <input type="hidden" value="" id="id_currency" name="id_currency">
 <input type="hidden" value="" name="SubmitCurrency">
</form>
</div>

 

I want to have the same down arrow appearing beside the Dollar currency to appear beside the flag icons in the language block (see language_block top code below):

 

<div id="languages_block_top">
<div id="countries" class="">
<p class="selected_language">
<label>Language:    </label>
<img width="16" height="11" alt="en" src="http://jacmelfoodcompany.com/img/l/1.jpg">
</p>

 

What do I need to copy and paste and where to have the down arrow appear beside the U.S. flag icon in the top language block? I'm kinda inexperience with CSS also. What do I need to change in theme's css file if applicable to ensure the language selector does not drop down or wrap to next line? To ensure everything look professional after making the changes. Thanks.

Edited February 27, 2013 by GoGoMo (see edit history)

[damsG]

Hi,

 

Please find below my code exemple for what you are expecting (I think).

Hope it will help you.

 

But me, I want your style. I mean flag positioned horizontally.

could you give me your codes

Thx

 

/* block top languages */

#header_right #languages_block_top {

float:right;

margin: 0;

padding:2px 6px 1px 6px;

-moz-border-bottom-right-radius: 3px;

-moz-border-bottom-left-radius: 3px;

-webkit-border-bottom-right-radius: 3px;

-webkit-border-bottom-left-radius: 3px;

border-bottom-right-radius: 3px;

border-bottom-left-radius: 3px;

background: #776652;

}

#header_right #languages_block_top p {

clear: left;

padding-right:20px;

font: 11px Arial,Verdana,sans-serif;

color: #ccc;

text-align: right;

background: url("img/block_languages_top_p_bg.png") no-repeat scroll right 1px transparent;

}

#languages_block_top ul#first-languages li {

float: left;

margin-right: 3px

}

#languages_block_top ul#first-languages li.selected_language {

float: left;

}

/*languages with jquery*/

#countries {

cursor: pointer;

position: relative;

top: 1px;

}

#countries p {

position: relative;

top: 0;

padding: 0;

}

#countries p img {

padding-left: 5px;

}

#countries .countries_ul{

display:none;

z-index: 10000;

padding:10px;

list-style-type:none;

}

#countries .countries_ul_hover{

display:block;

z-index: 5000;

position:absolute;

right:6px;

padding:5px 10px;

height:auto;

width:20px;

background:#776652;

[GoGoMo]

fromfrance: Hi there! I brought the theme from TemplateMonster; the language flag icons were originally positioned horizontally in the theme but this didn't quite work for me. I wanted to add the more than 6 default languages you can enable in PS back office--which I don't know why in the world Prestashop theme designers think it's to position the language flag icons (and even in some themes, the currency symbols) horizontally instead of vertically like the default Prestashop v1.5.3.1 theme.

Thanks I will try the sample code you've posted.