meilleure approche pour mettre un btn Contact dans le menu principal

[herve]

Bonjour
Bon j'ai repris ce dossier et je cherche tjs activement une réponse pour l'aspect multilangue mais j'essaie de modifier la structure pour faciliter cela.
En attendant vu mon retard, je me demande s'il existe des tips, bibliothèque pour faire des choses comme l'encadre d'un bouton CONTACT dans le menu principal :
https://j4tmp.88h.ovh/index.php?opti...ticle&id=31:ac cueil&catid=2&lang=fr&Itemid=483
comme le montre l'image

J'ai comme paramètre du lien Contact dans le menu principal


Je peux utiliser du css mais je me demandais ce que vous penseriez de mettre une image de lien au svg et s'il pourrait y avoir des problèmes avec des écrans (smartphone ...), autre navigateur (>

[njoseph]

Mon avis est que du CSS est beaucoup plus adapté car plus rapide à l’exécution, donc un site plus optimisé.
Le svg est possible malgré tout mais pourquoi ?
Qu'est ce qui le justifie ?

Nicolas

[herve]

Bonjour
Le svg me parait le plus simple (mais jamais expérimenté) et très rapide vu aussi sa taille ..
Comme j'ai le choix, je souhaitais connaître les avantages et inconvénients des pistes surtout dans un contexte écrans divers et variés ce qui à mon avis permettrait de trancher !?

[lefabdu51]

css est plus ru que svg. SVg peut etre utilisé pour une attaque

[herve]

Bonjour

css est plus ru que svg. SVg peut etre utilisé pour une attaque

La sécurité effectivement un point très important, néanmoins je comprends qu'il faudrait l'interdire au téléchargement (à moins qu'il n'y ait un script qui vérifie son innocuité!) car le fichier proposé pourrait être malveillant
Mais ... si c'est moi qui fait le svg, je ne vois pas le problème de sécurité

[herve]

Bonjour
En partant sur le CSS
Je dois mettre celui-ci à l'intérieur du lien de menu du thème astroid (car pas accès pour l'instant à auter chose)

 border-radius: 2em;
    font-weight: 700;
    color: #FFF;
    background-color: #990E7C;
    padding: 5px;​

Cela fonctionne bien en mode test avec le navigateur mais si je le copie comme précédemment ou dans à l'intérieur de .nav-title{ .. } rien ne s'affiche

Que dois je mettre ?

[lefabdu51]

tu peux creer une classe perso (dans les parametres du lien de menu)et coller ton code dans la ^partie custom css du style du template . Quel est le template astroid utilisé ?

[herve]

Bonjour
Oui c'est cela j'essaie de coller dans l'onglet custom.css du thème astroid_template_zero du lien de menu "Contact"
mais cela ne fonctionne pas (hors pour l’instant sans aller dans le détail, je souhaite le faire fonctionner dans ce cas)

<span class="nav-title">
                                          Contact                              </span>​

.nav-title{
    border-radius: 2em;
    font-weight: 700;
    color: #FFF;
    background-color: #990E7C;
    padding: 5px;
}​

Problème de syntaxe ?

[lefabdu51]

ta classe est déclarée ou ? (ton nav-title est déclaré ou?)
utilise l'inspecteur et tu verras qu il y a un id sur chaque élément de menu, tu peux t en servir pour cibler un élément en particulier.....

ci dessous, un exemple issu d un site utilisant ce template

as-menu-item nav-link-item-id-108 nav-link item-link-component item-level-1

si je doit cibler cet élément spcifiquement, alors j utilise .nav-link-item-id-108

ta regle CSS devrais commencer par span.nav-title { propriété1;propriété 2;} . Elle s appliqueras pour touts les éléments de menu

[herve]

Bonjour

J'ai essayé plusieurs codes autour de ce que tu dis sans succès. Dernier essai

 .nav-link-item-id-668{
    border-radius: 2em;
    font-weight: 700;
    color: #FFF;
    background-color: #990E7C;
    padding: 5px;
}​

Le code HTML complet est

<a href="/fr/contact.html" title="Contact" class=" nav-link-item-id-668 nav-link item-link-component item-level-1" data-drop-action="hover">
   <span class="nav-title">
                                          Contact                              </span>
   </a>​

Si je mets dans element.style en mode test du navigateur, cela fonctionne

border-radius: 2em;
    font-weight: 700;
    color: #FFF;
    background-color: #990E7C;
    padding: 5px;​

Je vide le cache à chaque fois

Je ne peux pas le montrer le site maintenant car pas accessible mais de manière similaire, si tu peux me dire ce que je loupe !! sur l'item "Groupe altius"

https://www.altius.fr/fr/le-groupe-altius.html

Et en même temps, j'anticipe car j'ai un problème d'espace entre les items , comment réduire l'espace entre les items ?

[lefabdu51]

sur le site exemple, je place tes propriétés CSS sur la balise li englobant le lien et cela fonctionne. second test je les place sur la balise a du lien et cela fonctionne.
Donc essaye li.nav-link-item-id-668 ou a.nav-link-item-id-668 comme sélécteurs

Pour l'espace entre tes liens de menu, sur ton site, il y a la classe suivante :

.astroid-nav .nav-item-parent .nav-title {
padding-right: 25px;
}​

Le padding-right à modifier selon les besoins.

[herve]

Ok quand je suis sur l'item du menu contact, j'ai maintenant tout les liens encadres car il doit être avec uniquement .nav-title !??
J'ai l'impression que c'est un problème de cache du ... thème astroid>zero car je vidais à chaque fois le cache joomla.
Comme j'ai un soucis d'accès au template (précédent post non résoluble pour l'instant) j'ai l'impression qu'il faut que j'attende un certain délai que le cache du thème tombe; temps si à priori pas d'autre moyen de le réinitialiser

[lefabdu51]

tu ne peux pass acceder a extensions mises a jour, la version 3.1.8 est sortie hier, donc je l ais mis a jour directement elle m a été proposée par joomla. La 3.1.7 avais un soucis au niveau du cache.

Pour ton autre soucis, tu peux toujours les faire manuellement.Après sauvegarde du site, tu télécharge la version 3.10 du framework et la version 3.1.8 du template et tu utilise directement l'onglet approprié du gestionnaire d extensions (extensions > installer)

[herve]

non c'est une vieille version comme mis sur l'autre post mais cela dépend le cadre de mon intervention qui visait à faire de petits trucs et je suis sûr que la maj d'astroid va entrainer des effets de bord que je ne peux pas traiter en ce moment. J'attends un peu 1 h ou 2h pour voir si cela est tombé où alors je me deamnde si en supprimant le fichier ../media/templates/site/astroid_template_zero_altius/css/compiled-2f6f12b96526dfea95b14dafbefcd566.css
il va reconstituer le fichier compressé ?

[lefabdu51]

plutot que de l 'effacer, je rajouterais un .old a la fin.. au besoin je n aurais qu a renommer en .css et le tour est joué