Jump to content

Personnalisation menu déroulant v3 Julien Breux

papillouma
 Share

Recommended Posts

papillouma Newbie

papillouma

Posted
Posted (edited)

Bonjour,

 

Je remercie encore Julien Breux pour son super menu déroulant.

 

Je l'ai installé avec succès, cependant je souhaiterais le personnaliser, notamment en ce qui concerne les onglets : J'aimerais que chaque onglet soit de couleur différente, hors il se trouve que chaque onglet est en fait une balise <li></li> qui se répète.

 

Ne maîtrisant pas le code, je voudrais savoir si il y a un moyen de modifier la synthaxe suivante (fichier .tpl du code situé dans le module) pour que chaque onglet devienne "unique" ?

 

 

 

{if $MENU != ''}

</div>

<!-- Menu -->

<div class="sf-contener">

<ul class="sf-menu">

{$MENU}

{if $MENU_SEARCH}

<li class="sf-search noBack" style="float:right">

<form id="searchbox" action="search.php" method="get">

<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}{/if}" />

</form>

</li>

{/if}

</ul>

<div class="sf-right"> </div>

<script type="text/javascript" src="{$this_path}js/hoverIntent.js"></script>

<script type="text/javascript" src="{$this_path}js/superfish-modified.js"></script>

<link rel="stylesheet" type="text/css" href="{$this_path}css/superfish-modified.css" media="screen">

<!--/ Menu -->

{/if}

 

 

Merci beaucoup d'avance :)

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

papillouma

Posted
  • Author
Posted

Bonjour,

 

Vous pouvez appliquer un #ID sur chaque éléments puis les styliser en fonction. A l'aide de CSS.

 

Par exemple :

- Catégorie d'ID : test

- CSS : #test {background-color: red;}

 

merci pour ton intervention Sebdag.

 

Merci Beaucoup aussi Julien pour votre aide.

Malheureusement je ne la comprends pas !

Je veux bien appliquer un id pour chaque onglet, mais où ?

Nous sommes bien d'accord, un onglet est défini par la balise <li></li> ?

Dans le fichier .tpl, il n'y a qu'un seul <li> avec la classe "sf-search noBack" ; si j'applique en plus un id, cela ne changera rien puisque ça s'appliquera à tous les onglets.

 

(je précise que même si je supprime le fichier .tpl le menu continue de s'afficher quand même, bizarre ?)

 

J'ai donc probablement mal compris votre explication ?

Où exactement dans le code dois-je appliquer le id ?

 

merci beaucoup :)

Link to comment
Share on other sites
marty69 Newbie

marty69

Posted
Posted

bonjour,

 

dans le backoffice, dans la configuration du module, pour chaque lien créé vous avez un champ pour préciser l'ID css à appliquer.

 

dans l'exemple de julien vous mettez "test"

 

ensuite dans votre CSS (superfishmodified.css du module il me semble de mémoire) vous rajouter la définition de l'ID "test" que vous avez précisé. Dans l'exemple de Julien, rajouter : #test {background-color: red;} dans le fichier CSS

 

Au passage pour votre pb de tpl, il faut vider le cache smarty quand vous faites une modif sur un tpl sinon les modifs ne sont pas prises en compte : dans votre FTP effacer le fichier correspondant dans le dossier /tools/smarty/compile ou supprimez tous les fichiers sauf index.php.

Link to comment
Share on other sites
papillouma Newbie

papillouma

Posted
  • Author
Posted

Ok merci pour l'info je vais tester et reviens vers vous si je n'y arrive pas ^_^ .

 

J'en profite pour vous poser une ultime question, toujours au sujet de ce menu...

Je souhaiterais que les titres de ces onglets (les catégories) reviennent à la ligne parce qu'ils sont assez long (4 à 5 mots...) hors en l'état, malgré leur longueur, chaque texte d'onglet restent sur une ligne, ce qui fait que je me retrouve avec des titres dépassant leur onglet, ainsi que 2 étages de menu alors qu'il n'y en a qu'un...

 

comment faire ?

merci beaucoup :)

Link to comment
Share on other sites
papillouma Newbie

papillouma

Posted
  • Author
Posted

Au temps pour moi marty69, je me suis emmelée les pinceaux lol.

Désolée, je suis vraiment tête en l'air.

 

J'ai téléchargé la dernière version V2.8...là par contre je ne peux même pas y accéder pour la configuration, il me dit "accès interdit", j'ai fait un chmod 777, mais rien à faire.

 

Je précise qu'avec la version 1.3, je n'ai pas eu ce soucis d'interdiction d'accès à la configuration.

 

J'ai réinstallé tout prestashop proprement, mais mais rebelotte, "accès interdit"

 

Une idée ?

merci

Link to comment
Share on other sites
papillouma Newbie

papillouma

Posted
  • Author
Posted

Alors, je donne des news des fois que d'autres ont eu ce problème...

J'ai réinstallé prestashop sur un autre serveur, puis réinstallé le module en question...aucun problème !!!

Il fonctionne parfaitement, j'ai pu résoudre mon soucis...

Par contre mystère pour cette histoire d'accès interdit chez 1&1.

Link to comment
Share on other sites
  • 7 months later...
SCAMPAI Newbie

SCAMPAI

Posted
Posted (edited)

Bonjour,

 

Vous pouvez appliquer un #ID sur chaque éléments puis les styliser en fonction. A l'aide de CSS.

 

Par exemple :

- Catégorie d'ID : test

- CSS : #test {background-color: red;}

 

Bonjour Julien,

 

Je n'arrive pas à affecter une valeur à l'ID créé en Back-office, voir le screen

 

Je voudrais reprendre en background la couleur des blocs catégories pour chaque sous catégories.

 

Car si je reprends ta syntaxe:

- Catégorie d'ID : 001

- CSS : #001 {background-color: red;}

 

Ca ne marche pas. :(

 

Je me mélange entre l'ID #001, la class .sf-menu, li, ul

 

Pourrais-je avoir une aide de ta part. <_<

 

Merci d'avance.

 

Cdlt,

Philippe

 

J'ai oublié la version : Menu v2.8.6

post-12233-0-58639200-1339400227_thumb.jpg

Edited by Graphileom (see edit history)
Link to comment
Share on other sites
  • 3 months later...
ValentinB Newbie

ValentinB

Posted
Posted

Bonjour la communauté.

 

Je remonte un peu ce sujet car je vois qu'il n'est pas résolu.

 

La solution proposée ici nous oblige à créer des menu manuellement depuis le module.

 

Pour un rendu dynamique (vous n'êtes pas obligé de taper l'ID du menu) il faut aller dans le fichier : blocktopmenu.php et non .tpl.

 

A la ligne 644 ou 645 suivant si vous voulez donner la class au lien <a> ou à la liste <li> :

$this->_menu .= '<li '.$selected.'>';


à remplacer par :

$this->_menu .= '<li '.$selected.' class="'.$id_category.'">';

 

Voilà il faut toucher au php mais rien de très difficile. Par contre si vous ne le sentez pas ne le faites pas !

Link to comment
Share on other sites
  • 6 months later...
david86 Newbie

david86

Posted
Posted (edited)

bonjour à tous, après des heures de recherche pour donner une couleur différente a chaque bouton dans le menu horizontal,j'ai trouvé une solution efficace et ça fonctionne super bien. ça va surement aider des gens qui ont le blocktopmenu de prestahsop (1.5.3)

 

dans votre fichier theme/css/modules/blocktopmenu/superfish-modified.css, vous avez ce code par défaut : (vers la ligne +-130)

 

.sf-menu li:hover a

{color:#FFF; background:none #VOTRE COULEUR;} // survole par défaut des boutons du menu (par exemple orange)

 

Pour avoir le prochain bouton de la couleur de votre choix dans mon cas à partir du 6ieme bouton :

 

 

BOUTON SUIVANT :

 

 

.sf-menu li + li + li + li + li + li:hover a

{color:#FFF; background:none #VOTRE COULEUR;} //survole à PARTIR DU 6ieme bouton de votre

 

couleur au choix (par exemple bleu) Note : à partir de ce moment la tout le reste de vos bouton vers la droite sera en bleu à partie du 6ieme bouton, mais c'est pas grave car arrive la ligne suivante :-))

 

BOUTON SUIVANT :

 

.sf-menu li + li + li + li + li + li + li:hover a

{color:#FFF; background:none #VOTRE COULEUR;} //survole à PARTIR DU 7ieme bouton de votre

 

couleur au choix (par exemple vert) Note : à partir de ce moment la tout le reste de vos bouton vers la droite sera en vert mais c'est pas grave car arrive la ligne suivante :-) )

 

BOUTON SUIVANT :

 

.sf-menu li + li + li + li + li + li + li + li:hover a

{color:#FFF; background:none #VOTRE COULEUR;} //survole à PARTIR DU 8ieme bouton de votre

 

couleur au choix (par exemple rouge) Note : à partir de ce moment la tout le reste de vos bouton vers la droite sera en rouge à partie du 8ieme bouton)

 

ETC... ETC...

 

 

 

 

 

Vous continuez autant DE FOIS que vous voulez, moi je reviens à la couleur initiale car il me fallait que 2 boutons de couleurs différentes :)

Edited by david86 (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
 Share
Go to topic listing
×
×
  • Create New...