définir un nouveau modèle de page avec une couleur de fond différente?

Statut : non résolu

Ce sujet contient 4 réponses, 3 participants et a été mis à jour pour la dernière fois par radiCarl, le il y a 17 années et 3 mois.

5 sujets de 1 à 5 (sur un total de 5)

Auteur

Messages

20 avril 2007 à 15 h 21 min #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;
}

20 avril 2007 à 15 h 29 min #598504

dlo

Participant

Maître WordPress

1849 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.

21 avril 2007 à 18 h 41 min #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

22 avril 2007 à 9 h 15 min #598506

AmO

Participant

Maître WordPress

4447 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;
}

13 juin 2007 à 2 h 14 min #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.

Auteur

Messages

5 sujets de 1 à 5 (sur un total de 5)

Vous devez être connecté pour répondre à ce sujet.