Bouton design

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

  • [RÉGLÉ] Bouton design

    Bonjour chez vous !

    J'ai installé JCE et je cherche à mettre un bouton cliquable vers un autre site.

    Jusque là, aucun problème : une image un lien et hop c'est parti.

    Mais ou ça se corse c'est que je voudrais qu'il ai le même design que les liens dans mon menu principal !

    Je pourrais avec GIMP créé une image à l'image de mes liens mais c'est pas très pro !

    Il doit y avoir moyen de faire mieux




    Template Creator CK


    Merci

  • #2
    Re : Bouton design

    Bonsoir,

    Il suffirait d'ajouter le texte en rouge au fichier /templates/demo/css/template.css
    Code:
    #nav ul.menu > li > a, #nav ul.menu > li > span.separator, #nav ul.maximenuck > li > a, #nav ul.maximenuck > li > span.separator[COLOR=#FF0000], a.bouton-design[/COLOR] {
        background: #1d4a64 -moz-linear-gradient(center top , #1d4a64, #ffffff 100%) repeat scroll 0 0;
        border-radius: 20px;
        color: #000000;
        display: block;
        font-size: 14px;
        margin-right: 20px;
        padding: 10px;
        text-align: center;
    }
    Pour avoir l'effet au survol, il faut chercher ce code et ajouter le texte en rouge
    Code:
    #nav  ul.menu > li:hover > a, #nav ul.menu > li:hover >  span.separator, #nav ul.maximenuck > li:hover > a, #nav  ul.maximenuck > li:hover > span.separator[COLOR=#FF0000], a.bouton-design:hover[/COLOR] {
    
        background: #b4c0d6 none repeat scroll 0 0;
    
        color: #ffffff;
    
    
    
    }


    Puis dans les articles JCE, ajouter la classe bouton-design à la balise du lien (a)
    Dernière édition par lomart à 24/08/2016, 18h44
    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


    • #3
      Re : Bouton design

      Bonjour merci pour la réponse rapide.

      Pour le texte en rouge dans template.css : OK no problemo !

      Mais depuis hier je tente de comprendre " classe " " balise " " lien "

      Je suis hyper novice mais j'aime apprendre, comprendre et chercher le pourquoi du comment !

      J'ai réussi à modifier le code avec TextWrangler ce matin après avoir lu des quantités de forum cette nuit !

      Il y a 3 jours je ne savais même pas ce qu'était CSS ou HTML !

      Peux tu m'en dire un peu plus sur l'intégration de "la classe".

      Merci pour tout

      Commentaire


      • #4
        Re : Bouton design

        Le language html sert a définir ce qu est ton document et son organisation
        (par exemple la balise p inque un paragraphe, h1 un titre de 1 niveau, table un tableau...).

        Tu construit ton document comme une maison.

        Les regles css servent à définir la présentation des balises html ( gras, souligne, couleur et police associé au texte....).
        Et les styles css correspondent au papier peint et a la peinture de celle ci.

        une classe en css est un ensemble de propriétés ( ce qui est entre accolades) associées à un sélécteur (balise html).

        Si tu souhaites appliquer une mise en forme à toutes les balise html de meme type, tu cible directement cette balise .
        Exemple :
        Code:
        h1 {color:green;}
        Les classes servent à personnaliser uniquement les selecteurs ou elle est associée.
        exemple :
        code html:
        Code:
        <h1 class="titre">mon titre h1</h1>
        code css
        Code:
        .titre {color :blue;}
        Touts tes titres h1 seront en vert, sauf ceux ou tu auras associé la classe titre, qui eux seront en bleu.
        Les classes te permettent de choisir ou les propriétés seront appliquées.
        Et cela fournit aussi une fonction réutilisable ou tu veux.

        Rien ne t émpeches de l'utiliser pour personnaliser tes titres de second niveau.
        ou d'autres balises html avec cette meme classe.

        Sous joomla, les classes css peuvent être directement paramétrées dans les modules (onglet paramètres avancés), les liens de menus dans la partie administration de ton site.
        On parles alors de suffixes de classe.









        Pour les personnalisations plus poussées telles que celle que tu as demandé (qui n'est pas une modification de la présentation d'un module), il est nécéssaire de les intégrer directement dans le fichier css du template.

        si tu debutes :


        Commentaire


        • #5
          Re : Bouton design

          Merci Merci

          Du boulot en perspective

          J'ai quand même réussi à créer un bouton, pas le mien mais bon c'est un début

          Je suis passé par le Toggle Editor de JCE

          C'est la bonne voie ?

          Commentaire


          • #6
            Re : Bouton design

            j'ai trouvé mon bouton design dans insérer un événement mais je bloque

            Commentaire


            • #7
              Re : Bouton design

              la je ne peut t aider vu que je n utilise pas cet editeur.....
              peut tu fournir une capture de la fenetre ou tu bloques?
              si je peut t aiguiller.....

              Commentaire


              • #8
                Re : Bouton design

                Voilà :

                Cliquez sur l'image pour l'afficher en taille normale

Nom : toggle.jpg 
Affichages : 1 
Taille : 131,7 Ko 
ID : 1805752

                Et ça aussi :

                Cliquez sur l'image pour l'afficher en taille normale

Nom : BD.jpg 
Affichages : 1 
Taille : 37,9 Ko 
ID : 1805753



                J'ai passé la nuit à étudier le CSS : passionnant ! Mais complexe et précis. Cela ne supporte pas la moindre faute !

                Commentaire


                • #9
                  Re : Bouton design

                  Bonjour,
                  As-tu modifier le code CSS dans ton fichier /templates/demo/css/template.css comme je l'ai indiqué dans mon post précédent ?

                  Sinon, une balise p ne fera jamais un bouton. Il faut un code de ce type :
                  <a class="bouton-design">Texte du bouton</a>
                  sous JCE, le a est le bouton avec ds maillons de chaine.
                  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


                  • #10
                    Re : Bouton design

                    Ça marche !

                    Impec !

                    Merci !

                    Génial !


                    Je n'avais trouvé que des autos JCE en Anglais !

                    Mais

                    ! ! JE COMMENCE A COMPRENDRE ! !

                    merci encore

                    Commentaire


                    • #11
                      Re : Bouton design

                      Si c'est réglé merci de l'indiquer :
                      Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide.
                      Confucius

                      Commentaire

                      Annonce

                      Réduire
                      Aucune annonce pour le moment.

                      Partenaire de l'association

                      Réduire

                      Hébergeur Web PlanetHoster
                      Travaille ...
                      X