[RÉGLÉ] Bouton design

[jeannedavid]

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

https://www.jeannedavid.com

Template Creator CK


Merci

[lomart]

Re : Bouton design

Bonsoir,

Il suffirait d'ajouter le texte en rouge au fichier /templates/demo/css/template.css

#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

#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)

[jeannedavid]

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

[lefabdu51]

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 :

h1 {color:green;}

Les classes servent à personnaliser uniquement les selecteurs ou elle est associée.
exemple :
code html:

<h1 class="titre">mon titre h1</h1>

code css

.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.

http://forum.joomla.fr/showthread.php?64208-Tuto-Suffixe-CSS-de-modules

https://docs.joomla.org/Module_Class_Suffix/fr

http://tutoriels-joomla.joomlack.fr/tutoriels-joomla/tutoriels-de-template/suffixe-de-classe-css.html

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 :

http://www.commentcamarche.net/contents/228-les-classes-de-style-css

http://css.mammouthland.net/selecteurs-css-class-id.php

[jeannedavid]

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 ?

[jeannedavid]

Re : Bouton design

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

[lefabdu51]

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.....

[jeannedavid]

Re : Bouton design

Voilà :



Et ça aussi :





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

[lomart]

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.

[jeannedavid]

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

[lesoutier]

Re : Bouton design

Si c'est réglé merci de l'indiquer :

http://forum.joomla.fr/announcement.php?f=230