Comment Modifier Le Style Du Menu Horizontale.

[Clément Coron]

Bonjour, 

 

J'aimerai dans un premier temps faire quelques modifications sur le texte.

Actuellement le nom de mes catégories s'affichent en blanc et en gras, j'aimerai qu'elle soit en noir et non gras.

 

Ensuite, comment pourrais-je faire pour ajouter des petits logo à coté de chaque non de catégorie ?

 

Voici un exemple :

 

 

 

Merci d'avance pour votre réponse

 

 

[pueblozone]

Bonjour,

 

Il me semble que pour les modifs de textes il faut acheter le "configurateur de thème avançés".

[Clément Coron]

merci pour la réponse, mais on ne peux pas faire ces modifications en changeant des fichier css ? du moins pour la modification de l’apparence du texte ?

[2FR3]

Bonjour,

 

J'ai ecrit un petit article sur mon blog pour les images : https://www.2fr3.com/menu-prestashop-images-miniatures-categories.html

 

Pour le style, il vous faut modifier le fichier CSS du blocktopmenu que vous trouverez dans votretheme/css/modules/

[slykereven]

sinon pour utiliser les icones awesomefont dans le menu du header,

 

1 : on rajoute la ligne pour avoir le dernier font awesome avec un lien via un CDN (ça héberge du code et donc allège votre serveur, il y a des CDN pour beaucoup d'application) dans le fichier prestashop/themes/default-bootstrap/header.tpl à la ligne 59 avant <!--[if IE 8]>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

2: insérer dans le fichier /prestashop/modules/blocktopmenu/blocktopmenu.php à la ligne 612

//$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

switch ($category['name']) {

				case "Femmes":

					$html .= '<a href="'.$link.'" title="'.$category['name'].'"><i class="fa fa-female" style="color: #ab0016"></i>'.' '.$category['name'].'</a>';

					break;

				case "Robes":

					$html .= '<a href="'.$link.'" title="'.$category['name'].'"><i class="fa fa-rocket" style="color: #d9652c"></i>'.' '.$category['name'].'</a>';

					break;

				case "T-shirts":

					$html .= '<a href="'.$link.'" title="'.$category['name'].'"><i class="fa fa-rebel" style="color: #b9d498"></i>'.' '.$category['name'].'</a>';

					break;

				default:

					$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

			}

Pour chaque catégorie rajouter un block pour l'identifier et ajouter une icone, à placer avant la ligne "default:"

case "vote catégorie" :

	$html .= '<a href="'.$link.'" title="'.$category['name'].'"><i class="fa fa-votre_icone" style="color: #ab0016"></i>'.' '.$category['name'].'</a>';

	break;

Attention à repecter les majuscules et minucules du titre de la catégorie, exemple "Femmes" est affiché FEMMES en front office !

Modifier les fa-female par l'icone awesomefont qui vous convient.

Modifier le style des couleurs et autres css

 

3: désactiver le cache dans la config performance de prestashop + Forcer la compilation à chaque appel

4: actualiser votre page et la nouvelle icone devrait être en place

 

Et sinon pour ajouter une image remplacer la balise <i>.....</i> par la balise <img src='...' alt='...'>

 

Et pour modifier les couleurs, épaisseurs, ... cela se fait dans le fichier css prestashop/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

Comme dit précedemment il vaut mieux faire un override pour ne pas perdre ses modifications

Edited January 13, 2016 by slykereven (see edit history)