[RÉGLÉ] Classes Bootstrap dans liens des menus

[fynhooft]

Bonjour,

Bootstrap utilise beaucoup les classes CSS. Exemple : si on veut ajouter une icône dans le lien d'un menu, il faut ajouter dans le lien (avec Bootstrap 3) :

<span class="glyphicon glyphicon-search"></span>

L'exemple provient de cette page : http://getbootstrap.com/components/#glyphicons
Comment fait-on pour ajouter ce type de code (spécifique à chaque lien du menu que l'on veut modifier) ?

[electrocity]

Re : Classes Bootstrap dans liens des menus

Malgrés que la liste des iconesn'est pas maintenu à jour, pour l'instant 95 % de la liste est bonne.
Voir : http://jui.kyleledbetter.com/icons pour les icones et le css qui va avec.

[lomart]

Re : Classes Bootstrap dans liens des menus

Bonjour,

Comment fait-on pour ajouter ce type de code (spécifique à chaque lien du menu que l'on veut modifier) ?

Si une extension menu n'existe pas, il faut surcharger le module menu. On doit pouvoir détourner un des champs des paramètres de type de lien pour permettre le choix de l'icône. Pour faciliter le choix, une solution serait de faire un dossier avec des images des icônes en utilisant le même nom. La surcharge utiliserait le nom de l'image pour créer le code css adhoc.

[fynhooft]

Re : Classes Bootstrap dans liens des menus

une solution serait de faire un dossier avec des images des icônes en utilisant le même nom. La surcharge utiliserait le nom de l'image pour créer le code css adhoc.

C'est une méthode lourde.
N'y a-t-il pas un moyen plus simple en réutilisant les noms des classes définis dans Bootstrap ?

Je pense qu'il faut rajouter une balise <span> avec paramètres (ceux-ci contiendraient les noms des classes Bootstrap) en intervenant dans le fichier modules.php du template . Mais quel est le code à rajouter pour introduire cette balise ?

[electrocity]

Re : Classes Bootstrap dans liens des menus

BJ fynhooft,
actuelement tu as ça dans le module mod_menu tmpl default_url.php

if ($item->menu_image)
	{
		$item->params->get('menu_text', 1) ?
		$linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" /><span class="image-title">'.$item->title.'</span> ' :
		$linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />';
}

Il te suffit de prendre le mod_menu
recréer un nouveau module genre mod_menu_ico en te basant sur mod_menu et tu modifies le code plus haut

if ($item->menu_image)
	{
		$item->params->get('menu_text', 1) ?
		$linktype = '<span class="'.$item->anchor_css.'" alt="'.$item->title.'"></span><span class="image-title">'.$item->title.'</span> ' :
		$linktype = '<span class="'.$item->anchor_css.'" alt="'.$item->title.'""></span>';
}

dans le code tu utilise $item->anchor_css qui est normalement la class individuel du lien qui sera remplacé par la class de ton icon dans notre cas. Bon il faut voir si cela n'affecte pas d'autres balises mais il me semble que non.

SI tu veux pas t'embêter tu peux aussi simplement overider mod_menu avec ce code dans ton template.
Après il suffit juste de renseigner le style css dans l'onglet option avancé lors d'ajout de nouveau lien.

Cordialement,
PAtrick K.

[lomart]

Re : Classes Bootstrap dans liens des menus

C'est une méthode lourde.
N'y a-t-il pas un moyen plus simple en réutilisant les noms des classes définis dans Bootstrap ?

C'est grosso modo la même méthode que celle proposée par Electrocity. Je suggère juste la possibilité, pour faciliter la saisie, d'avoir un aide-mémoire sous forme d'image et d'éviter de faire des fautes de frappe

[lefabdu51]

Re : Classes Bootstrap dans liens des menus

dans ton lien de menu > paramètres avancés tu as style de lien css.
met " glyphicon glyphicon-search" (l'espace devant est important).
Est tu sur des classes que tu souhaites intégrer, car suivant le template elle peuvent avoir un nom différent....

Cela fonctionnes sous protostar si tu utilise icon-search comme style de lien. et l'icone correspond à l'icone bootstrap.

[lefabdu51]

Re : Classes Bootstrap dans liens des menus

tu auras surement à ajuster le padding-right de ce sélécteur comme ci dessous : fichier template.css ligne 2962 (sous protostar).

.nav-tabs > li > a, .nav-pills > li > a {
line-height: 14px;
margin-right: 2px;
padding-left: 12px;
padding-right: 35px;
}

PS: la balise span est optionelle . La classe apparait directement sur le lien.
Et tu peut te servir aussi de ces classes sur les balises li ainsi que d'autres.

[lefabdu51]

Re : Classes Bootstrap dans liens des menus

si tu utilse less c est encore plus simple
xyz correspond à l'id du lien de menu
li.item-xyz {
.glyphicon
.glyphicon-search
}

A faire pour chaque lien de menu

[fynhooft]

Re : Classes Bootstrap dans liens des menus

A lefabdu51 : ta méthode fonctionne mais l'icône souhaitée est affichée avec celles adjacentes ! Il faut donc ajuster avec les CSS

A electrocity : j'ai fait l'overide avec le code que tu proposes mais je n'ai pas vu de <span> apparaitre dans le source !

[lefabdu51]

Re : Classes Bootstrap dans liens des menus

A lefabdu51 : ta méthode fonctionne mais l'icône souhaitée est affichée avec celles adjacentes ! Il faut donc ajuster avec les CSS

A electrocity : j'ai fait l'overide avec le code que tu proposes mais je n'ai pas vu de <span> apparaitre dans le source !

si tu veut que la manip d electrocity marches il faut supprimer cette ligne

if ($item->menu_image)

cette regardes si un une image à été incluse pour le lien.
Si ce n est pas le cas (pas d image associée au lien de menu), alors le code n'est pas éxécuté.

Quand à l'ajustement css, il éest normal. De quelles autres icones parles tu?

[fynhooft]

Re : Classes Bootstrap dans liens des menus

De quelles autres icones parles tu?

Il s'agit des icônes voisines de l'icône sélectionnée dans l'image qui contient toutes les icônes (cf image ci-dessous) :



Pour la méthode "electrocity" :
J'ai copié le fichier \modules\mod_menu\tmpl\default_url.php
vers \templates\nom-de-mon-template\html\mod_menu\default_url.php

J'ai supprimé les lignes concernant le test comme ceci :

//if ($item->menu_image)
	//
		$item->params->get('menu_text', 1) ?
		$linktype = '<span class="'.$item->anchor_css.'" alt="'.$item->title.'"></span><span class="image-title">'.$item->title.'</span> ' :
		$linktype = '<span class="'.$item->anchor_css.'" alt="'.$item->title.'""></span>';
//}
//else { $linktype = $item->title;
//}

... et je ne vois toujours pas les <span>
Aurais-je raté quelque chose ?

[lefabdu51]

Re : Classes Bootstrap dans liens des menus

oui il faut modifier la ligne comme ci dessous :
if ($item->menu_image)
en
if ($item->menu_anchor)

[electrocity]

Re : Classes Bootstrap dans liens des menus

oui désolé le code de remplacement est:

if ($item->anchor_css)
    {
        $item->params->get('menu_text', 1) ?
        $linktype = '<span class="'.$item->anchor_css.'" alt="'.$item->title.'"></span><span class="image-title">'.$item->title.'</span> ' :
        $linktype = '<span class="'.$item->anchor_css.'" alt="'.$item->title.'""></span>';
} 

ou peut être

if ($item->menu_anchor)
... 

comme le dit lefabdu51 j'ai pas testé le code

[fynhooft]

Re : Classes Bootstrap dans liens des menus

Vos correctifs ne fonctionnent pas.
Voici la solution (trouvée ici) pour rajouter une balise <span> :
il faut "overider" les deux fichiers suivants \modules\mod_menu\tmpl\default_url.php ET \modules\mod_menu\tmpl\default_component.php
Dans chacun de ces fichiers, on remplace (3 fois dans chaque fichiers) :

<?php echo $linktype; ?>

par

<span><?php echo $linktype; ?></span>

... et on obtient bien notre balise <span> dans le code.

Malheureusement, je ne suis pas plus avancé : comment avoir, par exemple, <span class="icon-home"> ?