Modifier le code HTML du menu (Blocktopmenu)

[Super citron]

Bonjour,

 

J'ai créé un menu sous prestashop 1.6, mais je ne suis pas satisfait d'un élément (Facebook Page). Je souhaiterais ajouter le html/CSS contenu dans le footer (entouré en rouge sur l'image). J'ai cherché dans le blocktopmenu.tpl ainsi que le .php, mais je n'ai pas trouvé "Facebook page"...

 

Je ne sais pas comment faire..Si quelqu'un a une idée ?

 

Merci d'avance

[loulou66]

Coucou

 

alors j'ai intégré le block social ou menu horizontal comme tu le souhaitais

il faut modifier plusieurs fichiers donc tu feras un copies des fichiers originaux avant les modifs

 

sur un PS 1.6.0.6 theme default_bootstrap

 

1°) édites modules/blocttopmenu/blocttopmenu.php

2°) dans la fonction hookDisplayTop (ligne 580) après

$this->smarty->assign('this_path', $this->_path);

 

ajoutes 

$this->context->smarty->assign(array(
'facebook_url' => Configuration::get('BLOCKSOCIAL_FACEBOOK'),
'twitter_url' => Configuration::get('BLOCKSOCIAL_TWITTER'),
'rss_url' => Configuration::get('BLOCKSOCIAL_RSS'),
'youtube_url' => Configuration::get('BLOCKSOCIAL_YOUTUBE'),
'google_plus_url' => Configuration::get('BLOCKSOCIAL_GOOGLE_PLUS'),
'pinterest_url' => Configuration::get('BLOCKSOCIAL_PINTEREST'),
));

 

4°) enregistres

5°) édites theme/default_bootstrap/modules/blocktopmenu/blocktopmenu.tpl

6°) entre {/if} et </ul> a la fin ajoutes

<ul id="social_block">
<h4>{l s='Follow us' mod='blocksocial'}</h4>
{if $facebook_url != ''}
<li class="facebook">
<a target="_blank" href="{$facebook_url|escape:html:'UTF-8'}">
<span>{l s='Facebook' mod='blocksocial'}</span>
</a>
</li>
{/if}
{if $twitter_url != ''}
<li class="twitter">
<a target="_blank" href="{$twitter_url|escape:html:'UTF-8'}">
<span>{l s='Twitter' mod='blocksocial'}</span>
</a>
</li>
{/if}
{if $rss_url != ''}
<li class="rss">
<a target="_blank" href="{$rss_url|escape:html:'UTF-8'}">
<span>{l s='RSS' mod='blocksocial'}</span>
</a>
</li>
{/if}
{if $youtube_url != ''}
<li class="youtube">
<a href="{$youtube_url|escape:html:'UTF-8'}">
<span>{l s='Youtube' mod='blocksocial'}</span>
</a>
</li>
{/if}
{if $google_plus_url != ''}
<li class="google-plus">
<a href="{$google_plus_url|escape:html:'UTF-8'}">
<span>{l s='Google Plus' mod='blocksocial'}</span>
</a>
</li>
{/if}
{if $pinterest_url != ''}
<li class="pinterest">
<a href="{$pinterest_url|escape:html:'UTF-8'}">
<span>{l s='Pinterest' mod='blocksocial'}</span>
</a>
</li>
{/if}
</ul>

7°) Enregistres

8°) édites heme/default_bootstrap/css/blocktopmenu/blocktopmenu.css

9°) après

#block_top_menu {
padding-top: 25px;
padding-top: 25px; }

ajoutes

#social_block {background: #F6F6F6; width: 40%; float: left; }

@media (max-width: 767px) {
#social_block { width: 100%; float: left; }
}

@media (max-width: 480px) {
#social_block { width: 40%; border-top: 3px solid #E9E9E9;}
}

@media (max-width: 321px){
#social_block {float: none; width: 60%;}
}

#social_block li {float: left; width: 50px; text-align: center; }

@media (min-width: 768px) and (max-width: 991px) {
#social_block li {width: 40px; }
}

#social_block li a {display: inline-block; color: #908f8f; font-size: 28px; padding: 17px 20px; }

@media (min-width: 768px) and (max-width: 991px) {
#social_block li a {font-size: 20px; }
}

@media (max-width: 480px) {
#social_block li a {font-size: 18px; }
}

#social_block li a span {display: none; }
#social_block li a:before {display: inline-block; font-family: "FontAwesome"; vertical-align: -5px; }
#social_block li a:hover {background: #333; color: white; }
#social_block li.facebook a:before {content: "\f09a"; }
#social_block li.twitter a:before {content: "\f099"; }
#social_block li.rss a:before {content: "\f09e"; }
#social_block li.youtube a:before {content: "\f167"; }
#social_block li.google-plus a:before {content: "\f0d5"; }
#social_block li.pinterest a:before {content: "\f0d2"; }
.sf-menu h4 { float: left; margin-bottom: 0; font-size: 21px; line-height: 25px; text-transform: none; padding: 18px 10px 0 15px; }

@media (max-width: 767px) {
.sf-menu h4 {display: none;text-align: center; }
}

10°) enregistres

 

il vous faudra peut être adapter le css à votre site

 

vider les caches (smarty et navigateur)

 

si votre thème est responsive vous pouvez verifier et adapterles css des différent screen avec par exemple chrome+le plugin Dimension+F12(console dev)

 

@++

 

Loulou66

[Super citron]

Merci de ta réponse très complète.

 

J'ai fait les manips; néanmoins le "facebook page" est toujours là...et les icônes sont toujours en bas du menu :/

[loulou66]

Coucou 

 

Ha bin oui je les est pas enlevés ^^

 

dans theme/ton_theme/modules/blocksocial/blocksocial.tpl

remplaces
<section id="social_block">
par
<!--<section id="social_block">

et
<div class="clearfix"></div>
par
<div class="clearfix"></div>-->

@++

 

Loulou66

[Super citron]

Alors maintenant le social block n'est plus en bas (dans le footer) ..mais il n'est pas en haut non plus (dans le menu) .Il n'est plus là quoi


Mince, à tous les coups c'est un tout petit truc qui fait que ça coince.

Edited April 27, 2014 by Super citron (see edit history)

[loulou66]

Coucou

 

bizzare ça devrait pas s'en aller du top menu

Ha moi par contre j'avais pas vider les caches  et j'ai en bas le tpl d'origine ^^

donc on va faire autrement avec une condition 

 

donc toujours dans le fichier theme/ton_theme/modules/blocksocial/blocksocial.tpl 

tu enlèves les modifs du précédent post #4

remplaces
{if $PS_CATALOG_MODE}
<section id="social_block">
par
<section id="social_block">

et
<div class="clearfix"></div>
par
<div class="clearfix"></div>
{/if}

comme tu n'utilise pas ta boutique en mode Catalogue la valeur sera toujours Fasle et donc ça devrait empêcher l'affichage du tpl

 

vides les caches (smarty et navigateur)

 

@++

 

Loulou66

[loulou66]

coucou

 

petite modif pour l'etape n°9)

remplacer
#social_block  {background: #F6F6F6; width: 40%; float: left; }
par
#social_block {top:0px; position:relative; background: #F6F6F6; float: left;}

pour le bacground changer la couleur pas elle de votre fond de votre menu

@++

 

Loulou66