personnaliser certains éléments en css

ptitjozptitjoz Member

Bonjour
j'aimerais savoir si il était possible, de personnalise certains éléments de mon site
par exemple j'aimerai que tous mes paragraphes <p> </p> 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.

Réponses

  • thedoctorthedoctor Member
    28 avril modifié

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

    I'm the Doctor, and I declare this war is over!

  • cpalocpalo Member

    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

  • ptitjozptitjoz Member
    28 avril modifié

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

  • 28 avril modifié

    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

    covid-19 ... ça laisse des traces

  • bazooka07bazooka07 Member
    28 avril modifié

    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.

  • 28 avril modifié

    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 ;) .

    covid-19 ... ça laisse des traces

  • 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".

  • ptitjozptitjoz Member
    29 avril modifié

    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 <p> et dans mes articles mes paragraphes sont délimités ainsi si nécessaire <p class="poeme"> </p>

    Bien cordialement.

Connectez-vous ou Inscrivez-vous pour répondre.