Classe de l'image - Image de menu

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Classe de l'image - Image de menu

    Bonjour,

    J'aimerais ajouter une image à un menu, en lieu et place du texte.
    J'ai pu faire ceci en ajoutant l'image dans l'onglet "Type de lien" de mon menu, puis en désactivant "Afficher le titre du lien de menu".

    Problème, si je dimensionne mon image à 40x40px par exemple, la qualité est mauvaise.
    J'aimerais donc insérer une image de 200x200px par exemple, puis lui dire de se redimensionner à 40px avec un width: 40px.

    Mais je ne comprend pas comment utiliser le paramètre "Classe de l'image". J'imagine que je peu créer une classe dans mon css de template, exemple : menu2 et y ajouter mon code de largeur.
    Donc je pense que sur le principe je suis juste, mais je n'ai pas le language...

    Comment ajouter la classe et comment l'écrire dans classe de l'image ?

    Ce que j'ai fait mais qui ne fonctionne pas :

    Dans mon css de template :

    Code:
    .menu2 {
    width: 40px;
    }
    Puis dans le champs Classe de l'image du menu : menu2

    Bref, un petit coup de main pour la compréhension.
    “Un problème sans solution est un problème mal posé." - Albert Einstein
    "La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

  • #2
    tu aurais tout interet à dimensionner de manière correcte ton image
    mais ton code à l'air d'être bon
    donc soit tu le mets dans un mauvais fichier, soit tu ne l'as pas tapé comme tu l'as écrit ici ...
    tu peux aussi faire un fichier user.css pour mettre tes css personnalisées
    aidons nous les uns les autres ...

    https://www.web54.fr

    Commentaire


    • #3
      C'est bon, j'ai trouvé.
      En fait j'utilise Maximenu CK et du coup c'est sur lui que je dois régler ça, car il prend le dessus apparemment sur le style de base.
      “Un problème sans solution est un problème mal posé." - Albert Einstein
      "La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

      Commentaire


      • #4
        Bon, je ré-ouvre cette discussion, car j'ai tout de même un souci.

        Je pense pas que cela soit lié à Joomla, mais peut-être que certains d'entre vous pourrons m'éclairer.

        Tu as raison @tataye j'ai meilleur tant de mettre les images à la bonne taille, car j'ai déjà vu des soucis ou l'image ne se redimensionne pas tout de suite... Donc très moyen.

        Mais c'est là tout mon problème. Je travaille mes images avec Photoshop. La dimension 40x40px (par exemple) est plus petite sur Photoshop à l'écran que sur le site web.
        Je n'ai toujours pas réussi à comprendre ce problème, mais c'est apparemment du à la résolution de l'écran, bref.

        Mon souci est que si je redimensionne mon image à 40x40px, sur mon Photoshop elle est parfaite, alors qu'une fois passé sur le site (ou même en visualisation dans Windows dans mes images) elle est flou ! Ce qui a tendance à me rendre dingue.

        Je n'arrive pas à avoir une image nette. On dirait qu'il prend mon image de 40x40 et qu'il fait une sorte de mini zoom dessus, mais qui suffit à la rendre flou.

        Donc si il y a des idées là-dessus, je suis preneur.
        “Un problème sans solution est un problème mal posé." - Albert Einstein
        "La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

        Commentaire


        • #5
          Vaste sujet, mais pour commencer je pense que tu confonds résolution de l'écran et résolution de l'image. Pour le web choisis 72 dpi comme résolution de l'image, c'est la valeur la plus adaptée aux images pour le web en jpg avec une profondeur de couleur automatique si elle est disponible à l'enregistrement (pour photoshop, je ne sais plus, celà fait bien longtemps que j'ai laissé tomber photoshop. J'utilise paint.net ou gimp suivant le type d'image.
          N'oubliez pas de passer vos post en "réglé" c'est très utile à celui qui cherche, ...et qui se perd http://forum.joomla.fr/announcement.php?f=133 mais trouvera grâce à vous

          Commentaire


          • #6
            Hello, oui, je suis en 72 dpi...
            “Un problème sans solution est un problème mal posé." - Albert Einstein
            "La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

            Commentaire


            • #7
              un lien peut-être pour voir ton image?
              N'oubliez pas de passer vos post en "réglé" c'est très utile à celui qui cherche, ...et qui se perd http://forum.joomla.fr/announcement.php?f=133 mais trouvera grâce à vous

              Commentaire


              • #8
                Mis en pièce en jointe. La 1ère est en 200x200 = parfaite. La seconde, en 40x40, floue.
                Fichiers joints
                “Un problème sans solution est un problème mal posé." - Albert Einstein
                "La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

                Commentaire


                • #9
                  Si on uploade par FTP ou via TinyMCE ou via le Gestionnaire de Media (exemples) alors l'image est intacte.
                  Si on uploade via JCE (ou d'autres éditeurs p ex), il est très probable que cet éditeur retouche les images lors de l'upload
                  Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                  Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                  Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                  Commentaire


                  • #10
                    Je n'avais pas tout compris à ton problème. Pour enregistrer une image en 40px par 40px en jpg qui soit tout à fait net celà ne va pas être possible avec du jpg, ni même du png, il faut passer par SVG et cela photoshop ne sait pas faire. Gimp est capable de manipuler le svg mais la qualité restera moyenne et les possibilités limitées. Il faut passer par des logiciels spécialisés (dessin vectoriel) comme Illustrator qui est cher ou Inkskape qui est gratuit mais moins complet. L'utilisation de ces logiciels ne ressemble pas aux logiciels de dessin matriciels (pixélisés) et demande un certain apprentissage, de plus le temps de réalisation d'une image est beaucoup plus long.
                    40X40, c'est plutôt une icône qu'une illustration.
                    Tu peux essayer avec des convertisseurs en ligne gratuit comme celui-ci
                    Convertisseur de PNG vers ICO en ligne gratuit - Générateur de Favicon, changer votre photo en ICO

                    ou ici
                    Convertisseur SVG en ligne gratuit : convertissez votre fichier image, par exemple JPG en SVG, ou transformez des images matricielles en graphiques vectoriels. Ce convertisseur SVG convertit vos fichiers au format SVG en ligne.
                    N'oubliez pas de passer vos post en "réglé" c'est très utile à celui qui cherche, ...et qui se perd http://forum.joomla.fr/announcement.php?f=133 mais trouvera grâce à vous

                    Commentaire


                    • #11
                      OK merci. J'ai la suite Adobe, donc j'ai Illustrator. Mais je l'avais exportée avec... Et l'image d'origine est du svg. J'ai aussi essayé de passer direct par ftp mais c'est pareil.
                      Bon je vais refaire des essais avec Illustrator. Mais je le maîtrise moins bien que Photoshop.
                      J'essaierai aussi les convertisseurs.

                      Mais si je comprend, il faudrait exporter également en svg ?
                      “Un problème sans solution est un problème mal posé." - Albert Einstein
                      "La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

                      Commentaire


                      • #12
                        Pour la petite en 40x40 il faut mieux garder le svg, elle sera de meilleur qualité, mais la remarque de woluweb est tout à fait valide
                        N'oubliez pas de passer vos post en "réglé" c'est très utile à celui qui cherche, ...et qui se perd http://forum.joomla.fr/announcement.php?f=133 mais trouvera grâce à vous

                        Commentaire


                        • #13
                          Il y a beaucoup d'infos à faire passer dans 40pixels.
                          Je ne pense pas que l'on puisse beaucoup mieux que l'image du post #8.
                          Voici mon test avec Zoner Photo Studio qui arrive au même résultat
                          UP, le plugin universel à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          Commentaire


                          • #14
                            Si ! Ça y est !

                            Bon, avec toutes vos pistes, j'ai creusé et j'ai trouvé. Voir mon sceenshot avec 2 icones identiques mise à part la netteté (et la forme de l'icone dedans mais c'est pas le sujet). Bon j'ai fait une copie d'écran, donc on perd en qualité, mais sur le site c'est parfait.

                            Donc pour y arriver j'ai fait :

                            - Ouvrir mon image svg avec Illustrator. Mais elle est trop grande (200x200px) et je ne sais pas comment redimensionner ça.
                            - Ouvrir un nouveau fichier Illustrator => web => 40x40px / 72 dpi.
                            - Sélectionner mon image original => copier et coller dans mon second fichier 40x40.
                            - Enregistrer sous => svg.
                            - Envoyer mon image dans mon répertoire de mon site via ftp.
                            - Aller dans le menu et taper le lien de mon image, car on ne peut pas la sélectionner et ni la voir.

                            Me reste plus qu'à bosser un peu Illustrator.
                            Mais le truc c'est vraiment de garder le svg, effectivement. Et en lisant quelques articles sur le web, c'est effectivement un format vectoriel qui permet d'être toujours parfait sur n'importe quel support.
                            Fichiers joints
                            Dernière édition par thefbi à 02/06/2022, 22h22
                            “Un problème sans solution est un problème mal posé." - Albert Einstein
                            "La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde

                            Commentaire


                            • #15
                              tu vas pouvoir passer directement en réglé
                              N'oubliez pas de passer vos post en "réglé" c'est très utile à celui qui cherche, ...et qui se perd http://forum.joomla.fr/announcement.php?f=133 mais trouvera grâce à vous

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X