personnaliser certains éléments en css

ptitjoz · avril 2021

Bonjour
j'aimerais savoir si il était possible, de personnalise certains éléments de mon site
par exemple j'aimerai que tous mes paragraphes   soient en couleur navy et centrés.

pour l'instant je procéde ainsi, dans chaque article concerné, j'insère ce code

<style>
p {
  color: navy;
  text-align: center;
}
</style>

mais j'aimerais savoir si c'est possible que ça soit dans la feuille de style du site mais je ne sais pas où elle se situe et si c'est la bonne méthode.

Merci de votre aide

Bien cordialement.

thedoctor · avril 2021

Bonjour à toi,
Par ton serveur Ftp, core > admin > puis theme et tu auras les fichiers css. Plucss.Css theme.css ect..
Cordialement.

cpalo · avril 2021

Bonsoir
@thedoctor
admin--> theme c'est pour l'apparence du panneau d'administration
@ptitjoz
Pour l'apparence pour les lecteurs, si tu utilises le theme par défaut de PluXml
c'est dans themes/defaut/theme.css
Et là tu peux apporter les modifications d'apparence de style que tu souhaites

ptitjoz · avril 2021

Merci j'ai bien trouvé le fichier /themes/defaut/css/theme.css
mais si je veux que tout mes   dans le contenu des articles soient avec un certains style, je le code où et comment ?
Merci d'avance

gcyrillus-nomade · avril 2021

Bonsoir,

tu vas devoir te familiariser un peu avec les styles pour ne pas t’essouffler trop vite. tu trouveras facilement des tutoriels sur le net accessibles aux débutants et pour jouer avec je te conseil d'utiliser des éditeur en lignes tel que http://jsfiddle.net ou http://codepen.io .

tutos que tu peut aisément trouvé :

Pour ton premier soucis, qui deviendras vite une mission compliquée à l'aspect impossible lorsque tu voudras continué a personnalisé ton thème, tu peut déjà ajouter à la fin de ton fichier CSS theme.css:

/* modifs perso */

/* modifs dans article */

article p {
     color:navy;
     text-align:center;
     }

Les commentaires t'aideront a t'y retrouver et à ranger proprement tes règles de styles .

Quelques notions sur les sélecteurs te seront indispensable pour ne pas t'arracher les cheveux. Pense aussi a bien ouvrir et fermer tes règles et a t'assurer que tes sélecteurs ciblent bien un ou des éléments existants.

D'autres outils comme caniuse.com te permettent de vérifier que la règle CSS que tu veut utilisé est comprise par ton navigateur et aussi cet outil http://jigsaw.w3.org/css-validator/ qui t'aidera à t'assurer que ton fichier HTML et, ou CSS sont bien formés.

Cdt
GC

bazooka07 · avril 2021

Bonsoir,

L'inspecteur de code de Firefox s'avère bien utile quand on veut jouer avec les règles CSS. En particulier avec les règles de priorité quand cela ne veut pas marcher.
AMHA, c'est plus utile que codepen qui permet de tester ensemble le trio html, css, js.

L'explorateur de Chrome fait peut-être aussi bien mais j'ai plus l'habitude de Firefox.

Autre pont intéressant mais pas parfait : le responsive design sur smartphone et tablette.

gcyrillus-nomade · avril 2021

Heu non,pour codepen ou similaire,Ne pas confondre , c'est pour l'apprentissage uniquement pas pour ausculter une page web
edit - je regrette le plugin EditCSS disparu depuis plusieurs années dans FF qui permettais d’éditer sans fioriture les feuilles de styles sans prendre autant de place que la suite pour dev actuelle

Pour le responsive et les notions qui vont avec, ce sera un peu plus tard et pas trop tard effectivement, il faut un minimum de compréhension avant de verser dans les subtilités . let's go step by step , le mobile first sera un bon point d'entrée AMHA .

bazooka07 · avril 2021

Dans FF, il y a la fonction "copier-coller la règle CSS" avec click-droit dans le panneau des règles CSS, avec numéro de la ligne dans le fichier CSS, qui est bien pratique.

Pour travailler sérieusement, le "mobile first" est un passage obligé. Sinon cela tourne à l'"opération rustines".

ptitjoz · avril 2021

Bonjour.
Merci de vos conseils. il faut bien commencer un jour ou l'autre ; je démarre un peu ce CMS et mettre les mains dans le code ne me fait pas vraiment peur mais c'est vrai que vos conseils, les tutoriels, les exemples et les outils adaptés sont vite indispensables.
je vais essayer de progresser et d'être rigoureux.
Pour mon exemple j'ai suivi le conseil de mettre en fin de fichier mon code commenté.

    /* modifs perso */

    /* modifs dans article */

    article p.poeme {
         color:Navy;
         background:LightGray;  
         text-align:center;
         }

de cette façon là je laisse en l'état la balise  et dans mes articles mes paragraphes sont délimités ainsi si nécessaire  

Bien cordialement.

personnaliser certains éléments en css

Réponses