• Site mis à jour le 03 juin 2019

CSS et JCE

  • porcini
  • Portrait de porcini Auteur du sujet
  • Hors Ligne
  • Rédacteur Régulier
  • Rédacteur Régulier
Plus d'informations
il y a 9 ans 1 mois - il y a 9 ans 4 semaines #3790 par porcini
CSS et JCE a été créé par porcini
Hello la tribu :)

J’ai beaucoup de mal à comprendre le fonctionnement des feuilles de style dans JCE même en ayant consulté ce message et en ayant bouquiné le livre de Sarki... c’est sûrement moi qui n’arrive pas à avoir le déclic. Si quelqu’un pouvait m’expliquer les paramètres à adopter dans la configuration de JCE concernant les feuilles de style cela me serait de grand aide.

Tout d’abord j’ai une question toute bête:
  • est-il possible d’insérer dans un article et à partir de l’éditeur JCE des styles internes comme on le ferait dans une page HTML dans la balise <style>, si oui quelle est la procédure à adopter car au moment d’éditer le code (à partir de JCE) je n’ai pas en début de page la section habituelle comprenant les balises <html> <head> <meta> <style>, je suppose que c’est parce que je passe par du php, mais là ce n’est plus de mon ressort ...
Ce que je veux arriver à faire:
  • appliquer (en interne) différents styles auxquels je pourrais avoir facilement accès à partir de n’importe quel article édité dans JCE et ceci sans avoir dans la liste des Styles CSS de JCE toute la liste des CSS déjà utilisés par le template. Si cela n’est pas possible en interne, avoir la possibilité d’appliquer des feuilles des styles externes et là aussi sans avoir dans la liste des Styles CSS de JCE toute la liste des CSS déjà utilisés par le template.
Concernant la configuration dans la partie Formatage/Styles:
  • Style fenêtre éditeur, si j’opte pour l’option Personnel en indiquant le chemin de mon fichier css est-ce que cela concerne exclusivement l’aménagement visuel de JCE ou est-ce que cela ce répercutera aussi dans l’édition de mon article?
  • CSS du template, si j’opte pour non et j’indique un autre fichier css, est-ce que toute la mise en page de mon site en sera affecté? Quelle est alors la démarche à suivre pour appliquer mes feuilles de styles en plus de celles qui sont déjà référencées? Il est indiqué sur ce forum et dans le livre de Sarki qu'il faut 'appeler' la nouvelle feuille de style dans la feuille principale du template, dois-je supposer que la feuille principale du template c'est la feuille editor_content.css ou dois-je me référer à un autre fichier comme par exemple template.css.php? Comment appeler la nouvelle feuille de style dans la feuille principale du template? ...bref pas mal de questions encore :(
J’ai pu remarquer qu’en local et en mode administrateur aucun style n’apparaît dans la liste Styles CSS de JCE tandis qu’une fois mon site publié tous les styles apparaissent dans la même fenêtre, comment remédier à ce problème, car avant de me lancer dans l’édition des feuilles de styles sur mon site en ligne j’aimerai tester tout cela en local.

Merci pour le coup de pouce!!
Dernière édition: il y a 9 ans 4 semaines par porcini.

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

  • YRrT_mihaly
  • Visiteur
  • Visiteur
il y a 9 ans 1 mois #3792 par YRrT_mihaly
Réponse de YRrT_mihaly sur le sujet CSS et JCE
Hello,
Ce que tu vois dans l'éditeur, même en édition de code ne représente que le contenu central, donc tu n'as pas les entêtes que tu verraient dans une page HTML.
C'est donc par des feuilles de styles CSS externes que l'on peut appliquer des styles et non en les déclarant dans l'entête.

Le template a besoin pour son formatage et les différents styles de Joomla une série de styles qui sont en général visible dans la liste déroulante "Styles CSS".
C'est pourquoi je propose de faire sa propre feuille de style en copiant uniquement les éléments que l'on souhaite voir dans la liste déroulante.
Il faut ensuite préciser dans la configuration de JCE la feuille appelée, et désactiver (décocher) l'appel de la feuille CSS du template.

Attention, si tu ajoutes des styles dans cette feuille pour l'éditeur, il faut également les mettre dans une des feuilles du template pour que ces styles soient appliqué également en frontal du site lors de l'affichage des pages et non uniquement en mode d'édition.

Si tu as besoin d'un style qui n'est pas dans la liste déroulante, sélectionne dans la barre d'état la balise contenant le texte (<div>, <p>, <strong>, etc.). Clique ensuite sur l'icône représentant un double AA nommée "Insérer/Éditer Styles", cela ouvre une fenêtre qui te permet d'appliquer un style XHTML, c'est à dire avec la balise <... styles="margin: 5px; color: #EEEEEE;">

Les styles de la "fenêtre de l'éditeur" ne concerne que son aspect, pas le contenu de rédaction.

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

  • porcini
  • Portrait de porcini Auteur du sujet
  • Hors Ligne
  • Rédacteur Régulier
  • Rédacteur Régulier
Plus d'informations
il y a 9 ans 1 mois - il y a 9 ans 1 mois #3795 par porcini
Réponse de porcini sur le sujet CSS et JCE
Hello et merci pour la réponse,
il y a encore quelques points que j’ai énoncés dans mon premier post auxquels je n’ai pas vraiment eu de réponse:
  • si j’opte pour ma propre feuille de style que va-t-il se passer avec ma mise en page de mon template vu que la feuille CSS du template est remplacé par ma propre feuille CSS?

  • comment se fait-il qu’en local et en mode administrateur aucun style n’apparaît dans la liste Styles CSS de JCE tandis qu’une fois mon site publié tous les styles apparaissent dans la liste Styles CSS de JCE?

  • comment ajouter les nouveaux styles dans la feuille du template? Quelle est la feuille CSS principale du template? J’en ai plusieurs dans le dossier CSS de mon template...

  • ...concernant l'icône représentant un double AA nommé "Insérer/Éditer Styles" je préfère taper directement mon code dans la fenêtre d’édition du code de JCE... ;)

P.S. à titre d’information le lien de JCE à partir de Google (JCE Editeur - Le portail francophone) est cassé ou faussé...
Dernière édition: il y a 9 ans 1 mois par porcini.

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

  • YRrT_mihaly
  • Visiteur
  • Visiteur
il y a 9 ans 4 semaines - il y a 9 ans 4 semaines #3796 par YRrT_mihaly
Réponse de YRrT_mihaly sur le sujet CSS et JCE
Voici les compléments à tes questions :
  • si j’opte pour ma propre feuille de style que va-t-il se passer avec ma mise en page de mon template vu que la feuille CSS du template est remplacé par ma propre feuille CSS?
    Tu dois donner des nom aux classes CSS personnalisées qui ne risque pas d'être appelée par une fonction de Joomla! ou d'une extension, en général un mot en français sans accent fait très bien l'affaire, puisque les extensions et templates sont en générale développés en anglais.

  • comment se fait-il qu’en local et en mode administrateur aucun style n’apparaît dans la liste Styles CSS de JCE tandis qu’une fois mon site publié tous les styles apparaissent dans la liste Styles CSS de JCE?
    Probablement que le serveur local n'est pas configuré correctement, et que le chemin relatif d'appel ne trouve pas la feuille de style.

  • comment ajouter les nouveaux styles dans la feuille du template? Quelle est la feuille CSS principale du template? J’en ai plusieurs dans le dossier CSS de mon template...
    L'idée est donc de créer ta propre feuille de style à appeler dans l'éditeur.
    Il faut donc que les styles qui s'y trouvent correspondent à ceux appelés par le template.
    Par exemple, tu dois copier les balises h1, h2, h3, h4, h5 et h6 qui sont quelques part dans une des feuilles de style du template.
    Attention, si les balises "p" ont des espaces supérieur ou inférieur particuliers, il te faudra également copier cette balise.
    Si tu crées de nouveaux styles, tu dois les copier cette fois dans une des feuilles du template, s'il y a une feuille qui s'appelle joomla.css prends celle-là, ou celle dans laquelle se trouvent les balises "h" ou "p".

  • ...concernant l'icône représentant un double AA nommé "Insérer/Éditer Styles" je préfère taper directement mon code dans la fenêtre d’édition du code de JCE... ;)
    Je vois que tu es a l'aise, d'ailleurs ne t'offusque pas si je donne des descriptions détaillées qui ne te sont pas nécessaires, je me dis que ça peut servir à d'autres.

P.S. à titre d’information le lien de JCE à partir de Google (JCE Editeur - Le portail francophone) est cassé ou faussé...
Je viens de faire ces derniers jours de grosses mises à jour comme ce forum et en ai profité pour supprimer le index.php qui étaient dans la majorité des URL, donc il va y avoir encore quelques temps des liens cassés sur Google et hélas d'autres sites, il fallait cependant que je fasse ce travail que je repoussais depuis longtemps ;)
Dernière édition: il y a 9 ans 4 semaines par YRrT_mihaly.

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

  • porcini
  • Portrait de porcini Auteur du sujet
  • Hors Ligne
  • Rédacteur Régulier
  • Rédacteur Régulier
Plus d'informations
il y a 9 ans 4 semaines - il y a 9 ans 4 semaines #3797 par porcini
Réponse de porcini sur le sujet CSS et JCE
je ne pense pas, encore une fois :huh: , que j’ai bien saisi tes réponses, quand j’écris "...si j’opte pour ma propre feuille de style que va-t-il se passer avec ma mise en page de mon template vu que la feuille CSS du template est remplacée par ma propre feuille CSS?..." ce que je veux dire par là c’est: que va-t-il se passer avec toutes les pages de mon site qui font déjà référence à la feuille de style du template? Le fait de changer le référencement de la feuille de style du template par ma nouvelle feuille de style est ce que cela aura un impact sur la mise en page du site?

comment et où configurer correctement le serveur local? ...les chemins sont les mêmes autant dans la configuration locale que celle sur le serveur distant...


...c’est ce dernier point qui me donne du fil à retordre, j’ai beau le lire et le relire mais j’en viens pas à bout... si je comprends bien les balises de base (h1, h2, h3, h4, ..., p, ...) doivent être repris dans la nouvelle feuille de style? Et si j’utilise des classes spécifiques (personalisées) aux balises, comme par exemple h2.titrechapitre1 cela ne serait-il pas une meilleure solution?
Dans mon dossier css de mon template j’ai 12 feuilles de style

template.css.php
popups.css
module.css
menu.css
layout.css
joomla.css
iehacks.css
ie7hacks.css
ie6hacks.css
general.css
extensions.css
editor_content.css


...je dois prendre la feuille de style joomla.css et y copier mes nouvelles règles de style?

Est-il possible d’afficher dans Styles CSS de JCE que les nouvelles règles de style que j'ai créé?

...merci pour la patience mais je trouve que les feuilles de style intégrées dans Joomla et dans JCE restent un point encore assez obscur et pas à la portée de tout le monde, j’espère que dans un futur proche un effort sera fait afin de simplifier cette tâche. ;)
Dernière édition: il y a 9 ans 4 semaines par porcini.

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

  • YRrT_mihaly
  • Visiteur
  • Visiteur
il y a 9 ans 4 semaines - il y a 9 ans 4 semaines #3798 par YRrT_mihaly
Réponse de YRrT_mihaly sur le sujet CSS et JCE
Oui, nous ne nous sommes pas compris...
Quand je te parlais de te faire une feuille personnalisée je pensais pour l'appeler dans JCE, surtout pas pour remplacer une du template.
La feuille que tu crées ne sera vue que par JCE si tu l'appelle dans la configuration de JCE et non dans l'affichage du site si elle n'est pas déclarée dans le fichier principal du template, en l'occurrence pour toi template.css.php.
Si tu n'appelles pas une feuille de style personnalisée dans JCE pour la typographie et la mise en page des contenus, selon comment est construit le template (ton cas), tu te retrouves avec un mélange de styles dont ceux utilisés pour l'aspect général du template ou aucun style.
C'est pourquoi je te disais que tu dois avoir les mêmes balises dans la feuille spécifique pour JCE (dans laquelle tu mets les styles que tu veux) et dans celles du template.
Si tu ajoutes des styles dans la feuille CSS pour JCE, il faut les ajouter dans l'une des feuille de ton template comme general.css ou joomla.css.
Dernière édition: il y a 9 ans 4 semaines par YRrT_mihaly.

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

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

Rechercher