Style CSS avec JCE Editor

[VITALTH]

Bonjour,
Ma question doit être archi connu vu que je trouve plein de référence sur le Web mais j'ai l'impression de faire tout comme il faut et pourtant... ben ça marche pas.
Voilà : tout simplement je veux gérer mes propres classes css dans JCE (dans la petite zone déroulante CSS).

Pour cela : j'ai copié / collé deux classes de mon fichier templage.css dans un fichier editor.css se trouvant au même endroit : /templates/<Mon-template-de-site>/css/editor.css

Dans ce fichier créé j'ai ajouté deux classes :

.class1 {
/* des trucs des classes quoi ! */
}

.class2 {
/* rien d'extraordinaire mais que je veux utiliser dans JCE */
}

Puis dans Composants -> JCE Administration -> Configuration global, dans la partie Mise en forme & Affichage j'ai sélectionné "Fichiers CSS personnalisé(s)" dans la liste Style CSS de l'éditeur.

Puis dans la zone de texte Fichier(s) CSS personnalisé(s) j'ai mis : templates/$template/css/editor.css

(j'ai cru comprendre que la système va remplacer $template par <Mon-template-de-site>)

Bref j'ai poussé le truc jusqu'à vider le cache de mon navigateur. Ensuite je suis allé sur mon article et là ou auparavant il y avait une tripoté de classe par défaut et là ou moi je m'attendais à voir class1 et class2 il n'y a... rien ! Impossible de sélectionner des classes.

Du coup y a un truc que je dois mal faire mais j'ai du mal à voir ou ! S'agit il bien du template du site (et non pas celui de l'administration) ? les classes définies dans ce fichier css doivent elle s'appliquer sur une balise donnée (p, div...) ? Y a t'il une subtile nuance avec Editeur de classe dans la config JCE ?

Si quelqu'un pouvait m'aider ce serait cool

[roland_d_alsace]

Re : Style CSS avec JCE Editor

Hello.
La classe doit être définie dans le template en cours.
Les classes que tu souhaites voir apparaître dans la combo lors de l'éditions doivent être énumérées dans le .css indiqué dans la config de jce (mais comme indiqué ci dessus leur définition doit être dans la feuille de style du template utilisé).
Le fichier pour jce est donc très succinct et sert juste à générer la liste pour l'affichage de la combo dans l'éditeur.

C'est logique car l'affichage est indépendant de l'éditeur utilisé pour générer le contenu.
Les règles de style ne peuvent donc pas être liées à jce et sont toujours liées au template.

[VITALTH]

Re : Style CSS avec JCE Editor

Pardon je suis désolé, j'ai peur de ne pas avoir compris.
Merci en tout cas pour votre aide.

Quand vous dites que la classe doit être définie dans le template en cours, doit elle apparaitre dans le fichier templateDetails.xml, index.php ou template.css (si c'est cette dernière possibilité effectivement mes deux classes apparaissent dans les deux fichiers template.css et editor.css).

Et donc du coup dans editor.css (qui est définie dans la config de jce) je n'ai fait que donner la déclaration des classes sous cette forme

.class1 {
}

.class2 {
}

Mais je ne l'ai voit toujours pas apparaitre.

On est bien d'accord que le template en cours est celui du site et non de l'administration ?

[VITALTH]

Re : Style CSS avec JCE Editor

Je pense à un truc là !
Dans ma config JCE j'ai mis un chemin du css sous la forme : templates/$template/css/editor.css

Ok mais j'ai hébergé mon site chez un hébergeur (1&1) et comme l'emplacement de mon site sur le serveur unix n'est pas à la racine, je me demandais si éventuellement çà pouvait avoir une influence.

[fynhooft]

Re : Style CSS avec JCE Editor

Bonjour,

Si on regarde la page concernée sur le site de JCE , tu as juste oublié une chose : nettoyer le cache de ton navigateur internet à la fin.

[VITALTH]

Re : Style CSS avec JCE Editor

Ah non ça je l'ai fait. D'ailleurs si je ne l'avais pas fait C pas 0 classe que j'aurai vu apparaître les toutes celles définies dans la configuration de base de JCE

[fynhooft]

Re : Style CSS avec JCE Editor

Tes classes doivent être à la fois dans le fichier editor.css et dans le fichier template.css.
Les classes class1 et class2 que tu as créé dans editor.css, tu dois également les mettre dans template.css

[PhilJ]

Re : Style CSS avec JCE Editor

Bonjour,

Tes classes doivent être à la fois dans le fichier editor.css et dans le fichier template.css. Les classes class1 et class2 que tu as créé dans editor.css, tu dois également les mettre dans template.css

Il est également possible d'utiliser une directive d'import dans editor.css :
—

@import url();

—
De cette façon, il n'est plus utile de mettre les directives CSS à deux endroits / dans deux fichiers.

Par exemple, à supposer que les personnalisations se trouvent dans un fichier custom.css présent dans /templates/le-template/css, ajouter ceci dans editor.css :
—

@import url(custom.css);

grâce à quoi les classes
—

.class1 {
}

—
et
—

.class2 {

}

—
de custom.css se trouveront également applicables dans l'éditeur.


___________________________

NB : un autre usage utile de @import url(); dans editor.css est le chargement de polices de caractères.

Exemple :

@import url(http://fonts.googleapis.com/css?family=Lato); /* charge la police Lato dans l'éditeur depuis Google Fonts */

[VITALTH]

Re : Style CSS avec JCE Editor

En fait j'avais mis mes classes class1 et class2 également dans template.CSS (bien que ke soupçonne que ce soit inutile de le faire uniquement pour qu'on les voit apparaître dans la petite zone de liste; je pense ceci utile pour que leurs effets soit appliqué dans JCE quand on les a choisi pour un paragraphe donné) mais je n'en suis même pas la : moi je veux juste les voir apparaître dans la zone de liste et même ça je n'y arrive pas. Pour le import URL je l'avais vu aussi mais comme je n'arrivais pas à faire ce que je voulais faire et pour expliquer mon problème ici, je voulais commencer par expliquer qq chose de simple...

[PhilJ]

Re : Style CSS avec JCE Editor

En fait j'avais mis mes classes class1 et class2 également dans template.CSS

...avec l'inconvénient que toute mise à jour du template écrasera vos modifications. D'où l'intérêt d'une surcharge — override — avec un fichier de personnalisation (custom.css), qui, lui sera épargné par les mises à jour, et présentera aussi l'avantage de centraliser toutes les personnalisations du site (template, mais aussi extensions).

(bien que ke soupçonne que ce soit inutile de le faire uniquement pour qu'on les voit apparaître dans la petite zone de liste; je pense ceci utile pour que leurs effets soit appliqué dans JCE quand on les a choisi pour un paragraphe donné) mais je n'en suis même pas la : moi je veux juste les voir apparaître dans la zone de liste et même ça je n'y arrive pas.

Il suffit peut-être de consulter la documentation des 'Custom Styles' (= styles dans la liste déroulante de l'éditeur) sur le site de JCE : https://www.joomlacontenteditor.net/...-custom-styles.


Bonne journée,



PhilJ

[VITALTH]

Re : Style CSS avec JCE Editor

Oui j'avais vu cet article mais j'ai encore plus galère à écrire des styles que d'utiliser mes propres classes de mes fichiers css.
Peut être que ke retenterai à l'utilisation des styles dans JCE mais pour le moment je voudrais me consacrer à mes propres classes

[roland_d_alsace]

Re : Style CSS avec JCE Editor

Hello à tous (les contributeurs de ce fil).

Avez-vous fait l'essai de votre côté ?

Pour ma part il y a effectivement un disfonctionnement,
...car en vérifiant mes configurations pour étayer ma 1ère réponse je constate que ce qui fonctionnait pour moi depuis plusieurs années, ne fonctionne plus à ce jour.
J'ai le même comportement que Vitalth (mon css spécifique défini dans le config de JCE, n'est plus pris en compte, seul le css du Template -option par défaut- fonctionne)

A suivre sur le forum de JCE...

[PieceOfCake]

Re : Style CSS avec JCE Editor

Bonjour,

Il y a deux choses distinctes à considérer :

1) agir sur l'affichage des pages.
Effectivement il faut aller ajouter des fichiers .css dans le template pour qu'ils soient utilisés et utilisables lors de l'affichage de la page. Les méthodes (globales) habituelles et connues fonctionnent, certains templates (notamment dans leur version payante) fournissent des moyens de lister les fichiers à intégrer dans leurs pages de configuration et il reste toujours la possibilité d'utiliser sourcerer de nonumber pour gérer des cas particuliers (fichiers .css à n'intégrer qu'une fois dans un article donné ou très rarement dans certains articles)

2) ajouter ces fichiers .css dans l'environnement JCE pour en voir les effets dans l'édition des articles en wysiwyg de JCE et afficher les dites classes dans les listes de JCE. Reprenons au premier post, c'est effectivement comme cela qu'il faut faire et c'est bien comme cela que je fais (presque).
Pour obtenir le résultat recherché, il faut :
2a) ajouter les noms de fichiers (chemin relatif) via : JCE::Configuration > Mise en forme & affichage > Fichier(s) CSS personnalisé(s) comme par exemple :

templates/$template/css/template_pro.css,
templates/GC/css/racesEQ2.css

La première ligne intégrant un fichier .css relatif au chemin dynamique du template actif
La seconde intégrant un fichier .css relatif à Joomla! directement

2b) les ajouter également dans profils JCE (et pour chaque profil concerné : default|front end|blogger|mobile) onglets [Paramètres de l'éditeur] puis [Typographie] > Fichiers CSS personnalisés où il faudra également remplir les cehemins concernés. C'est ce paramètre qui va remplir les listes de style de l'éditeur (à condition d'être dans le profil concerné) comme c'est d'ailleurs indiqué dans l'infobulle de la zone en question :

Ne pas oublier la virgule en cas de fichiers multiples, c'est rédhibitoire en cas d'oubli

PS : pour Roland d'Alsace, je viens de vérifier c'est ma configuration actuelle (Joomla! 3.4.4 et dernière version de JCE (2.5.7) et ça fonctionne très bien

[VITALTH]

Re : Style CSS avec JCE Editor

C'était bien : c'était une bonne idée ça les profils JCE. Malheureusement cela ne fonctionne pas.

[roland_d_alsace]

Re : Style CSS avec JCE Editor

C'était bien : c'était une bonne idée ça les profils JCE. Malheureusement cela ne fonctionne pas.

Cela "a fonctionné"...
...et doit toujours fonctionner.

Après une petite recherche sur le forum JCE, d'autres ont eu des petites difficultés lors d'upgrades JCE récentes, mais à priori cela doit fonctionner.

A suivre et à approfondir (mais je n'ai pas trop le temps aujourd'hui).