• Site mis à jour le 11 mars 2024

Insertion de code css

Informations
il y a 6 ans 11 mois - il y a 6 ans 10 mois #11569 par ndubau
Insertion de code css a été créé par ndubau
Bonsoir,
Suite à un conseil sur le forum joomla j'ai été amené à mettre du code css dans un article traité dans JCE. Une fois enregistré pas de problème et le code fonctionnait.
De retour dans l'article pour une correction plus de code ! Juste le texte qu'il devait afficher. On me dit que c'est un réglage des préférences de l'éditeur ; je suis un peu perdu dans la configuration de l'éditeur JCE et fait appel aux lumières de son créateur.
A toutes fins utiles le code est visible sur forum.joomla.fr/showthread.php?220332-Design-particuliercette discussion
Cordialement
Noël
Dernière édition: il y a 6 ans 10 mois par mihaly.

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

Informations
il y a 6 ans 11 mois #11571 par mihaly
Réponse de mihaly sur le sujet Insertion de code css
Hello,
Il te faut éditer le profil JCE utilisé puis aller dans l'onglet "Paramètres de l'éditeur", puis cliquer à gauche sur "Paramètres avancés" et, finalement cocher la case devant "Autoriser le CSS".
Comme on te l'a expliqué dans le forum, tu pourrais mettre le code dans un fichier css chargé par le template. Si tu me dis quel template tu utilises et que je le connais, je peux te guider.

Mihàly Marti alias Sarki

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

Informations
il y a 6 ans 11 mois #11572 par ndubau
Réponse de ndubau sur le sujet Insertion de code css
Bonsoir
Merci de ta réponse qui me lève une épine du pied ! Je viens de procéder à ce réglage et pu éprouver qu'en passant en code on retrouve bien le code espéré !
J'utilise le template d'origine protostar.
Cordialement
Noël

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

Informations
il y a 6 ans 11 mois - il y a 6 ans 11 mois #11577 par mihaly
Réponse de mihaly sur le sujet Insertion de code css
Hello Noël,
Avec le template Protostar, il est possible de créer un fichier CSS personnalisé qui est lu en dernier de sorte que ses styles aient priorité sur les autres, cela permet par exemple de modifier les styles par défaut du template.

Dans ton cas, il serait donc possible de créer ce fichier et d'y mettre la partie CSS de ton code pour ne pas être obligé d'activer la prise en charge des CSS dans la zone de l'éditeur.
Pourquoi il vaut mieux charger un fichier CSS ?
Quand tu ajoutes du CSS dans la partie rédaction, le code est chargé à chaque affichage de la page, alors que lorsqu'il est dans un fichier .css il est mis dans le cache du navigateur et n'a ainsi pas besoin d'être chargé à chaque fois. Dans ton cas, ce n'est pas très important car ce code n'est pas énorme.

Je t'explique quand-même le processus, car comme je le dit plus haut, créer ce fichier permet de modifier les styles par défaut du template, comme par exemple de supprimer la petite ligne de couleur bleue (par défaut) qui est en haut de page.
Je te propose cet exemple comme exercice ;)

Le principe est de créer dans le dossier "templates/protostar/css" un fichier nommé "user.css". A savoir que le nom de ce fichier est propre à ce template, en général il se nomme plutôt "custom.css".
Il est possible de créer ce fichier depuis l'administration du site, mais il faut pour cela que le dossier "css" du template soit en droit d'écriture ; tu peux le vérifier par "Système -> Informations système -> Permissions des dossiers", si le dossier "Template" n'est pas indiqué "Modifiable", il faut alors avec un logiciel FTP appliquer au dossier "css" le droit CHMOD 777, ce chiffre peut parfois changer selon l'hébergeur.
Lorsque tu as un droit d'écriture sur ce dossier, suis les étapes suivantes et n'hésite pas à regarder les captures qui te résume le processus...
  1. Clique sur "Extensions -> Templates -> Templates", puis sur "Protostar Détails et fichiers", cela affiche la liste des dossiers du template.
    Clique ensuite sur le bouton en haut nommé "Nouveau fichier", cela ouvre une fenêtre popup (voir captures ci-dessous).
  2. Clique à gauche sur le dossier "css".
  3. Dans le champ "Nom du fichier", indique "user", puis choisis dans la liste déroulante l'extension "css" et clique sur "Créer".
  4. Une fois ce fichier créé, il te faut l'éditer.
    Clique à gauche sur le dossier "css" pour afficher son contenu puis sur le fichier "user.css", cela ajoute deux boutons dans la barre des boutons : "Enregistrer" et "Enregistrer & Fermer".
  5. Dans la zone d'édition qui s'affiche à droite, colle le code suivant puis clique sur "Enregistrer & Fermer", tu pourras constater qu'il n'y a plus de barre bleue en haut de page.
    body.site {
        border-top: none;
    }
Liste des dossiers du template

La fenêtre popup de création de fichier


Pour ton cas, sur le même principe, il te faudrait coller la partie CSS de ton code en éditant ce fichier user.css
Voilà, j'espère que cela te sera utile un jour, sinon ce le sera sans doute pour quelqu'un d'autre ;)

Mihàly Marti alias Sarki
Pièces jointes :
Dernière édition: il y a 6 ans 11 mois par mihaly.

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

Informations
il y a 6 ans 11 mois #11578 par ndubau
Réponse de ndubau sur le sujet Insertion de code css
Bonjour Sarki
Merci de ce long et fort pédagogique développement sur la manière de créer ce css personnalisé ; je n'en attendais pas moins de ta part ! Je n'ai fait que le survoler et le mettrait en oeuvre bientôt pour testes
Cependant j'ai osé pendant le we inclure le code de lomart dans le css d'origine du template (ayant préservé l'original bien entendu).
Mais je me pose la question suivante : en l'incluant dans chaque article qui le requérait je pouvais jouer sur la taille, l'espacement... et autres propriétés des blocs.
Si ce code est chargé une fois via le css du template; je ne pourrai plus jouer sur ces éléments non ? Et cela serait alors un peu pénalisant (pour moi).
Cordialement
Noël

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

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

Rechercher