justinjiang Posted May 3, 2014 Share Posted May 3, 2014 I want to merger Top Horizontal menu and Language block together, and display the flag individually side by side instead of a dropdown. can anyone help me? thank you. Link to comment Share on other sites More sharing options...
vekia Posted May 3, 2014 Share Posted May 3, 2014 1) go to modules > positions and search for displayTop modules list 2) move languages block module right after top horizontal menu 3) open blocktopmenu.tpl file, change module file contents from: {if $MENU != ''} <!-- Menu --> <div class="sf-contener clearfix"> <ul class="sf-menu clearfix"> {$MENU} {if $MENU_SEARCH} <li class="sf-search noBack" style="float:right"> <form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get"> <p> <input type="hidden" name="controller" value="search" /> <input type="hidden" value="position" name="orderby"/> <input type="hidden" value="desc" name="orderway"/> <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" /> </p> </form> </li> {/if} </ul> </div> <div class="sf-right"> </div> <!--/ Menu --> {/if} to: <!-- Menu --> <div class="sf-contener clearfix"> <ul class="sf-menu clearfix"> {$MENU} {if $MENU_SEARCH} <li class="sf-search noBack" style="float:right"> <form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get"> <p> <input type="hidden" name="controller" value="search" /> <input type="hidden" value="position" name="orderby"/> <input type="hidden" value="desc" name="orderway"/> <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" /> </p> </form> </li> {/if} </ul> 3) open blocklanguages.tpl file and change it from: {* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2013 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- 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}" 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}"> {else} <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}"> {/if} {/if} <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" 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 --> to: {* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2013 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- 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}" 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}"> {else} <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}"> {/if} {/if} <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" 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 --> </div> <div class="sf-right"> </div> after that it will be necessary to modify css for blocklanguages a little (postion:relative/absolute; right:0px; top:0px;) Link to comment Share on other sites More sharing options...
justinjiang Posted May 3, 2014 Author Share Posted May 3, 2014 1) go to modules > positions and search for displayTop modules list 2) move languages block module right after top horizontal menu 3) open blocktopmenu.tpl file, change module file contents from: {if $MENU != ''} <!-- Menu --> <div class="sf-contener clearfix"> <ul class="sf-menu clearfix"> {$MENU} {if $MENU_SEARCH} <li class="sf-search noBack" style="float:right"> <form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get"> <p> <input type="hidden" name="controller" value="search" /> <input type="hidden" value="position" name="orderby"/> <input type="hidden" value="desc" name="orderway"/> <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" /> </p> </form> </li> {/if} </ul> </div> <div class="sf-right"> </div> <!--/ Menu --> {/if} to: <!-- Menu --> <div class="sf-contener clearfix"> <ul class="sf-menu clearfix"> {$MENU} {if $MENU_SEARCH} <li class="sf-search noBack" style="float:right"> <form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get"> <p> <input type="hidden" name="controller" value="search" /> <input type="hidden" value="position" name="orderby"/> <input type="hidden" value="desc" name="orderway"/> <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" /> </p> </form> </li> {/if} </ul> 3) open blocklanguages.tpl file and change it from: {* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2013 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- 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}" 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}"> {else} <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}"> {/if} {/if} <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" 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 --> to: {* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2013 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- 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}" 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}"> {else} <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}"> {/if} {/if} <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" 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 --> </div> <div class="sf-right"> </div> after that it will be necessary to modify css for blocklanguages a little (postion:relative/absolute; right:0px; top:0px;) sorry can you tell me which part of the blocklanguages.css i need it modify? /* 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: none repeat scroll 0 0 #000; } #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:#000000; } Link to comment Share on other sites More sharing options...
justinjiang Posted May 3, 2014 Author Share Posted May 3, 2014 1) go to modules > positions and search for displayTop modules list 2) move languages block module right after top horizontal menu 3) open blocktopmenu.tpl file, change module file contents from: also after changed the blocklanguages.tpl file, my website's layout is mess up. can you help me have a check, please. thank you Link to comment Share on other sites More sharing options...
vekia Posted May 3, 2014 Share Posted May 3, 2014 you need to rebuild top menu module, go to module configuration page and just hit save. it will be regenerated with new code. Link to comment Share on other sites More sharing options...
justinjiang Posted May 4, 2014 Author Share Posted May 4, 2014 you need to rebuild top menu module, go to module configuration page and just hit save. it will be regenerated with new code. i had rebuild top menu module, but the problem is still here, can you help me check with it, please. my website: http://www.eastwaycatering.co.uk/shop/gb/ Link to comment Share on other sites More sharing options...
vekia Posted May 4, 2014 Share Posted May 4, 2014 i still don't see modifications that i suggested to use - no closing div after block languages, block languages in wrong position (before menu) Link to comment Share on other sites More sharing options...
justinjiang Posted May 4, 2014 Author Share Posted May 4, 2014 i still don't see modifications that i suggested to use - no closing div after block languages, block languages in wrong position (before menu) Thank your for your reply, i have add the closing div for the languages block and move its position. can you help me check is it right? webiste address: http://www.eastwaycatering.co.uk/shop/gb/ also can you tell me which part of the blocklanguages.css i need it modify? thanks a lot. blocklanguages.tpl code: {* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2013 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- 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}" 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}"> {else} <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}"> {/if} {/if} <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" 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 --> <div> <div class="sf-right"> </div> </div> Link to comment Share on other sites More sharing options...
vekia Posted May 16, 2014 Share Posted May 16, 2014 Thank your for your reply, i have add the closing div for the languages block and move its position. can you help me check is it right? webiste address: http://www.eastwaycatering.co.uk/shop/gb/ also can you tell me which part of the blocklanguages.css i need it modify? thanks a lot. blocklanguages.tpl code: {* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2013 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!-- 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}" 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}"> {else} <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}"> {/if} {/if} <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" 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 --> <div> <div class="sf-right"> </div> </div> your shop uses ccc for css files please disable it and i will give you complete guide :-) Link to comment Share on other sites More sharing options...
justinjiang Posted May 17, 2014 Author Share Posted May 17, 2014 your shop uses ccc for css files please disable it and i will give you complete guide :-) I have disable it the CCC already, can you re-check it for me, please. Thank you webiste address: http://www.eastwaycatering.co.uk/shop/gb/ Link to comment Share on other sites More sharing options...
vekia Posted May 17, 2014 Share Posted May 17, 2014 now open this file: http://www.eastwaycatering.co.uk/shop/modules/blocklanguages/blocklanguages.css search for code: #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: none repeat scroll 0 0 #fff; } and change it to: #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: none repeat scroll 0 0 #fff; position: absolute; right: 10px; bottom: 20px; } Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now