définir un nouveau modèle de page avec une couleur de fond différente? (Créer un compte)

  • Statut : non résolu
5 sujets de 1 à 5 (sur un total de 5)
  • Auteur
    Messages
  • #451667
    radiCarl
    Membre
    Chevalier WordPress
    137 contributions

    Bonjour,

    Histoire d’évoquer une zone spécifiquement artistique dans mon blogue, (la page du porte-folio et celle des poèmes), j’aimerais pouvoir faire en sorte de changer la couleur de fond de ces deux pages distinctes. Évidemment, il me faudra parallèlement aussi changer la couleur de la fonte.

    En toute coïncidence, lorsque j’ai créé un template de page pour afficher le nuage des tags de mon blog (plugin simpletag ) ; le plug-in à générer lui-même la couleur du fond que je souhaite justement appliquer à ma zone artistique (qui concrètement est le bleu du BG et non le fond blanc de la zone “post”.

    Bref, comment pourrais-je définir un nouveau modèle de page avec la couleur de fond par défaut, mais définissant une couleur spéciale (bleu pâle) pour la police de caractère ?

    Merci pour l’attention

    Voici le code de mon CSS

    /*
    Theme Name: egoSconnesso[dot]net
    Description: Three column theme using greens/yellows. Clean appearance. Code by <a href="http://mystical-twilight.com/">Collen</a>
    Version: 1.0
    Author: egoSconnesso[dot]net
    Author URI: http://www.egosconnesso.net/
    */
    
    /* Basics and Typography */
    body {
    background:  url(images/back.gif);
     margin:  0;
     padding: 0;
     font: 8pt/1.2  “Trebuchet MS”, Verdana, Arial, Sans-Serif;
     color: #OOO;
     text-align: justify;
    }
    #header {
     position: relative;
     top:1px;
    
     width: 966px;
     height: 131px;
     margin: 0 auto;
     padding: 0
    }
    #header h1 {
     padding: 46px 0 0 0;
     font: 75%/1.2 “Verdana”, Trebuchet MS , Arial, Sans-Serif;
     margin: 0;
     font-size: 1.7em;
     text-align: center;
    }
    #header h1 a {
     color: #fff;
    }
    #header h1 a:hover {
     color: #efefef;
     text-decoration: none;
    }
    #head {
     text-align:center;
    }
    
    p {
    	font-size: 1em;
    	margin: 0 0 1.2em;
    	padding: 0;
    	line-height: 1.5em;
    }
    ol, ul {
    	font-size: 1em;
    	line-height: 1.5em;
    	margin: 1.2em 0 1.2em 3em;
    	padding: 0;
    	color: ##000033; 
    }
    h1, h2, h3, h4, h5, h6 {
    	margin: .9em 0;
    	font-family: “Trebuchet MS”, Verdana, Arial, Sans-Serif;
    	color: #ccffff; 
    }
    h1, h2 {
    	font-size: 1.3em;
    }
    h3 {
     	font-size: 1.2em;
    }
    h4 {
    	font-size: 1.0em;
    
    	
    	
    }
    a {
    	text-decoration: none;
            background: none;
    }
    a:link {
    	color: #0000cc;
    }
    a:visited {
    	color: #000066;
    }
    a:hover, a:active {
    	color: #cc3300;
    }
    input, textarea, select {
    	border: 0px solid #000;
    	background: #fff;
    	color: #000;
    	font: 8pt/1.2  “Trebuchet MS”, Verdana, Arial, Sans-Serif;
    
    
    
    }
    .button {
    	border: 1px solid #000;
    	background: #fff;
    	color: #000;
    	font: bold 8pt/1.2 “Trebuchet MS”, Verdana, Arial, Sans-Serif;
    }
    blockquote {
    
    		
    	padding-top: 0px;
    	padding-bottom: 0px;
    	padding-left: 8px;
    	padding-right: 8px;
        border-left: 4px solid #ba4942;
    	
    	 }
           
    	font-size: 1.5em
    	
    	
    }
    code {
    	font-family: monospace;
    	color: #666;
    }
    form, img {
    	margin: 0;
    	padding: 0;
    	border: 0px none;
    }
    .small {
    	font-size: 0.9em;
    	color: #ffffff;
    }
    #container {
     width: 966px;
     margin: 0 auto;    
     padding: 0;
     background: #000033;
     border-left: 1px solid #000033;
     border-right: 0px solid #000000;
     border-top: 0px none;
     border-bottom: 0px solid #000000;
     text-align: center
    
    }
    #topcontent {
     width: 966px;
     background: #fff;
     margin: 5px auto 0 auto;
     height: 5px;
    }
    #bottomcontentdouble {
     display: inline;
     float: left;
     width: 500px;
     /*background: #fff;*/
     margin: 5px 9px 0 9px;
     height: 5px;
    }
    #content {
     float: left;
     width: 562px;
     margin:  3px 0px;
     display: inline;
    }
    
    #singlecontent {
     width: 730px;
     padding:0;
     margin: 0 auto;
    }
    
    .post {
     margin: 0 0px 10px 0px;
     padding: 5px;
     background: #fff;
     border: 0px solid #0033cc;
    }
    
    .post a {
     color: #000099;
     text-decoration: none;
    }
    .post a:hover {
     color: #990000;
    }
    .post a:visited {
     color: #000000;
    }
    .post h2 {
     color: #000099;
     font-size: 1.8em;
     margin: 40px 0 0 10px;
    }
    .post h3 {
     color: #000099;
     font-size: 1em;
     margin: 0; padding: 0;
    }
    .meta {
     font-size: .9em;
     line-height: 18px;
    }
    .feedback {
     text-align: right;
     font-size: 1.0em;
    }
    .author {
     width: 200px;
     float: right;
     text-align: right;
    }
    
    
    /* Page Navigation */
    .postnavigation {
     height: 22px;
     
    }
    .left {
     float: left;
     padding-left: 105px;
    }
    .right {
     float: right;
     padding-right: 105px; 
    }
    .leftdouble {
     float: left;
     padding-left: 10px;
    }
    .rightdouble {
     float: right;
     padding-right: 10px; 
    }
    
    
    /* Sidebars */
    #sidebar2 {
     position: relative;
     float: right;
     width: 190px;
     margin: 3px 5px 0 0px;
     display: inline;
    }
    #sidebar {
     position: relative;
     float: left;
     width: 190px;
     margin: 2px 5px 0 5px;
     display: inline;
    }
    #sidebar h2 {
     margin:0; padding: 3px 0;
     color: #000066;
    }
    #sidebar ul, #sidebar2 ul {
     padding:0; margin:0;
    }
    #sidebar ul li, #sidebar2 ul li {
     list-style-type: none;
     list-style-image: url(‘none’);
    }
    #sidebar ul, #sidebar ul li {
     margin: 0;
     padding: 0;
    }
    #sidebar ul li ul, #sidebar2 ul li ul {
     margin: 0 5px 0 0;
     padding: 2px 3px 5px 3px;
    }
    #sidebar ul li ul li, #sidebar2 ul li ul li {
     margin: 0;
     display: block;
     background: url(‘images/bullet.gif’) no-repeat 0 .6em;
     padding-left:10px; padding-right:0; padding-top:0; padding-bottom:0
    }
    #sidebar ul li ul li a {
     display: block;
     height:1%; /* IE WIN */
    }
    #sidebar ul li ul li a:hover {
     text-decoration: none;
    }
    #sidebar ul li ul li ul {
     margin: 0;
     padding: 0;
    }
    #sidebar2 ul, #sidebar ul li {
     margin: 0;
     padding: 0; 
    }
    .sidebg {
     background: #f1f7dc url(‘images/sidebg.gif’) repeat-y;
     padding: 5px
    }
    
    /* The following is the fix for 3-pixel-jog bug in IE */
    /* Hide from IE5-mac. Only IE-win sees this. */
    * html #content {
     /*margin-right: 7px;*/
    }
     
    * html #sidebar, * html #sidebar2 {
     height: 1%;
    }
    /* End hide from IE5/mac */
    
    
    /* Comments */
    
    #response {
     margin: 0px 110px;
    }
    #commentlist {
     padding: 0px 10px 0px 10px;
     margin-left: 10px;
     margin-right: 10px;
     color: #777;
     list-style-type: none; 
     text-align: justify;
    }
    #commentlist li  p{
     padding: 0px;
     margin: 8px 0px 0px 0px;
    }
    .commentname {
     width: 220px;
     float: left;
     font-size: 0.9em;
     margin: 0;
     padding: 0  0 2px 0;
    }
    .commentinfo{
     width: 250px;
     float: right;
     text-align: right;
    }
    .commenttext {
     clear: both;
     padding-top: 0px;
     margin-top: 0px;
     margin-bottom: 70px;
     border-top: 1px solid #e4ebef;
     text-align:left; 
     line-height:16px;
    }
    
    /* Comment Form  */
    h2#postcomment {
     margin: 40px 0px 0px 0px;
     padding: 0 0 20px 10px;
    }
    #commentform {
     padding: 1px 20px;
     margin: 0;
    }
    #commentboxes {
     width: 200px;
     float: left;
     color: #000;
     font-size: 0.9em;
    }
    
    #inputbox {
     clear: both;
     color: #777;
     font-size: 0.9em;
    }
    #button {
     padding-top: 0.5em;
    }
    #commentsbottom {
     margin: 0;
     padding: 0;
     height: 22px;
    }
    
    /* Credits */
    #footer {
     margin: 0px auto;
     width: 966px;
     font-size: .8em;
    }
    #footer p {
     margin-top: 0;
    }
    .clearer {
     clear: both;
     line-height: 0px;
    }
    
    
    /* Typography */
    
    .post {
     color: #000;
     text-align: justify;
    }
    
    .title a  {
     
        
     font-family: “Verdana”, “Lucida Grande”, “Lucida Sans Unicode”,  Verdana, Arial, Helvetica, sans-serif;
     font-weight:normal;
     clear:both;
     text-align: center;
    
     color: #003399;
     display: block;
     text-decoration: none;
     font-size: 1.6em;
     padding: 12px 0 1px 0;
    }
    
    
    
    
    
    .title a:hover {
     color: #cc3300;
    }
    .storycontent {
     padding: 5px 4px 1px 1px;
    }
    .singlepages p {
     text-align: justify;
     margin: 0px 105px 80px 105px;
     line-height: 20px;
    }
    .storycontent a {
     color: #0000cc;
     text-decoration: underline;
    }
    .storycontent a:hover {
     color: #cc0000;
    }
    .storycontent a:visited {
     color: #000033;
    }
    
    /* Page Navigation */
    .left a {
     color: #FFF;
     font-size: 1.4em;
    }
    .right a{
     font-size: 1.4em;
     color: #FFF;
    }
    .leftdouble a{
     color: #FFF;
     font-size: 1.6em;
    }
    .rightdouble a{
     font-size: 1.6em;
     color: #FFF;
    }
    
    .rightdouble a{
     font-size: 1.6em;
     color: #FFF;
    }
    
    
    /* Comments */
    
    
    .commentauthor {
     font-weight: bold;
     font-size: 1.2em;
     padding: 0 0 2px 0;
     margin: 0;
     color: #e2f4fe;
    }
    .commentauthor a {
     font-weight: bold;
     margin: 0;
     background: url(‘images/bullet.jpg’) no-repeat top right;; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0
    }
    .commentdate {
     font-size: 0.8em;
     text-align: left;
     line-height: 18px;
     padding: 0;
     margin: 0;
    }
    #nocomment, #commentsclosed {
     text-align: justify;
     color: #777;
     font-size: 1.1em;
    }
    
    /* Comments Form */
    #comment  {
     width: 510px;
      text-align: center;
    }
    #comment, #author, #url, #email, #press{
     background: #e2f4fe;
     font-size: 1.1em;
     color: #777;
     padding: 1px 2px 1px 1px;
    }
    #comment, #author, #url, #email{
     border: 1px solid #000;
    }
    #comment:hover, #author:hover, #url:hover, #email:hover{
     border: 1px solid #777;
    }
    #comment:focus, #author:focus, #url:focus, #email:focus{
     background: #fff;
     border: 1px solid #000;
     color: #777;
     padding: 1px 2px 1px 1px;
    }
    #commentboxes p {
     margin: 0;
     padding-bottom: 0.9em;
    }
    
    
    h2#comments {
     margin-bottom:40px;
    }
    
    
    p.feeds {
     float: right;
     margin-top: -1.8em;
     font-size: 0.9em;
    }
    
    
    p.feeds a, p.feeds a:hover  {
     text-decoration: none;
    }
    
    
    p.feeds a:hover {
     color: #000000;
    }
    #inputbox {
     clear: both;
     color: #777;
     font-size: 0.9em;
    }
    #inputbox a {
     color: #777;
    }
    #inputbox a:hover {
     color: #FFFFFF;
    }
    
    
    p.inputbox {
     margin: 0;
     padding-bottom: 10px;
    }
    
    
    p.pages {
     margin: 0;
     padding: 40px 40px;
     padding-top: 0;
     text-align: center;
    }
    
    
    p.pages a {
     color: #0033cc;
    }
    
    
    /* Credits */
    p.credits {
     padding: 0px;
     text-align: center;
     margin: 5px 0px; 
     color: #ccffff;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.3em;
    }
    
    
    
    ul#tagcloud { padding:0; margin:0; text-align:center; list-style:none; }
    ul#tagcloud li { display:inline; font-size:70%; color:#0000cc; background: none; padding: 0;}
    ul#tagcloud li a, ul#tagcloud li a:link { text-decoration:none; }
    ul#tagcloud li a:hover { text-decoration:underline; }
    ul#tagcloud li.t1 a { color:#e3f4fc; font-size: 120%; }
    ul#tagcloud li.t2 a { color:#e3f4fc; font-size: 160%; }
    ul#tagcloud li.t3 a { color:#e3f4fc; font-size: 190%; }
    ul#tagcloud li.t4 a { color:#e3f4fc; font-size: 210%; }
    ul#tagcloud li.t5 a { color:#e3f4fc; font-size: 230%; }
    ul#tagcloud li.t6 a { color:#e3f4fc; font-size: 250%; }
    ul#tagcloud li.t7 a { color:#e3f4fc; font-size: 270%; }
    ul#tagcloud li.t8 a { color:#e3f4fc; font-size: 290%; }
    ul#tagcloud li.t9 a { color:#e3f4fc; font-size: 310%; }
    ul#tagcloud li.t10 a { color:#e3f4fc; font-size: 330%; }
    
    /* Search/Archives/Categories Results Pages */
    .searchresult, .searchresult h2 {
     padding: 0;
     margin: 0;
    }
    .searchresult a {
     color: #0000cc; 
    }
    .searchinfo {
     font-size: .9em;
     line-height: 18px;
     padding: 0 0 2px 0;
     color: #000;
     margin: 0 ;
    }
    .searchdetails {
     font-size: .9em;
     line-height: 18px;
     padding: 0 0 2px 0;
     color: #000;
     margin: 0 ;
     border-bottom: 1px solid #d6debb;
    }
    
    /* 
    This piece of code is for clearing
    the floats without structural markup
    Don’t modify it
    */
    .clearfix:after {
     content: “.”; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
    }
    .clearfix {
     display: inline-table;
    }
    
    /* Hides from IE-mac */
    * html .clearfix {
     height: 1%;
    }
    .clearfix {
     display: block;
    }
    /* End hide from IE-mac */
    .alt {
            border-bottom: 1px solid #efefef;
            }
    .notice {
           color: #0066ff;
           font-size: 1.2em;
           font-weight: bold;
            }
    .notice2 {
            color: #000099;
            font-weight: bold;
             }
    #wp-calendar a {
       background: #f4fbd9;
    }

    #598504
    dlo
    Participant
    Maître WordPress
    1850 contributions

    Il faut changer la valeur de la ligne qui contient color: #000; dans la définition de body{} qui se trouve au début de la feuille CSS. #000 est le code de la couleur noire.

    #598505
    radiCarl
    Membre
    Chevalier WordPress
    137 contributions

    Non… ma question est un petit peu plus compliqué.:happy:

    En effet, si j’effectue ce petit changement… la couleur de fond sera modifiée pour l’ensemble des pages du blog. Ma question est plutôt de modifier la couleur de fond d’une page spécifiquement.

    Merci

    #598506
    AmO
    Participant
    Maître WordPress
    4452 contributions

    y’a plusieurs méthodes… soit jouer avec le nom des classes.

    soit jouer avec le css selon les pages

    du style

    
    
    body {
    background:  url(images/back.gif);
     margin:  0;
     padding: 0;
     font: 8pt/1.2  “Trebuchet MS”, Verdana, Arial, Sans-Serif;
     color: #OOO;
     text-align: justify;
    }
    
    body {
    background:  url(images/back.gif);
     margin:  0;
     padding: 0;
     font: 8pt/1.2  “Trebuchet MS”, Verdana, Arial, Sans-Serif;
     color: #OOO;
     text-align: justify;
    }

    #598507
    radiCarl
    Membre
    Chevalier WordPress
    137 contributions

    Merci pour le tuyau Amo.

    Cependant, si au lendemain de ta réponse ici j’ai tenté quelques heures à faire fonctionner ton code dans mon blogue, je me suis résigné à expérimenter une autre piste… qui mène finalement à ce que je voulais.
    En effet, j’ai simplement créé un nouveau modèle de page (template), puis, dans la feuille de style, j’associe ce modèle de page à une couleur de fond spécifique.

    Le résultat est que maintenant, par les changements de couleur, je peux suggérer des zones distinctes dans mon blogue.

    fond blanc = information
    fond bleu pâle = porte-folio
    fond bleu foncé = zone artistique

    Alors, je voulais quand même te remercier, Amo, pour l’attention.

5 sujets de 1 à 5 (sur un total de 5)
  • Vous devez être connecté pour répondre à ce sujet.