Comme c’est bizarre! Depuis quelques jours, pas mal d’internautes vont sur un de mes billets en faisant la requête Google « Changer couleur fond wordpress« . Et malheureusement pour eux, ils n’ont pas la réponse, car je n’en parle pas. Comme je ne désire pas vous laisser en rade, je me suis dis : « Allez, je vais leur pondre un article sur ce sujet! ».
Pour modifier votre couleur de fond, ce n’est pas très compliqué. Il suffit d’aller sur votre feuille de style, c’est elle qui définit les règles de votre « design ». Une feuille de style, c’est votre fichier « style.css » que vous retrouverez dans le dossier de votre thème (dans ce dossier, vous avez index.php, single.php, header.php, footer.php, etc… + style.css). Si vous ne travaillez pas en local, allez sur votre espace et dirigez vous vers : apparence-> thème-> éditeur de thème-> feuille de style.
Pour définir la couleur de fond, il faut utiliser la balise « background » sur votre corps de page (body) et lui donner une couleur :
[sourcecode language='css']body {
background: white;
}[/sourcecode]
Dans mon exemple, mon thème aura un fond blanc. Et voilà 
Articles similaires
20 novembre 2008 -- Vidéo : installer un thème wordpress (22)
[dailymotion x7gp8e] Vous allez voir, installer un nouveau thème WordPress c'est très facile. Quand on désire changer de thème, c'est que l'on veut un blog visuellement différent (couleur, largeur de...
16 septembre 2008 -- Création thème wordpress en français blogityourself v#2 (0)
Voici donc le nouveau thème de mon blog wordpress! Dans un précédent billet, j'expliquais sa mise en forme sur papier. Pour résumer, je suis parti d'un thème existant, Revolution Blog, et j'ai modifi...
25 août 2008 -- Création de son propre thème wordpress #2 Réflexions, construction sur papier et sidebars (2)
J'attaque aujourd'hui la conception de mon thème. Pour celles et ceux qui découvrent mon blog, je rapelle que ce billet est la suite d'une série d'articles consacrée à la création de mon propre thème...
36 comments
Jérôme says:
oct 9, 2008
Bonjour,
Déjà, j’ai eu beaucoup de souvenirs, en tombant sur ton blog. J’ai commencé par le ZX81, suivi du ZX spectrum et après je suis passé non sur amstrad, ni commodore, mais sur apple…
Et j’ai laissé tombé avant de revenir sur ces folles machines, il y a quelques années
Mais voilà ma question !
Je viens d’installer wordpress et je voudrais mettre un fond gris sur le chapeau de chacun de mes articles. Pour le moment je mets le chapeau en H2, mais il y a d’autres parties du site en H2. Je ne peux donc pas modifier dans la feuille de style H2, mais je n’arrive pas à en créer un nouveau
Pourrais tu m’aider ?
Merci d’avance.
Jérôme
David says:
oct 9, 2008
Bonjour Jérôme et bienvenue sur mon blog, je vois que l’on a des points en communs avec le ZX
Que veux tu dire par chapeau ?
En tous cas, c’est normal d’avoir plusieurs ‘catégories’ de balise H2. Par exemple, pour mon blog, j’ai attribué des H2 pour les titres de mes billets ainsi que les titres de la sidebar. Pour définir chaque H2, il est nécessaire de définir des div. Pour les titres de mes billets, j’utilise
dans mes templates. Et pour spécifier la couleur, j’indique dans ma feuille de style :
#content h2 {
background-color: yellow;
}
Mon div sera différent pour la sidebar, tu comprends ?
Jérôme says:
oct 9, 2008
oui le ZX avec sur ces touches les caractères pour faire de superbes dessins
Le chapeau d’un article, c’est lorsqu’on a un premier paragraphe qui résume l’article. On le différencie pour montrer que c’est le chapeau.
Je vais essayer d’appliquer tes conseils..
David says:
oct 9, 2008
Tu as un exemple de blog qui utilise ce type de chapeau pour que je me fasse une idée ?
Jérôme says:
oct 9, 2008
J’ai avancé sauf que je n’arrive pas à distinguer la zone du chapeau, de la zone de la date (je ne voudrais pas de fond sur la date)…
David says:
oct 10, 2008
Il suffit de supprimer la balise H2 à l’endroit ou tu mets la date, car tu as indiqué que dans la balise content, que toutes les H2 ont un fond gris. Et c’est pas la peine d’attribuer du H2 pour la date, on l’utilise comme je te disais pour les sous titres de ton blog (titre du billet et titres de la sidebar) ou alors, tu doit lui indiquer une « class ». Pour la date, généralement, elle fait partie de la class « postmetadata »
Jérôme says:
oct 10, 2008
ca marche !
j’ai passé tout simplement le H2 de la date en H3 !
Je suis aussi content que mon premier « Hello World » sur le ZX81
Jérôme says:
oct 10, 2008
d’ailleurs cela devait être du genre
10 print « Hello World »;
Non ?
David says:
oct 10, 2008
Salut Jérôme, content que tu t’en sortes ^^
Pour le ZX, ça remontre à trop loin pour m’en souvenir
Nico says:
jan 25, 2009
Salut tout le monde,
Nouveau venu sur la planète wordpresss, j’essare de modifier la couleur de fond de mon blog, et rien ne se passe …
voici le code de ma feuille de style, j’ai mis une couleur powderblue … or le fond reste blanc.
body {
font-size: 12px;
font-family: justinian;
color: #000;
text-align: center;
background: powderblue;
padding: 0;
margin: 0;
background: transparent url(images/bg_page.gif) repeat scroll 0 0;
border-top: 5px solid #191970;
}
T’a
David says:
jan 27, 2009
Salut Nico, c’est normal que ça ne fonctionne pas. En css, Il existe 17 couleurs qui peuvent être nommées directement par leur nom anglais :
* maroon ( #800000 )
* red ( #ff0000 )
* orange ( #ffA500 )
* yellow ( #ffff00 )
* olive ( #808000 )
* purple ( #800080 )
* fuchsia ( #ff00ff )
* white ( #ffffff )
* lime ( #00ff00 )
* green ( #008000 )
* navy ( #000080 )
* blue ( #0000ff )
* aqua ( #00ffff )
* teal ( #008080 )
* black ( #000000 )
* silver ( #c0c0c0 )
* gray ( #808080 )
Donc pas de powderblue.
Nico says:
jan 29, 2009
Merci David !
Tu éclaires le débutant que je suis.
David says:
jan 29, 2009
Oui ? Ca a marché ?
yassine says:
juin 10, 2009
green #008000
cynthia says:
juil 10, 2009
Bonjour, je tente de modifier mon thème… mais ça ne fonctionne pas. j’ai modifié ma feuille de style en changeant le background, et j’ai trouvé comment changer la couleur d’une bande en bas, mais le reste est toujours rouge. Je suis déprimmée. Malgré toutes mes recherches dans le codex. je n’y arrive pas.
Moi qui voulais changer la banière de page en plaçant notre logo et rajouter une animation flash dans la colonne de droite et en haut… je n’ai pas fini.
Voici l’adresse de mon site, si tu peux m’aider…
http://www.theatreeducation.qc.ca
David says:
juil 11, 2009
Salut Cynthia,
Si tu veux un fond rouge :
body {
background: #ecd8b3 url(images/html-bg.gif) repeat-x; (supprimes cette ligne)
et ajoute : background: red;
font: 75%/170% Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
color: #b19472;
je t’invite à lire :
http://blogityourself.net/css-wordpress-modifier-couleurs-blog-1/
cynthia says:
juil 12, 2009
Merci David, mais c’est plutôt le contraire… j’aimerais avoir un site tout beige ou gris pâle. (je sais que ce n’est pas cette couleur qu’il y a pour l’instant, mais comme je ne parvenais pas à le faire maintenant, je n’ai pas trop cherché le numéro de couleur. Mon problème,ce n’est pas le corps de page, mais plutôt les deux cotés et la barre rouge en dessous.
J’ai réussi, en lisant le codex WP et en tatonnant à changer la couleur du background rouge en beige… mais pas le reste.
Une idée?
David says:
juil 16, 2009
Rebonjour Cynthia,
J’avoue que je ne comprends pas très bien ta demande ^^Tu peux reformuler ta question ?
got-to-be says:
mai 4, 2010
Bonjour
Je sais que cet article date un peu mais il pourrai m’être fort utile.
Je cherche effectivement à modifier le fond du site je suis actuellement en train de créer.
Petit problème, je n’ai pas de ce dont vous parlez dans votre article.
Dans la feuille de style CSS, les seuls résultats pour « background » sont ces deux lignes :
« »" .wrap_all{ /*only needed if using big background images like in theme 5*/
width:100%;
position:relative;
display:table;
} « »" »
« »" »
#top .commentlist, #top .commentlist li {
clear:both;
position:relative;
list-style-type:none;
padding:10px 0px 0px 25px;
background-image:none;
margin-bottom:10px;
} « »" »
Sans toutes les « »" » bien sûr.
pouvez-vous m’éclairer à ce sujet ? je voudrais rester dans une couleur unie, j’ai recherché via la couleur en code HTML, amis ca n’a rien donné.
Cordialement
got-to-be pour « GoodWill France »
David says:
mai 4, 2010
Bonjour,
normal tu ne cherches pas dans le bon fichier css, regardes il existe un fichier style2.css, et là tu peux modifier le background situé à la ligne 10 dans body
got-to-be says:
mai 6, 2010
Excellent, Merci beaucoup !!!
David says:
mai 6, 2010
De rien et bonne journée
Audrita says:
mai 7, 2010
Bonjour David,
Je suis complètement débutante sur WordPress et je cherche à modifier le thème Arjuna X pour y mettre un fond blanc et une bannière personnalisée. Comment dois-je procéder?
J’ai tenté de me référer à vos explications, pourtant très claires, mais rien ne se passe. Peut être suis je au mauvais endroit ? Merci par avance
/**
* Main design
*/
body {
background::#d9d9d9 url(./images/pageBG.png) repeat-x 0 0;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:13px;
line-height:normal;
yann says:
juin 13, 2010
Bonjour,
Mon code est :
body {
margin: 0px;
padding: 0px;
background: #357D1B url(images/bg.png) repeat-y center;
color: #666;
font: 12px/15px Verdana, Arial, Helvetica, sans-serif;
Je souhaiterais remplacer le couleur #357D1B par une image.
Comment faire ?
Grand merci !
David says:
juin 14, 2010
Très simple, dans le body de ta feuille de style :
background: url(images/bg.png) top left no-repeat;
yann says:
juin 14, 2010
Merci gars !
ça à l’air de fonctionner. Par contre, je dois m’arranger pour que l’image de fond couvre tout le fond sans que ça fasse trop lourd à charger.
Le top left no-repeat peut être arrangé sans que l’image se répète ?
Merci.
yann says:
juin 15, 2010
J’ai un exemple de ce que je veux faire avec l’image de fond ici : http://www.cssplay.co.uk/layouts/background
Par contre, j’ai du mal à l’intégrer dans le code du thème.
;o)
David says:
juin 15, 2010
@Audrita : Peux tu me donner un peu plus d’explications, car je ne sais pas ce que tu veux modifier dans ton thème
@yann : le no-repeat sert à ne pas répéter l’image et le top left sert à indiquer que tu veux placer ton image sur le haut à gauche. tu peux me donner l’url de ton image que tu veux insérer en background ?
yann says:
juin 15, 2010
La voici : mont-saint-eloi.com/wp-content/themes/fspring-10/images/bg.jpg
David says:
juin 15, 2010
et cette image tu veux la placer je suppose en haut centrée ?
yann says:
juin 15, 2010
J’ai redimentionné l’image pour qu’elle remplisse la plupart des écrans mais c’est plus lourd.
J’aurai préféré un redimentionnement automatique comme dans l’exemple que je t’ai donné.
De plus, ce fond apparaît dans le cadre central en arrière-plan, ce qui rend le texte illisible par endroit.
Je crois que je vais revenir à l’origine.
David says:
juin 15, 2010
@yann : oui je pense que c’est mieux, faut pas faire le chemin inverse. Réalises d’abord ton croquis sur papier et sur gimp ou photoshop, et tu ne te poseras pas ce problème ^^
lambart says:
mai 13, 2011
Mais il n’est pas plus simple de se rendre dans « apparences » puis « arrière-plan personnalisé » pour finir dans « couleur » ? A moins que – cet article datant de 2008 – on ne pouvais pas le faire avant WordPress 3.1.
Espérons que mon commentaire aide des gens aussi bien que votre article !
blogityourself says:
mai 31, 2011
Effectivement, l’explication valait avant la 3.0 mais en même temps rien n’empêche de savoir gérer le BG depuis la feuille de style
gregory35 says:
août 16, 2011
Bonjour,
Voila mon soucis sur mon site http://chambres-hotes-concarneau.fr/
j’aimerai mettre non pas mon arriéré plan mais mes cadres d’écriture en bleu comme sur mon autre site : http://loreedelocean.webnode.com
De plus, j’aimerais mettre une autre couleur à ma bande ou ce trouve mes bouton d’accueil.
Pourrais tu m’aider
merci d’avance
Ivan says:
jan 12, 2014
Bonjour,
j’utilise la version 3.6 de WordPress, avec l’onglet Arriere-plan dans le menu Apparence. J’ai changé la couleur de fond par celle -ci #e5e5e5 mais rien ne bouge.
Voici le code de ma feuille de style, je ne sais pas quoi modifier….
Je vous remercie par avance pour votre aide.
body {
min-width:960px;
}
body{
background-repeat:repeat;
background-position:50% 0;
background-attachment:fixed;
font: 100%/1.3125em Arial, Helvetica, sans-serif;
position:relative;
}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}