5 sept. 2010

(OverBlog) Modifier le design Iconic

Nous allons supprimer les différents fonds d'origine de ce design


Vous allez dans Design > Thèmes prédéfinis, vous vérifiez que vous avez bien sélectionné un modèle ICONIC.
Vous allez ensuite dans Design > Mode CSS, vous vérifiez que la case "Je souhaite modifier et appliquer la feuille de style à mon blog" est bien cochée.

Si vous êtes en mode normal, vous faîtes ces modifications dans le CSS Mon Style
Si vous êtes en mode avancé, vous faîtes ces modifications dans tous les CSS Mon Style : Accueil - articles - pages

ENLEVER LE FOND DE L'ENTETE

Effacez ce qui est en rouge
#header {padding: 10px;text-align: left;margin-bottom: 10px;background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/red/pics/header.png) #333;-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;}
ENLEVER LE FOND GLOBAL DES COLONNES

Effacez ce qui est en rouge
#ln_1 {background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/red/pics/fauxcols_7.png) repeat-y #fff;border: 1px solid #bababa;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
ENLEVER LE FOND DANS LA DATE DES ARTICLES

Effacez ce qui est en rouge
.beforeArticle .date, .dateExtrait .date {font-size: 10px;background: #fff url(http://fdata.over-blog.net/99/00/00/01/designs/302/red/pics/date.png) no-repeat 0 3px;padding: 3px 6px 3px 14px;color: #666;}
ENLEVER LE TRAIT SOUS LA DATE

Effacez ce qui est en rouge
.beforeArticle, .dateExtrait {border-bottom: 1px solid #e5e5e5;}
ENLEVER LE FOND DANS LA ZONE APRES L'ARTICLE

Effacez ce qui est en rouge
.afterArticle, .plusExtrait {margin: 0 10px 0 15px;padding: 5px;font-size: 11px;background-color: #eaeaea;border: 1px solid #d1d1d1;-moz-border-radius: 6px;-webkit-border-radius: 6px;line-height: 1.8;font-style: normal;width: 629px;overflow: hidden;}
ENLEVER LE FOND DANS LES COMMENTAIRES

Effacez ce qui est en rouge
div.commentMessage.reponseMessage {margin-top: 10px;background: #fce677 url(http://fdata.over-blog.net/99/00/00/01/designs/302/red/pics/comment_owner.png) no-repeat 8px 6px;padding: 5px 5px 0 33px;-webkit-border-top-right-radius: 6px;-webkit-border-top-left-radius: 6px;-moz-border-radius-topright: 6px;-moz-border-radius-topleft: 6px;border: 1px solid #ffc300;border-bottom: none;}
ENLEVER LE FOND DANS LES INFORMATIONS DES COMMENTAIRES

Effacez ce qui est en rouge
div.commentOption.reponseOption {background: #fce677;margin-top: 0;padding: 5px;-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;border: 1px solid #ffc300;border-top: none;}
ENLEVER LE FOND DANS LE TITRE DES MODULES

Effacez ce qui est en rouge
#cl_1_1 h2 {font-size: 14px;color: #333;font-weight: normal;letter-spacing: -1px;background: #efe1d4;margin-bottom:5px;padding:2px; padding-left: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
ENLEVER LE FOND DANS LE PIED DE PAGE

Effacez ce qui est en rouge
#footer {background: #333;margin-top: 10px;padding: 10px;font-size: 11px;color: #fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;}

14 commentaires:

  1. Coucou !

    Je pense que tu es la seule personne capable de correctement m'expliquer comment installer de widget Link Within en mode normal, sur Overblog!
    Tu voudrais bien faire ça pour moi, parce que je suis vraiment paumée :(
    Et par la même occasion, j'aimerais savoir comment je peux parvenir à modifier mon pied de page ? (je ne sais pas où ça se trouve)
    Tu peux aussi me répondre par mail: nuit-sans)lune@live.be

    Merci d'avance, à bientôt !

    RépondreSupprimer
  2. Bonjour Céline :)
    C'est amusant ton blog a un design qui ressemble aux blogs de Blogger.
    Le script du widget LinkWithIn contient du javascript. Ton blog est à quel niveau ? Si tu es encore en confiance, tu ne peux pas y mettre de javascript et donc pas utiliser ce widget.
    Sinon, c'est assez simple. Tu choisis :
    - la plateforme : others (autres)
    - Width: le nombre de liens en images que tu désires
    Tu cliques sur Getwidget. Tu obtiens un code que tu copies.
    Sur ton blog, dans n'importe quel module Texte Libre, tu colles ce code en HTML. Il faut quelques minutes pour que les images apparaissent.

    Pour le pied de page : dans configuration, tu mets un module Texte Libre tout en bas du blog pour créer ce pied de page.
    Dans le CSS, c'est la ligne
    #ln_2
    qui régit le pied de page.

    RépondreSupprimer
  3. Merci de ta réponse :)
    Je suis toujours en mode confiance alors j'attendrai pour Link Within...
    Par contre je ne comprends toujours pas le pied de page. Comment ça fonctionne ? Je dois insérer les codes dans le HTML ? Et qu'est-ce que je peux y installer ?
    Biz.

    RépondreSupprimer
  4. Bonjour Céline :) Tu n'es pas obligée d'utiliser le pied de page. Tu peux y mettre des liens, des compteurs ... mais rien d'obligatoire.

    RépondreSupprimer
  5. Bonsoir Anna
    Je n'arrive pas à trouver où retirer cette petite image à côté du titre de mes articles.
    Merci pour toutes les aides.

    RépondreSupprimer
  6. Bonjour Nadine, tu veux enlever le petit calepin à gauche du titre de l'article ?
    Dans ton CSS, tu as la ligne
    .divTitreArticle h2, .titreExtrait, .divPageTitle h2, .column_content .micropayment .box-titre h2{
    font-weight: normal;
    font-size: 20px;
    letter-spacing: -1px;
    background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/green/pics/art_title.png) no-repeat 0 2px;
    padding-left: 34px;
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
    clear: both;
    width: 93%;
    }
    Tu la remplaces par
    .divTitreArticle h2, .titreExtrait, .divPageTitle h2, .column_content .micropayment .box-titre h2{
    font-weight: normal;
    font-size: 20px;
    letter-spacing: -1px;
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
    clear: both;
    width: 93%;
    }
    En même temps, j'ai supprimé le retrait vers la droite du titre.

    RépondreSupprimer
  7. Super, merci Anna, mais encore besoin d'une petite aide car le logo d'over blog, en fin de colonne de gauche est décalé alors qu'il ne l'est pas sur les articles et je ne trouve pas où je peux recentrer
    Encore un grand merci

    RépondreSupprimer
  8. J'ai supprimé la marge de gauche et légèrement rétréci la taille de l'image : rajoute tout à la fin de ton CSS
    .concours img {margin-left:0px;width:95%}

    RépondreSupprimer
  9. Impeccable MERCI MERCI
    Bonne soirée

    RépondreSupprimer
  10. Bonjour,

    Je voudrais savoir si tu connaissais un design similaire au mien mais plus facile à personnaliser car le miens est très dur je trouve.
    http://ados-times.blogspot.com

    Bonne soirée

    RépondreSupprimer
  11. Bonjour Dollar21 :) Sympa ta barre du bas. Tu as été voir chez BTemplates ? ils ont des centaines de design et certains très jolis.

    RépondreSupprimer
  12. Bonjour,

    Déjà je te remercie pour toutes ces informations que tu nous fais partager.
    J'ai essayé d'enlever le calepin à côté du titre en suivant tes explications mais il y est toujours :(
    Je suis en mode normal, donc j'ai fait les modifs dans l'onglet "mon style". Est ce que tu as une idée du problème ? Je fais peut être une erreur sans m'en rendre compte. J'ai même fait les espaces pour que tout soit comme ça l'était avant ... Je vais continuer mes essais en attendant ta réponse :)

    Je me demandais aussi si c'était possible d'enlever la barre noire car je souhaiterais mettre une bannière personnalisée et ça ne fait pas joli l'ensemble. (Je ne parle pas de la barre Overblog).

    Merci d'avance de prendre le temps de me répondre. Bonne semaine :)

    RépondreSupprimer
  13. Bonjour,

    Bon finalement j'ai réussi à tout faire ! :)
    Une dernière petite question : est ce que c'est possible de réduire l'encadré sous l'article, là où il y a "écrire un commentaire" ect ... ?
    Bonne journée

    RépondreSupprimer
  14. bonjour, Nadine je n'arrive pas a enlever le petit calepin à gauche du titre de l'article, cmt faire aider moi svp, j'ai pourtant bien remplaçer tes codes

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)