13 Sommaire - (OverBlog) Modifications de design

Les articles suivants expliquent comment modifier le design dans chaque partie du blog. Si vous désirez vraiment personnaliser votre blog, choisissez un design basique au départ : Easyblog ou Minimaliste

1. (OverBlog) Découvrir le CSS
2. (OverBlog) Choisir entre mode classique et mode avancé
3. (OverBlog) Choisir entre personnaliser mon thème et mode CSS
4. (OverBlog) Modifier un CSS non modifiable
5. Découvrir les background
6. Découvrir les encadrements
7. Découvrir les codes couleur

Enlever les background d'origine :

1. (OverBlog) Modifier le design American Beauty
2. (OverBlog) Modifier le design Asterisk
3. (OverBlog) Modifier le design Avantage
4. (OverBlog) Modifier le design Bedazzled
5. (OverBlog) Modifier le design Blogging
6. (OverBlog) Modifier le design Characterized - New !!
7. (OverBlog) Modifier le design Club Card - New !!
8. (OverBlog) Modifier le design Commission - New !!
9. (OverBlog) Modifier le design Compressed
10. (OverBlog) Modifier le design Conjuction
11. (OverBlog) Modifier le design Customary
12. (OverBlog) Modifier le design Dark City
13. (OverBlog) Modifier le design Deviation - New !!
14. (OverBlog) Modifier le design Easy Blog - New !!
15. (OverBlog) Modifier le design Element
16. (OverBlog) Modifier le design Emblazoned
17. (OverBlog) Modifier le design Ethnic
18. (OverBlog) Modifier le design Exploitable
19. (OverBlog) Modifier le design Featuring
20. (OverBlog) Modifier le design Floppy
21. (OverBlog) Modifier le design Flowerily
22. (OverBlog) Modifier le design Fly
23. (OverBlog) Modifier le design Garden
24. (OverBlog) Modifier le design Gestured - New !!
25. (OverBlog) Modifier le design Hibiscus
26. (OverBlog) Modifier le design Ice Cream
27. (OverBlog) Modifier le design Iconic
28. (OverBlog) Modifier le design Ignition
29. (OverBlog) Modifier le design Incorporated - New !!
30. (OverBlog) Modifier le design Indication - New !!
31. (OverBlog) Modifier le design Interlude
32. (OverBlog) Modifier le design Logistix
33. (OverBlog) Modifier le design Loseout
34. (OverBlog) Modifier le design Marinelife
35. (OverBlog) Modifier le design Minimaliste - New !!
36. (OverBlog) Modifier le design Modern Times
37. (OverBlog) Modifier le design Nacre
38. (OverBlog) Modifier le design Nimbuslike
39. (OverBlog) Modifier le design Opposed
40. (OverBlog) Modifier le design Parure
41. (OverBlog) Modifier le design Pinklily
42. (OverBlog) Modifier le design Pluralism
43. (OverBlog) Modifier le design Ray
44. (OverBlog) Modifier le design Reference
45. (OverBlog) Modifier le design Season
46. (OverBlog) Modifier le design Shades of grey
47. (OverBlog) Modifier le design Sky
48. (OverBlog) Modifier le design Snowglass
49. (OverBlog) Modifier le design Swanky
50. (OverBlog) Modifier le design Unembellished
51. (OverBlog) Modifier le design Wellness

Ajouter des background dans les zones principales du blog :

1. (OverBlog) Installer une bannière
2. (OverBlog) Mettre un fond dans tout l'écran
3. (OverBlog) Mettre un fond dans le corps du blog
4. (OverBlog) Mettre un fond dans l'entête
5. (OverBlog) Mettre un fond dans l'ensemble des colonnes
6. (OverBlog) Mettre un fond dans les colonnes de modules
7. (OverBlog) Mettre un fond dans la colonne des articles
8. (OverBlog) Mettre un fond dans le pied de page

Les Albums Photos ne sont pas modifiables.

Modfier les polices, liens, puces, background et encadrements :

1. (OverBlog) Modifier les puces
2. (OverBlog) Modifier les liens
3. (OverBlog) Modifier les photos
4. (OverBlog) Modifier le curseur
5. (OverBlog) Modifier les tableaux
6. (OverBlog) Modifier le séparateur 
7. (OverBlog) Modifier les lignes

1. (OverBlog) Modifier la barre OB

1. (OverBlog) Modifier l'entête

1. (OverBlog) Modifier le menu OB

1. (OverBlog) Modifier les articles
2. (OverBlog) Modifier la partie avant l'article
3. (OverBlog) Modifier le titre de l'article
4. (OverBlog) Modifier le contenu de l'article
5. (OverBlog) Modifier les commentaires
6. (OverBlog) Modifier la partie après l'article
7. (OverBlog) Modifier la pagination
8. (OverBlog) Modifier la zone de navigation

1. (OverBlog) Modifier les citations
2. (OverBlog) Modifier les encarts
3. (OverBlog) Modifier les hitimportant
4. (OverBlog) Modifier les hitperso

1. (OverBlog) Modifier les pages

1. (OverBlog) Modifier les modules
2. (OverBlog) Modifier le module Accueil
3. (OverBlog) Modifier le module Album Photos
4. (OverBlog) Modifier le module Archives
5. (OverBlog) Modifier le module Articles Récents
6. (OverBlog) Modifier le module Calendrier
7. (OverBlog) Modifier le module Catégories
8. (OverBlog) Modifier le module Commentaires Récents
9. (OverBlog) Modifier le module Communautés
10. (OverBlog) Modifier le module Images Aléatoires
11. (OverBlog) Modifier le module Liens
12. (OverBlog) Modifier le module Newsletter
13. (OverBlog) Modifier le module Pages
14. (OverBlog) Modifier le module Profil
15. (OverBlog) Modifier le module Présentation
16. (OverBlog) Modifier le module Rechercher
17. (OverBlog) Modifier le module Syndication
18. (OverBlog) Modifier les modules Texte Libre

1. (OverBlog) Modifier la page des résumés d'Articles
2. (OverBlog) Modifier la page C.G.U.
3. (OverBlog) Modifier la page Communautés
4. (OverBlog) Modifier la page de résultats des recherche
5. (OverBlog) Modifier la page des articles les plus commentés
6. (OverBlog) Modifier la page récapitulative des Articles

1. (OverBlog) Modifier la fenêtre Commentaire
2. (OverBlog) Modifier la fenêtre Recommander
3. (OverBlog) Modifier la fenêtre du Clic Droit
4. (OverBlog) Modifier la fenêtre de partage
   

Lire La Suite...

9 (OverBlog) Modifier la fenêtre de partage

Nous allons modifier le design de ce pop up (police, background et encadrements) qui apparaît en bas à droite sur chaque article :

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

Tout le texte

.socialPopup .text {text-align : center ;  font-weight : bold ; text-decoration : underline ; font-style : italic ; color : red !important;   font-size : 20px !important; font-family : Comic Sans MS !important; }

Seulement le titre

div.socialPopup span.text.title {text-align : center!important ;  font-weight : bold ; text-decoration : underline ; font-style : italic ; color : red !important;   font-size : 10px !important; font-family : Comic Sans MS !important;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
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

MODIFICATION DU FOND

Un fond dans la totalité du pop up

.socialPopup {background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;background-repeat:no-repeat;background-position:center;}

Un fond seulement dans le titre

div.socialPopup span.text.title {background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;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 couleurs
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

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer la totalité

.socialPopup{border:solid 1px #D8D7D7!important}

Pour encadrer le titre

div.socialPopup span.text.title{border:solid 1px #D8D7D7!important}

Pour en savoir plus sur les bordures : créer vos encadrements

POUR LA POSITIONNER A GAUCHE

.socialPopup {position: absolute;left:0px;}

Lire La Suite...

22 Sommaire - (Blogger) Propositions de design

Personnalisation du design général

1. (Blogger) Installer un nouveau template
2. (Blogger) Scinder la colonne en deux sidebar.

Personnalisation des articles

1. (Blogger) Insérer sa signature en fin d'article
2. (Blogger) Afficher le pied d'article uniquement en page des articles

Personnalisation des commentaires

1. (Blogger) Ajouter une bulle avec le nombre de commentaires
2. (Blogger) Numéroter les commentaires
3. (Blogger) Personnaliser le design de vos réponses aux commentaires

Personnalisation des widgets

1. (Blogger) Afficher un widget uniquement en page d'accueil ou en page des articles

Personnalisation de la pub

1. (Blogger) Placer la pub Adsense sous le titre des articles

Lire La Suite...