Changer les couleurs d'un thème
-
Bonjour,
Alors je préviens, je suis novice en matière de blog.
J’aimerais adopter le thème Ocean Mist par Ed Merritt que je trouve très bien construit (bravo!), mais j’aimerais changer les couleurs de bleu pour une palette de vert.
Savez-vous comment m’y prendre ? Est-ce possible ?Merci beaucoup à vous,
x Marie x
L’adresse du blog concerné est (visible uniquement pour les utilisateurs connectés).
-
Je précise que dans les options du thème, on ne me donne pas la possibilité de changer les couleurs. J’aimerais donc savoir si avec CSS (auquel je ne suis pas familière… pas encore) c’est possible !
Merci x -
Bonjour. Vous semblez déjà avoir changé les couleurs de votre thème… Avez-vous toujours des questions à ce sujet?
-
Bonjour!
Merci de votre réponse. Oui j’ai toujours quelques questions.
Je n’arrive pas à changer la couleur de l’intérieur de mon moteur de recherche et je ne sais pas où trouver le Code CSS de celui-ci.
Par ailleurs, j’ai toujours du mal aussi à changer la toute première marge qui reste dans le gris du thème Ocean Mist. Quel serait le code de cette marge ?Merci beaucoup,
Marie
-
Bonjour,
Pour le « recherche » de votre moteur, la CSS appliquée est celle-ci :
#s {
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-size: auto auto;
background-attachment: scroll;
background-color: #CAD6E1;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
border-bottom-color: #B9C3D1;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #B9C3D1;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 1px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #B9C3D1;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 1px;
border-top-color: #B9C3D1;
border-top-style: solid;
border-top-width: 1px;
color: #32474B;
margin-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
width: 130px;
}Remplacez « color: #32474B; » par la valeur souhaitée.
Quant à la marge, pour parlez de la barre située en-dessous du titre de votre blog ?
Si c’est le cas, ça devrait se trouver ici :#mainpic {
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-size: auto auto;
background-attachment: scroll;
background-color: transparent;
background-image: url(« images/mainpic01.jpg »);
background-position: 0 0;
background-repeat: no-repeat;
border-bottom-color: #9EC24C;
border-bottom-style: solid;
border-bottom-width: 3px;
border-top-color: #67939B;
border-top-style: solid;
border-top-width: 3px;
bottom: 0;
display: block;
float: left;
height: 229px;
margin-bottom: 0;
margin-left: 7px;
margin-right: 7px;
margin-top: 0;
position: absolute;
width: 736px;
}(ligne « border-top color »)
maltepe -
Merci beaucoup, ça marche :)
Puis-je abuser de votre aide et vous demander comment je peux insérer dans mon « cadre du haut » des images ?
J’en avais mise une avec le thème bleu original Ocean Mist mais avec ma personnalisation verte, mon image a disparu.
On peut mettre plusieurs images ou une centrale ?
Merci beaucoup !
-
-
Alors….
Dans la partie CSS « #mainpic » (voir ci-dessus),
Remplacez :
background-image: url(« images/mainpic01.jpg »);
Par :
background-image:url(« URL DE VOTRE IMAGE »);
Vous trouverez l’url de votre image dans la bibliothèque après téléchargement, en cliquant sur « modifier ».
D’après la CSS, le thème est conçu pour une image de 736×229 pixels ; mieux vaut redimensionner soi-même l’image avant de la télécharger. Mais vous pouvez aussi déterminer la taille de votre image en modifiant les lignes « width » et « height ».maltepe
-
J’ai oublié de répondre à une partie de votre question :
On peut mettre plusieurs images ou une centrale ?
C’est possible de mettre plusieurs images, de façon plus ou moins compliquée.
Je vous conseillerais de faire votre propre montage d’images et de le télécharger comme image unique.
Au-delà, je ne sais pas faire, j’ai essayé avec un tableau en insérant une image dans chaque cellule, mais ça ne fonctionne pas. D’autres, plus calés sur la question, vous répondront peut-être.Sinon, juste un petit avis de visiteuse : attribuez à la « border-bottom » de votre « cadre du haut » la même couleur que celle du bas, et supprimez celles du menu horizontal (« portrait », etc. – dans la CSS : « .pagetabs a {…) :
visuellement ce sera plus esthétique… ;-)
maltepe -
-
Cette petite remarque je ne l’ai pas très bien comprise…
« Sinon, juste un petit avis de visiteuse : attribuez à la « border-bottom » de votre « cadre du haut » la même couleur que celle du bas, et supprimez celles du menu horizontal (« portrait », etc. – dans la CSS : « .pagetabs a {…) :
visuellement ce sera plus esthétique… ;-)Il y a en fait plusieurs « .pagetabs a »
« Pagetabs a » et « pagestabs a:hover ».
Dois-je supprimer toute la ligne ?
Par ailleurs connaîtriez vous un endroit où je peux trouver ces techniques pour les codes CSS ? Pour insérer des logos, des images ailleurs que dans les endroits prédéfinis, etc.
M x
-
Pour la bordure, je vois que vous avez modifié… :-)
Oui, il y a plusieurs « pagetabs » : « a » c’est pour ce qui s’affiche sur la page, « a:hover » est l’affichage au survol avec la souris ; j’arrive à réduire la petite bande bleutée au bas de chaque case de votre menu à son strict minimum, mais pas complètement. Un peu fatiguée sans doute….
Essayez, en gardant toujours une sauvegarde de la version précédente à proximité.Je ne saurais vous conseiller un endroit pour apprendre le langage de la CSS, ayant appris complètement sur le tas.
J’ai lu votre question des logos ; ça ne me paraît pas simple : il faudrait pouvoir insérer des zones (des « div container ») dans votre « header » (zone du titre) ; je regarderai, mais ne garantis rien…
maltepe
- Le sujet ‘Changer les couleurs d'un thème’ est fermé aux nouvelles réponses.
Forums WordPress.com en français 