Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.
MODIFICATION DES POLICES
Les titres
.box-titre h2 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}Une astuce pour faire clignoter les titres des modules sous FireFox
.box-titre h2 { text-decoration:blink; }Les liens
.box-content a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}Les contenus
.box-content {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que
text-align : center centre le texteMODIFICATION DES PUCES
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite
color : red modifie la couleur de la police, voir les codes couleurs
font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal
text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement
font-size : 20px fixe la taille de la police
font-style : italic transforme la police en italique
font-family : Comic Sans MS sélectionne la police
Il arrive avec certains CSS qu'il soit impossible de rajouter une puce
.box-content li {list-style:none; list-style:disc;list-style:square;list-style:circle;list-style-image : url(adresse de votre puce);}Vous effacez ce dont vous ne voulez pas, sachant que
list-style : none signifie aucune puceIl peut arriver que la puce soit dans la marge et donc invisible, il faut alors rajouter une marge à gauche
list-style : disc représente une puce ronde pleine
list-style : square représente un carré plein
list-style : circle représente une puce ronde vide
list-style-image : url(adresse de votre puce) lorsqu'une image remplace la puce. Vous devez la choisir de très petite taille :10*10px maximum
.box-content li {margin-left:15px;}
MODIFICATION DES FONDS
Un fond dans les modules en entier
.box {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}Un fond dans les titres
.box-titre h2{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}Un fond dans les contenus
.box-content{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}Un fond dans le pied de module (certains CSS en ont un)
.box-footer{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}Vous effacez ce qui ne vous convient pas, sachant que
background-color : red met une couleur dans le fond, voir les codes couleursPour en savoir plus sur les background
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas
AJOUT D'ENCADREMENTS
Pour encadrer tous les modules
.box {border:solid 1px #D8D7D7}Pour encadrer les titres
.box-titre h2 {border:solid 1px #D8D7D7}Pour encadrer les contenus
.box-content {border:solid 1px #D8D7D7}Pour encadrer les images
.box-content img {border:solid 1px #D8D7D7}Pour en savoir plus sur les bordures : créer vos encadrements
Bonjour
RépondreSupprimerje viens d'ouvrir mon blog sur OB ......concernant le module texte libre qui se trouve en bas de ma page d'accueil je ne sais pas ou changer la couleur de police ..actuellement elle est rose et on ne voit pas le texte qui se mélange au fond....mais je ne comprends pas pourquoi quand j'ajoute un module texte libre à droite la couleur de police n'est pas rose mais blanche
Merci pour l'aide et bravo pour tous ces conseils
Bonjour Lady C :) c'est un cas particulier. C'est en fait, le pied de page.
RépondreSupprimerRajoute tout en bas du CSS :
#footer {color:white;}
A titre indicatif, un module Texte Libre placé :
- tout en haut, devient une entête
- au-dessus de l'article, un module Accueil
C'est parfait....
RépondreSupprimerJ'aurais surement plein d'autres questions à poser j'essaierais de les poser dans les bonnes catégories mais avant je lirais bien tout ton blog......
Merci pour ton aide
Bonjour Annak
RépondreSupprimerje n'arrive pas à changer la taille et la couleur de police des liens dans tous les modules ....j'ai essayé par les liens .box-content a et par le contenu .box-content mais apparemment rien ne change....je dois encore faire une erreur mais ou??
Merci pour ton aide et ton gentil commentaire
Bonjour Lady C :)
RépondreSupprimerParfois, je ne sais pour quelle raison, il faut forcer la commande, et c'est ton cas.
Donc actuellement, tu as
a {text-decoration: none; color:#ae4189; font-size:100%;}
Il faut rajouter !important
Ainsi :
a {text-decoration: none; color:#ae4189!important; font-size:100%;}
J'ai testé sur ton blog et les liens sont devenus fuschia.
PS : J'ai mis ton blog en blogroll, tant je suis curieuse de connaître la suite de tes péripéties :)
Bonjour AnnaK
RépondreSupprimerPetite question concernant les modules que je n'arrive pas à modifier. J'aimerais si cela est possible avoir une image avec le titre du module à la place de l'écriture classique. Malheureusement quand je fais la modif indiquée si dessus, cela ne fonctionne pas, j'ai toujours mon écriture et pas mon image... Toutefois j'arrive quand même à changer la couleur du background. Alors vraiment je ne comprends pas. J'ai pourtant lu tout les tutos sur le sujets.
Il s'agit des modules profil, calendrier, recherche, archives et à venir catégorie. Merci par avance.
Bonjour Anna K ! Merci pour ton blog! Tu m'as retiré des épines du pied. C'est clair et concis on ne peut que réussir grâce à toi! Bravoooooooo!!!!!!
RépondreSupprimerLili, je vous que tu as réussi. Bravo :)
RépondreSupprimerMerci Anonyme :)
Bonjour, j'essaie en vain d'enlever la barre grise qui se trouve dessous "ou est ecrit ajouter un com et publie dans :" voire changer la couleur du texte. rien n'y fait quand je prévisualise ca fonctionne quand j'ouvre mon blog non!!! et pourtant je vide le cache Qu'est ce qui se passe ??? ça m'énerve !
RépondreSupprimermecepatou
adresse blog http://mecepatou.over-blog.com/
Bonjour Mecepatou :) avant de modifier par le CSS, as-tu essayé par personnalisation ? car les 2 fonctions ne sont pas cumulables.
RépondreSupprimerBonjour, voila je voudrais modifier les titres de mes modules en rose avec une écriture Amandine le problème c'est que je n'y parvient pas! je l'ai centré, je l'ai fait clignoter (mais maintenant il ne clignote plus) mais impossible de changer la couleur et la police, de plus j ai la ligne h2 la ligne titre mais pa la ligne titre h2. Voila comment j ai procédé:
RépondreSupprimer.box {margin:10px; padding:10px; margin-bottom: 25px;}
.box a {color: #7D807A; text-decoration: none;}
.box a:hover {text-decoration: none; color: #AAA;}
.box h2 { color: pink ; font-size: 25px; font-weight: bold; font-style: none; text-align: center; text-decoration: blink; }
.box-titre { padding:10px; }
Merci de m' aider. Votre blog est super
Bonjour Johanna :)
RépondreSupprimerQuand une ligne n'est pas présente dans le CSS, il suffit de la rajouter. C'est ce que tu as fait, c'est bon :)
Bonjour Annak,
RépondreSupprimerMerci beaucoup pour toute l'aide que tu apportes.
Petit à petit, je modifie le design, c'est pas toujours génial, mais on fait avec .....
Je ne sais pas comment procéder pour enlever le gris qui apparait autour des images, dans les gifs
lorsque je publie un article.
J'aimerais également enlever ,le cadre qui entoure la bannière.
Je te remercie bien sincèrement pour ton aide.
Bonjour Margot :) Je trouve déjà ton blog très joli, très féminin.
RépondreSupprimerPour résoudre tes problèmes, tu rajoutes tout à la fin du CSS
#header{border:0px;}
.contenuArticle img{border:0px;background-color:transparent;}
Merci beaucoup pour ton aide Anna, c'est nettement plus beau maintenant.
RépondreSupprimerJe crois que je vais encore abuser de ton aide, mais, il me faut trouver le bon post pour te poser la question.
Bonsoir, je souhaiterai supprimer l'encadrer gris bien autour de ma bannière personnalisée, comment si prendre? merci beaucoup!
RépondreSupprimerbonsoir je voudrais mettre des " lignes en côté droit " de l'ensemble des modules ! je n'y arrive pas ! j'ai 1 blog sur la première plateforme . merci pour votre réponse !
RépondreSupprimer