• Site mis à jour le 11 mars 2024

1 texte, deux styles CSS au choix

Informations
il y a 12 ans 4 mois #5842 par tryphon
1 texte, deux styles CSS au choix a été créé par tryphon
Bonjour,

Voici le but de ma démarche: appliquer un des styles CSS personnalisés (Style1 ou Style2) à un texte dans JCE.

Style1 et Style2 ont la même structure (mêmes p.classePA, p.classePB, ..., span.classeSA, span.classSB, ..., a.classeAA, a.classeAB, ..., h1, h2, ...) mais des valeurs différentes (police, taille, couleurs)

Le texte en question utilise les balises (identifiées par les classes ci-dessus) et il est copié dans JCE 2 en mode HTML.

Très naïvement sans doute, j’espérai changer le style du texte en sélectionnant Style1 ou Style2 dans la liste déroulante StyleCSS.

Première question : quand je suis de bonne humeur je veux publier mon texte en rose bonbon, italique, petite taille, etc, et quand je ne le suis pas je veux le publier en noir, gras, grande taille,..., simplement en choisissant Style1 ou Style2 dans la liste StyleCSS de JCE. Est-ce possible?

Pour déclarer plusieurs feuilles de styles j'ai appliqué les conseils trouvés ici: www.sarki.ch/jce/forum/4-informations-astuces/1074-feuille-de-style-cs...-pour-appel-dans-jce et ici: www.sarki.ch/jce/forum/2-problemes-divers/5738-css-perso-et-jce
Deuxième question : lorsqu'il n'y a qu'un style personnalisé déclaré dans JCE, il est appliqué par défaut et ça marche. Mais pour deux styles? Quoi faire pour que ce que je veux faire fonctionne?

Merci!

Qnap TS-559, Joomla 1.5.20, JCE 2

Connexion ou Créer un compte pour participer à la conversation.

Informations
il y a 12 ans 4 mois #5855 par mihaly
Réponse de mihaly sur le sujet Re: 1 texte, deux styles CSS au choix
Hello,
Pour arriver à ce que tu souhaites il faut une certaine connaissance des css.
Quand tu appliques une balise titre, par exemple "h2" et que tu veux qu'en sélectionnant style1 il soit en bleu et en sélectionnant style2 en rose, il faut déclarer le style ainsi dans le CSS :
.style1 h2 {
color:#0000ff;
}
et pour le rose :
.style2 h2 {
color:#ee82ee;
}
Le style suivi de la balise permettra de lier les deux.

Tu peux appliquer la couleur à plusieurs balises en les définissant dans la même ligne:
.style1 h2, .style1 h3, .style1 p {
color:#0000ff;
}
La virgule te permet de séparer les balises

Mihàly Marti alias Sarki

Connexion ou Créer un compte pour participer à la conversation.

Informations
il y a 12 ans 4 mois #5874 par tryphon
Réponse de tryphon sur le sujet Re: 1 texte, deux styles CSS au choix
Bonjour,

Hier je ne savais rien du CSS, aujourd'hui j'ai acquis quelques petites notions (de vocabulaire et de syntaxe). Jusque là pas de problème pour comprendre vos explications et je vous en remercie. Je pense que vous n'êtes pas loin de ce que je cherche à faire. Dans votre dernière ligne de code vous attribuez un style particulier à plusieurs balises. Je cherche à coder quelque chose de légèrement différent. Ce serait un truc du genre (mais c'est mal codé, je ne m'y connais pas assez):
.style1 {
          h1 {font-family: arial, color: #0000ff}
          h2 {font-family: courrier, color: #0000ff}
          p {font-family: DejaVu, font-style: italic}
        }
 
.style2 {
          h1 {font-family: FreeSerif, color: #0000ee}
          h2 {font-family: arial, color: #0000ee}
          p {font-family: 'DejaVu Serif', font-style: bold}
        }

J'aurais N styles jusqu'à style N à coder ainsi. Chaque Style est ici composé des mêmes balises avec des valeurs différentes.

Pourquoi je veux procéder de cette manière (simple curiosité)? Parce que j'utilise l'extension Writer2html avec LibreOffice (un filtre d'export qui est un vrai bijou) pour convertir un document mis en forme dans ce traitement de texte vers un fichier XHTML + une feuille CSS. En clair je ne code pas le CSS, on me le sert sur un plateau. J'ai donc des articles à publier avec le Style1, d'autres avec le Style2, ..., avec le StyleN où Style n°i est une composition de styles définis à travers une bonne quantité de balises. Si je pouvais présenter ces compositions comme je l'ai codé ci-dessus et que ça fonctionne dans JCE, ce serait pour moi un minimum de codage CSS à faire (copier coller la feuilles CSS n°i dans la feuille css déclarée dans JCE sous le Style n°i). A titre d'exemple, je joins un fichier XHTML généré que je souhaite inclure dans mon site grâce à JCE (les polices DejaVu Serif et OpenSympol doivent être installées sur votre navigateur, c'est le cas si vous avez installé LibreOffice ou OpenOffice). Evidemment, ce qu'il ne faut pas, c'est que tous ces Styles i se mélangent dans JCE. Si dans JCE je sélectionne le Style 7, je ne souhaite pas voir, dans la liste des styles JCE, .Style1 h1, .Style4 p, .Style12 h1, ...

Seulement voilà, je sais déjà que le codage que je propose ne fonctionne pas (j'ai essayé). Cela dit, ce que je veux faire avec JCE n'est peut-être pas possible. C'est ce que je voudrais savoir.

Qnap TS-559, Joomla 1.5.20, JCE 2

Connexion ou Créer un compte pour participer à la conversation.

Informations
il y a 12 ans 4 mois #5875 par tryphon
Réponse de tryphon sur le sujet Re: 1 texte, deux styles CSS au choix
Voilà le fichier joint.

Fichier attaché :

Nom du fichier : lments_de_logique.txt
Taille du ficher :20 ko

Qnap TS-559, Joomla 1.5.20, JCE 2
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Informations
il y a 12 ans 4 mois #5879 par mihaly
Réponse de mihaly sur le sujet Re: 1 texte, deux styles CSS au choix
Si le but est de pouvoir exporter ces documents et récupéré les style c'est différent.
On voit en effet dans l'en-tête de la page les styles qu'il faut récupérer.

La première étape est de créer la feuille de style liée au document et de l'appeler dans le template.
En effet, si la feuille de style appelée dans JCE permet de voir la mise en page dans l'éditeur, les styles ne seront pas affichés en final si la feuille de style n'est pas appelée dans le template.
Cela veut également dire qu'il faut copier le code du contenu et le coller dans la zone de l'éditeur en affichage code. Ne pas oublier donc d'adapter les paramètres des articles en mettant le groupe Public sur Liste noire, sinon tous les groupes le seront et des portions de code pourrait être supprimées.

Il n'est pas possible comme dans ton exemple de définir un style et y mettre des balises HTML.
Le principe est le suivant :
Les balises html de base tels les h1,h2,etc. et p, ul, ol, etc. ont une valeur par défaut.
L'idée est de modifier ces valeurs par défaut.
Il faut don donner un style de base et le faire suivre par les balises auxquelles ont veut attribuer ce style. Exemple :

style1 p, style1 h1, style1 h2 {
color:#666666;
}
style1 h1 {
font-size;24px
}

style2 p, style2 h1, style2 h2 {
color:#000000;
}
style2 h1 {
font-size;18px
}

Mihàly Marti alias Sarki

Connexion ou Créer un compte pour participer à la conversation.

Informations
il y a 12 ans 3 mois #5905 par tryphon
Réponse de tryphon sur le sujet Re: 1 texte, deux styles CSS au choix
Bonjour,

J'ai compris votre explication et je me rends compte que ce que je demande à JCE n'est pas réellement pertinent dans un éditeur. Il me faudrait coder plus d'une dizaine de styles composés pour répondre à mes besoins. A force de chercher des solutions, j'en ai appris assez et je me satisfais de la solution suivante. En début de l'article n°N, je place la ligne d'appel suivante:
<link href="/Joomla/templates/MonSite/css/StyleN.css" media="all" rel="stylesheet" type="text/css" />

J'ai finalement peu de modifications à faire pour créer la feuille de style N+1 à partir de la feuille N.

JCE affiche bien l'article et c'est suffisant.

Merci pour la stimulation de ma matière grise.

Qnap TS-559, Joomla 1.5.20, JCE 2

Connexion ou Créer un compte pour participer à la conversation.

Temps de génération de la page : 0.171 secondes
Propulsé par Kunena

Rechercher