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] Bannière
  • Bonjour, je n'avais plus de problèmes depuis longtemps avec overblog. Mais voilà depuis la mise à jour, on me dit que mon thème n'existe plus et qu'il faut changer. J'ai maintenant KIWI.   J'ai mis plus de largeur sur ma page (1130), mais lorsque je veux adapter la bannière à cette largeur, impossible. Même si je la change dans la photo. On dirait que j'ai une largeur fixe d'attribuée.

    Est-il possible aussi de mettre un peu de marge (blanche) en haut de cette bannière.

    J'aimerais aussi changer la police des titres. J'ai des choix dans Personnaliser que je n'aime pas.
    Merci d'exister encore comme forum d'aide.
    Adresse de mon blog : christianeloubier.com
    Les carnets de Christiane Loubier

    Christiane

  • Bonjour,

    Il va falloir intervenir dans le code du blog (gerer...personnaliser;..avancé......editer)

    on mettre une petite marge haute en ajoutant ces lignes de code avant la dernière balise </style> ........de ton css kiwi....celle avant 
    </HEAD> <BODY>

    ci dessous pour t'aider a visualiser
    ou se trouve cette balise </style> 

    imageCette image a été redimensionnée pour tenir dans la page. Cliquez pour agrandir.

    ne tiens pas compte du numéro de ligne, il est spécifique à chaque blog.

    AVANT  </style> Tu colles :

    .blog-header {
      margin-top:30px;
    }

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

    j'ai ajouter une marge haute de 30 px, tu peut affiner cette valeur

    ta bannière actuelle: 

    https://img.over-blog-kiwi.com/980x320-ct/0/83/85/75/20161022/ob_d5457d_bandeau-automne-vue-de-l-ile-2016-b.jpg


    est en dimension: 980 px X 320 px

    tu dois la modifier et la passer en 1200 px X 980 px vu que tu a élargi ton blog a 1200 px

    tu remplace donc l'adresse url de ta bannière actuelle par celle modifiée

    ce qui donne au final en simulation

    image


    _________________




  • (suite)

    ajouter une police de caractère a ton blog:

    tu peux en ajouter bien sur mais le probleme est que ton visiteur aura pas forcement cette police sur son pc, il faut donc qu'elle soit lisible par tous

    pour ce faire il faut utiliser par exemple le service google fonts.

    va voir ce tutoriel



    • Etape 1: il va falloir insérer dans le code de ton blog entre les 2 balises "head" la bibliotheque de font de google

      quand ton visiteur ira sur ton blog, le navigateur ira directement chercher la police indiqué chez google fonts

    • Ensuite, tu insère le nom de la police à l'endroit désiré sur ton blog dans la partie css de ton blog

    exemple:

    .post .post-title {
      margin-top:0;
    font-family:"arial"
    }


  • Bonjour Mehdi,

    Avant tout, un grand merci pour vos réponses que j'ai commencé à appliquer. 

    Mai, j'ai une hésitation pour la fonte. Vous dites :  entre les 2 balises "head".

    J'ai un Head au tout début, est-ce que j'ajoute  le code la  police juste après.

    Instructions sur Google font

    Embed Font

    To embed your selected fonts into a webpage, copy this code into the &lt;head&gt; of your HTML document.

    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400" rel="stylesheet">
    Merci encore, c'est génial ce forum d'aide
     Christiane
  • Bonjour

    oui c'est ça

    si tu utilise la fonction recherche de ton clavier  CTRL + F

    tu verra qu'il y a 2 v balise head

    une d'ouverture et une de fermeture

    tu verra qu'il y a déjà aussi une ligne du genre: <link href="https://fonts.googleapis.com/css?family  (au debut de ton code)

    tu peux coller la tienne en dessous par exemple mais tu peux aussi ou tu veut du moment que c'est dans le "head"

    donc avec cette ligne, on appelle la bibliotheque google font avec sa police cormoran

    reste ensuite a voir ou tu va mettre ta police cormoran
  • Pour la bannière, c'est bon, je viens de voir que tu a rectifier

  •  le premier <head>  est  ligne 3

     le dernier </head>  vers la ligne 1425

    insère ton code vers la ligne 158 juste aprés :

    <meta name="constant:homeArticlesSource" content="OB" />


    au passage, en dessous, tu verra déjà toute les polices possible en natif sur ton blog


  • Point important

    je crois que tu ne vois pas le chargement de police quand tu rédige ou par l'aperçu..

    il se voit une fois l'article publié

    sur mon second blog j'ai mis une police Ecriture des articles ABeeZee......je la vois sur mon article mais pas quand je le rédige  (Les titres sont en grimson text)

    ici:




  • Rebonjour  Mehdi, oups c'est le soir chez vous

    Ouf, c'est facile...J'ai changé le code de la police partout où c'était écrit "font family", c'est fait.
     
    Mais pour les titres des modules, etc. (ce qu'il appelle "écriture"), je ne suis pas certaine. Dois-je intervenir dans d'autres lignes, partout où j'avais le nom de l'ancienne police "raleway"

    Exemple : 

     <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Raleway:400,700' rel='stylesheet' type='text/css'>
            {% elseif Custom('font') == 'MerriweatherSansSerif' %}
                <link href='http://fonts.googleapis.com/css?family=Merienda+One|Merriweather+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
            {% elseif Custom('font') == 'RalewaySansSerif' %}
                <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Raleway:400,700' rel='stylesheet' type='text/css'>


    Merci,

    Christiane



  • non....

    a partir du moment ou tu précise que tu veut ton titre en cormoran il y a rien a modifier ailleurs


    c'est la bibliothèque google avec la fonte raleway comme toi tu a ajouter la font cormoran

    le reste c'est le langage twig mais pas la peine d'y toucher si tu modifie directement dans le css

  • Ah! vous en savez des choses. 
    Pour la bannière, j'ai pris du temps.
    Finalement, j'ai placé la photo dans un brouillon et j'ai copier l'adresse dans Html

    Je trouve cela un peu lourd...pas d'autres moyen?

     ...Quand je fais choisir ficher...ça ne marche pas