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 réduire l'espace entre les colonnes et augmenter la largeur des articles
  • Bonjour,

    je suis nouvelle sur ce forum. J'ai essayé de régler les problèmes seule mais en fait pas facile. Je comprends le système (changer la largeur, les marges) mais je n'arrive pas à trouver où entrer les infos (il y a trop de lignes ^^)

    Voici l'adresse http://lepotdecrayon.over-blog.com/

    J'ai déjà augmenté la largeur globale du blog (j'ai changé directement dans le code de kiwi à global width).

    J'aimerai pour harmoniser l'ensemble augmenter la colonne de gauche (celle du texte) et réduire l'espace entre elle et la colonne de droite

    Mais quand je tape
    #cl_1_0 {
        float: left;
        margin: 0 20px 0 0;
        padding: 25px 5px 0;
        width: 750px;
    }
    avant la dernière balise </style> il ne se passe rien j'ai l'impression.

    Je voulais aussi savoir si je pouvais un peu agrandir l'image de couverture des articles sur la page d'accueil.

    Enfin, je voulais savoir à l'intérieur d'un article, comment mettre une marge plus grande entre les articles conseillés et la navigation article précédent, article suivant.

    Merci d'avance !
  • Bonjour

    sur le thème legacy la dernière balise style se trouve ici (vers la ligne 625 plus ou moins suivant les ajouts précédent)

    image


    tu a elargie le blog a 1100 px il me semble (global)

    la colonne gauche ou il y a le texte de l'article est dénommé "left content"...et la colonne droite "right content"...ce qui donne à ajouter avant </style>

    .left-content {
        float: left;
        margin: 0 20px 0 0;
        width: 780px;
    }

    .right-content {
        float: right;
        width: 250px;
    }

    ________________

    Explications:

    • j'ai augmenté le bloc gauche article à 780 px de large au lieu de 620 actuellement
    • J'ai reduit la colonne" droite à 250 px au lieu de 300 px de large

    tu peux jouer sur ces 2 valeurs pour régler ton blog comme tu veux

    ------------------

    Concernant ta bannière:


    elle fait actuellement 980 x 320 px de haut

    passe la à 1100 px en la redimensionnant avec un logiciel d'image type photofiltre


    ---------------------

    Concernant: "comment mettre une marge plus grande entre les articles conseillés et la navigation article précédent, article suivant."

    avant </style>  tu ajoute:

    .navigation a {
        margin-top: 40px;
        padding: 12px 15px;
    }


    j'ai ajouter une marge haute de 40 px (tu peux regler cette valeur


    ________________________________

    Concernant l'image de couverture en accueil j'ai du mal a trouver ou modifier

    je vois par exemple dans le html:

    <div class="post-cover">
                                                            <img width="300" height="200" alt="J'ai testé : le drive (ou la fausse bonne idée)" src="http://img.over-blog-kiwi.com/300x200-ct/1/85/04/20/20160905/ob_b8312e_potdecrayon2.jpg">
                                                        </div>


    regarde si tu trouve pas la class: <div class="post-cover"> dans ton code

    utilise Ctrl+F au clavier pour le chercher (fonction recherche du clavier)

  • concernant l'image en accueil tente ces lignes avant style

    .post-cover img {
         width: 40%;
         height: 40%;
    }


    et joue sur les pourcentages

    si cela ne fonctionne pas tente la syntaxe

    .cover img  {
         width: 40%;
         height: 40%;
    }

  • Oh merci beaucoup !! Je vais essayer tout ça et je te dis si ça fonctionne.
  • Ah c'est génial. Un grand merci pour ton temps. En plus j'ai appris des choses :) J'ai encore des modifs à faire, je vais essayer seule d'abord, j'espère y arriver.
  • Bon désolée je ne trouve pas...

    J'ai changé la bannière (elle n'est peut être pas définitive) mais je n'arrive pas à trouver où modifier sa largeur pour la passer à 1100px (d'ailleurs je trouverai sympa d'augmenter aussi sa hauteur.

    J'ai voulu ajouter une ligne de code mais je ne sais pas comment l'appeler
    font-cover
    banner ?

    bonne soirée et merci.
  • Bonjour,

    une image se retouche pour en changer les dimensions dans un logiciel de retouche d'image gratuit type "photofiltre"...manipulation facile a faire

    on l'enregistre ensuite sur le pc et on l’héberge sur un article "brouillon" sur overblog pour en recuperer l'adresse url  en cliquant sur
    "aperçu" puis en allant sur l'image avec ta souris...clique droit de la souris......."copier l'adresse de l'image"

    j'ai fait la modification pour toi et j'ai donc élargi ta bannière a 1100 px de large sur 320 px de haut


    _________________________

    On ne va pas toucher a ton code de bannière actuelle on va juste en ajouter un autre avant</style>

    (Tout mettre avant </style> te permet plus tard de retrouver ou sont les ajouts de ligne de code pour les modifier à nouveau ou les supprimer)

    donc tu ajoute:

    .blog-header {
        background-attachment: scroll;
        background-clip: border-box;
        background-color: rgba(0, 0, 0, 0);
        background-origin: padding-box;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: auto auto;
    }


    copie d’écran du "rendu" (ici ta bannière est bien à 1100px x 320 px)

    image


    si tu insère une bannière plus haute (supérieur à 320 px donc), il faut au préalable passer par photofiltre ..........la mettre aux dimensions souhaité en hauteur.........et l’héberger pour en récupérer l'adresse url

    si tu insère une bannière de 450 px de haut par exemple, il te faudra modifier le bloc "header" qui est prévu actuellement pour 320 px

    ici

    .blog-header {
        height: 320px;
    }

    Tu ajoutera aussi en plus du code de la bannière au dessus avant </style> 

    .blog-header {
        height: 450px;
    }


  • Ah voilà merci. Redimensionner ça ne pose pas de problème, j'ai ce qu'il faut ;)

    c'était de trouver quoi mettre avant style car par défaut l'image se met quel que soit son format quand je l'insère en 980 x 320.

    Quand je vois la longueur de ce que tu as inscrit je n'aurai jamais réussi.

    Encore un grand merci ! Bonne journée !
  • cela devrait fonctionner, 

    C'est un peu long car je t'ai détaillé la procédure qui peut aussi éventuellement servir à d'autres lecteurs pour qui intervenir dans  "le code" fait un peu peur.....lol


  • Ah non mais c'est parfait. Super pédagogique en plus ! bref, heureusement qu'il y a ce site et des gens comme toi :) Je vais faire les changements cet aprem.