Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[RÉSOLU] Comment diminuer l'espace blanc sous un article ?
  • Bonjour,

    Je viens juste de migrer sur Kiwi, avec du coup un thème "Personnalisé". J'ai trouvé sur le forum comment enlever le bouton "Overblog", mais j'ai maintenant trop d'espace blanc sous chaque article : comment le réduire ?
  • Bonjour,

    tu ne peux pas..il correspond a la hauteur cumulé de tes modules à droite..... si tu supprime un module,  le "blanc" se réduit proportionnellement
  • Bonsoir,

    Ha bon, c'est bizarre ! Je ne sais pas si je me suis bien exprimé : c'est le blanc entre la fin de l'article et le mention "Publié par xxxx dans yyyy" que je voudrais diminuer. Dans l'ancienne version j'y arrivais avec des trucs du genre padding, ou margin appliqués aux bons endroits...
  • ok..je comprends mieux...

    tu ne fait pas apparaitre les boutons facebook etc....c'est l'espace "social share"

    .socialShare {
        height: 30px;
        padding: 10px 4px 0;

    tu met tout à 0 px et l'espace se réduit (surtout le 30 px)



  • pour le "blanc" entre "commentez et....aime ce que tu veux (plus bas avant lespace commentaire)

    chjerche

    .afterPage {
        color: #8A8A8A;
        font-size: 10px;
        font-style: normal;
        font-weight: normal;
        margin-bottom: 50px;
        margin-top: 0;


    tu réduit le margin-bottom (marge du bas)

  • Merci mille fois, c'est tellement simple quand c'est expliqué comme cela !

    Si je peux abuser j'aurais deux autres questions, comment :
    - enlever la date au-dessus du titre (pour la mettre éventuellement ailleurs, en bas de l'article par exemple)
    - enlever la mention "Chris dans" avant la catégorie, en bas de chaque article

  • Pour la date

    .date span.text {
        display: inline;
    }


    tu remplace "inline" par none (cela fait disparaitre la date mais je sais pas comment la déplacer ailleur....lol.......pour le moment.;)...)

    .date span.text {
        display:none;
    }

    ________________

    même principe pour faire tout disparaitre pour chris dans ...

    .afterArticle, .afterPage {
        color: #8A8A8A;
        font-size: 10px;
        font-style: normal;
        font-weight: normal;

    tu ajoute un display:none;  ce qui donne

    .afterArticle, .afterPage {
        color: #8A8A8A;
        font-size: 10px;
        font-style: normal;
        font-weight: normal;
        display: none;

    par contre cela masque toute la ligne.
  • Merci pour ces éléments, mais en fait, comme j'ai un thème personnalisé, je pense que je n'ai pas de code CSS comme tu le cites, car je ne retrouve rien de ce que tu dis. J'ai l'impression que je n'ai que du HTML, avec un tout petit peu de CSS au début.

  • Fait un ctrl plus F au clavier pour retrouver les bouts de code...ils y sont car je les ai trouvé en sondant ton css avec firebug (addon à firefox)

    cherche afterArticle  ,tu devrais le trouver
  • J'ai essayé de mettre :
    .date span.text {
        display:none;
    }

    au début de ma feuille (juste avant </style>) mais ça ne fonctionne pas.
  • il faut le mettre en fin de css.... c'est toujours la dernière info css qui prime les précédente

  • Je ne comprends vraiment rien pour le coup. Comment peux tu sonder mon CSS alors que je ne vois pratiquement que du HTML dans mon interface Gérer/Thème/Editer ? Par où puis-je accéder à ce CSS ?
  • Pour être tout à fait clair, voici le début de ma page de code :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
        {% title %}
        {% favicon %}
        {% meta %}
       
        <style type="text/css" media="screen">
            .socialShare {
                height: 0px;
                padding: 0ppx 0px 0px
            }
            .socialShare>div {
                padding: 0 ;
                margin: 0;
            }
            .socialShare h3 {
                display: none;
            }
            .socialShare iframe {
                width: 100px;
                height: 0px;
                float: left;
                border: none;
            }
            .box.social li {
                height: 40px;
            }
            .box.social .ob2-facebook {
                background: url("http://assets.over-blog-kiwi.com/themes/1/images/social-fb.png") no-repeat scroll 0 3px transparent;
                padding-left: 40px;
            }
            .box.social .ob2-twitter {
                background: url("http://assets.over-blog-kiwi.com/themes/1/images/social-twitter.png") no-repeat scroll 0 3px transparent;
                padding-left: 40px;
            }
            .box.social .ob2-rss {
                background: url("http://assets.over-blog-kiwi.com/themes/1/images/social-rss.png") no-repeat scroll 0 3px transparent;
                padding-left: 40px;
            }
            .box.social li a {
                font-size: 14px;
            }
            .box.social li a.link {
                color: #aeb8c2;
                display: block;
                font-size: 12px;
                font-weight: normal;
                margin-top: -2px;
                max-width: 240px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .ob-commentsList .ob-button {
                background: none;
            }
            .widget.search h3 {
                display: none;
            }
            .box.promo a {
                display: block;
                background: url('http://assets.over-blog-kiwi.com/t/catalog/images/promo/{{ Blog.Lang }}.png');
                width: 226px;
                height: 68px;
                text-indent: -10000px;
            }
            .box.promo a:hover {
                background-position: 0 -68px;
            }
            .ads.ads-728x90{
                margin: 0 auto;
                width: 728px;
            }
            .sidebar.ads{
                text-align: center;
            }
           /*---personnalisation--*/
    .ob-share {display:none;}
    .ob-admin-toolbar .lnk_repost{display:none;}
    .ob-admin-toolbar {display:none;}
    .dateExtrait .date span.text {
        display: none;}
    /*---fin de personnalisation--*/
        </style>
        <link type="text/css" href="http://fdata.over-blog.net/99/00/00/01/csscombos/common-kiwi.css?kiwi" rel="stylesheet" />
        {% if Custom('ob_style_common') %}
        <link type="text/css" href="{{ Custom('ob_style_common') }}" rel="stylesheet" />
        {% endif %}
        {% if Custom('ob_style_variation') %}
        <link type="text/css" href="{{ Custom('ob_style_variation') }}" rel="stylesheet" />
        {% endif %}
    .... et après c'est du HTML
  • tu a un css hébergé en externe ici

    http://fdata.over-blog.net/99/00/00/01/csscombos/common-kiwi.css?kiwi


    clique sur le lien, tu le verra.

    donc  soit tu modifie dedans et tu re heberge le fichier modifié en modifiant bien sur l'adresse ci dessus du nouveau css

    soit tu le remet en entier dans le css de ton blog actuel sans passer par un fichier externe

    soit tu ne touche pas au fichier externe mais tu ajoute que la ligne de code que tu veux modifier.
  • pour t'aider sur comment faire va lire cet article bien détaillé

    http://iv-oam.blogspot.fr/2013/05/themes-migration-modifier-son-design.html