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] Modifier bannière
  • Bonjour,

    J'aimerai modifier la taille de ma bannière dans le html svp car quand je la charge à partir de mes documents, elle s'affiche en petit sur mon blog alors qu'elle fait 800x277 et son poids est de 87,5Ko.

    Je ne comprend donc pas pourquoi ça ne passe pas. Y a t-il un code svp à insérer?

    Merci
  • Bonjour et bienvenue sur ce forum communautaire d'entraide entre Obiens bénévoles. :)


    En tout premier lieu je t'invite à compléter ton profil forum (c'est plus sympa et indispensable pour l'entraide), afin de t'aider dans cette première démarche il existe un topic en haut du forum : 

    Ensuite je t'invite à regarder du côté des petites règles du forum là :
    Ce topic est aussi en permanence en haut du forum. Dans sa deuxième partie tu y trouvera aussi une petite FAQ.
    Comme elle ne liste pas tout les topics (c'est pas une table des matières) je t'invite aussi à faire une recherche avec le bouton en haut à droite.
    Comme cette dernière n'est pas efficace à tous les coups, il faut des fois essayer avec différents mots clefs.
    En dernier lieu, parcourir les différents titres du forum (chose que je fais très souvent) permet aussi de trouver dans certains cas son bonheur ;)


    Belle journée
  • Oui je vais voir ça merci mais en attendant est-ce que tu sais comment régler mon souci?
  • Tant que tu ne fais pas le nécessaire à la première demande : non ;)

    Si le lien ne fonctionne pas (pour la première demande) :
    Clique sur ton pseudo ici sur le forum, dans la fenêtre qui s'ouvre clique sur "Activité" et là tu est sur la page que l'url directe indiquait. De la compléter le rectangle blanc avec un petit de présentation (toi et/ou ton blog et son adresse).
    Fait le, ça sera utile pour tes autres interventions dans le forum et comme ça tu en sera quitte une bonne fois pour toute ;)

  • RE bonjour,

    Merci d'avoir complété ;)

    Pour ta demande d'entraide... ça va se corser et si j'ai bien compris tu veux une bannière qui utilise toute la largeur de l'entête ! Ce qui veut dire qu'il va falloir aussi passer par le html-CSS ! :|

    Dans un premier temps on va utiliser l'interface/la console et le "Configurer" (Gérer => Thème puis Configurer)

    Une fois là : Apparence ne pas utiliser "Image En-tête" mais "Image de fond" !
    (J'y suis pour rien à cette chinoiserie je travaille pas chez OB hein ;) )

    Là tu mets ton curseur sur l'image et tu clique sur la croix qui apparaît.
    L'image s'efface, ainsi que dans la prévisualisation 
    .
    Dans le texte qui remplace l'image tu clique sur "Utiliser l'url de l'image"et dans le rectangle qui s'ouvre tu colle "http://img.over-blog-kiwi.com/0/76/65/29/201309/ob_61fbe3c77376dc68ee12c25424a6a132_ban-copie-mini.jpg" (c'est l'url de ta bannière ;) )
    Dans la prévisualisation tu vois à présent ta bannière (pas centrée et avec d'autres infos [ça sera pour la suite)
    Clique sur "Enregistrer"

    Une fois fait, sur la même ligne que le bouton "Enregistrer" que tu viens d'utiliser tu a un bouton "HTML" (clique dessus)

    Maintenant tu a la colonne avec plein de code : On commence par faire une sauve-garde comme ça tu aura sur ton disque dur une archive que tu pourra utiliser si tu te trompe. Pour ce faire clique sur "Backup"

    Une fois fait, fait un Ctrl f et dans la petite fenêtre qui s'ouvre copie/colle
    #header-outer
    et utilise la petite flèche (une fois).
    Cela va te donner la 1ère ligne sur laquelle il faut travailler :
    #header-outer {
                    {% if Custom('headerImageBackground') is not empty %}
                        background: url({{ Custom('headerImageBackground') }}) no-repeat right bottom;
                    {% else %}
                        background:none;
                    {% endif %}
                    width: 920px;
                    min-height: 300px;
                    color: #932b54;
                    margin: 0 auto 0;
                    padding: 0;
                    overflow: hidden;
                }

    Repère le right (que j'ai mis ici en rouge et change-le par center
    Tu va donc avoir :
    #header-outer {
                    {% if Custom('headerImageBackground') is not empty %}
                        background: url({{ Custom('headerImageBackground') }}) no-repeat center bottom;
                    {% else %}
                        background:none;
                    {% endif %}
                    width: 920px;
                    min-height: 300px;
                    color: #932b54;
                    margin: 0 auto 0;
                    padding: 0;
                    overflow: hidden;
                }
    Clique sur "Enregistrer"

    Ensuite reste la petite image que tu à ajouté... tu pourrais simplement la retirer depuis l'interface/la console... Mais dès que tu placera ailleurs (via les paramètres) dans ton administration la "Photo du blog" elle risque de réapparaître, comme pour être sur le portail d'OB il est conseiller de compléter cette partie, nous allons de suite l'empêcher de venir se placer dans ta bannière.
    Donc nous somme toujours dans le HTML, cette fois-ci recherche (Ctrl f) avec "a img "

    Tu va trouver : 
                a img {
                    border-width: 0;
                }

    Place ton curseur après le ; et fait tape sur ta touche "Enter" du clavier (dans le code tu es passé à la ligne suivante, maintenant ajoute :
    display: none;

    Pour avoir comme ceci
                a img {
                    border-width: 0;
                    display:none;
                }

    Clique à nouveau sur "Enregistrer" et ensuite sur "Backup" (ça ajoutera un deuxième backup avec un numéro à la fin pour différencier du backup précédent [garde tout cas bien de côté]) et clique une dernière fois sur "Retour" pour quitter le html

    Voici sur un de mes blog labo/essais/tests ce que cela va donner : ; http://laboblogvger.over-blog.com

    Avec tout ces changements et de la manière dont je te les ai fait faire, la prochaine fois que tu veux changer de bannière, tu n'auras qu'à utiliser l'interface/la console et le "Configurer" (Gérer => Thème puis Configurer) et changer "l'image de fond" (donc faudra plus repasser par le code ;) )

    Bon courrage :)
  • Un grand merci, j'ai suivi à la lettre et tranquillement et j'obtiens ce que je voulais. 

    Je voulais savoir à quel endroit du css je peux mettre un peu plus d'espace entre la bannière et ce qu'il y a d'écrit en dessous (accueil, contact) .

    Et quand je clique sur ma bannière, rien ne se passe. J'aimerai bien avoir un lien dessus qui renvoie sur l'adresse de mon blog.

    De plus, pour avoir le titre de mon blog dans l'onglet internet, je dois remplir le titre dans les paramètres mais quand je le fais cela le met également sur ma bannière. Comment l'enlever de la bannière en faisant en sorte qu'il reste quand même dans l'onglet internet?
  • RE,

    Donc pour l'espace sous la bannière on retourne de nouveau sur le #header-outer et cette fois ci tu as :
    #header-outer {
                    {% if Custom('headerImageBackground') is not empty %}
                        background: url({{ Custom('headerImageBackground') }}) no-repeat center bottom;
                    {% else %}
                        background:none;
                    {% endif %}
                    width: 920px;
                    min-height: 300px;
                    color: #932b54;
                    margin: 0 auto 0;
                    padding: 0;
                    overflow: hidden;
                }


    change margin: 0 auto 0; 
    pour margin: 0 0 50px 0;

    (le "50px" est à ton appréciation (10, 15, 20, 22, etc jusqu'à ce que tu souhaite ;) )


    Pour la suite, J'arrive plus sur mon blog d'essais pour le moment (OB est "frozen[-( ) et donc tacherai d'achever ma réponse quand j'aurai à nouveau accès à mon administration :-w
  • Bon reviendu :)

    Alors, pour supprimer "l'avatar du blog" (tu as pas encore demandé, mais comme il risque aussi de venir gêner plus tard :

    Recherche (Ctrl f) : a img

    et tu aura ça

                a img {
                    border-width: 0;
                }
    ici aussi tu dois ajouter un display: none;
    Pour avoir ceci :
                a img {
                    border-width: 0;
                    display: none;
                }

    Pour supprimer la description, recherche #header .description et tu trouve :
                #header .description {
                    max-width: 400px;
                    margin: 0 5px 5px;
                    color: #31bbbb;
                    font-size: 14px;
                    font-family: 'Gloria Hallelujah', Georgia;
                    font-weight: bold;
                    line-height: 1.4em;
                }

    et ici aussi tu dois ajouter un display: none;

              #header .description {
                    max-width: 400px;
                    margin: 0 5px 5px;
                    color: #31bbbb;
                    font-size: 14px;
                    font-family: 'Gloria Hallelujah', Georgia;
                    font-weight: bold;
                    line-height: 1.4em;
                    display: none;
                }

    Pour rendre la bannière cliquable je vais ruser, car je ne suis pas fort avec le langage "Twig" qui est utilisé sur cette version d'OB
    Et donc pour ruser je vais utiliser (/détourner :P)  le "Titre du blog" que tu désirais aussi ne pas avoir (puisqu'il venait par dessus la bannière)

    Recherche #header-inner .title .text

    et tu trouvera
                #header-inner .title .text {
                    display: block;
                    max-width: 400px;
                    font-size: 40px;
                    padding-left: 3px;
                    font-family: 'Kranky', cursive;
                    text-shadow: -1px 0 #660000, 0 1px #660000, 1px 0 #660000, 0 -1px #660000;
                }
    Il va falloir supprimer des lignes
                #header-inner .title .text {
                    display: block;
                    max-width: 400px;
                    font-size: 40px;
                    padding-left: 3px;
                    font-family: 'Kranky', cursive;
                    text-shadow: -1px 0 #660000, 0 1px #660000, 1px 0 #660000, 0 -1px #660000;
                }

    Et en ajouter de la sorte :
                #header-inner .title .text {
                    display: block;
                    width: 920px;
                    height: 220px;
                    color: transparent;
                }

    Je m'explique : 
    Vu que le texte en question apparaissait en "surimpression" par dessus ta bannière, vu que lui était cliquable et vu que le "clic" amenait à la page d'accueil du blog, je l'ai réutilisé pour obtenir à 90% ce que tu voulais.
    J'ai rendu le texte transparent et agrandi la zone (la "surface") de façon à ce qu'elle recouvre presque entièrement ta bannière (en fait de gauche à droite c'est bon, mais aux bords supérieur et inférieur de la bannière il reste des zones non cliquable [et si j'agrandi la zone, je rejette trop haut le "petit cœur sur la ligne qui est au dessus de la bannière]) 
    Note : Le texte apparaîtra au survol de la bannière à la façon d'une description d'image

    (@iv-oam : Si tu as une manière plus "élégante" et "propre" ... je prends :)
    J'ai essayé avec <a href="{{ Blog.Url }}"><img src="{{ Custom('headerImageBackground') }}" alt="{{ Blog.Title}}" /></a> mais sans y arriver [pour cause de valeur vide])

    N'oublie pas une fois ces changements fait d'Enregistrer et de créer une nouvelle archive (sauvegarde) avec le bouton "Backup"


    PS: Encore une fois tu peux aller voir sur mon blog test (http://laboblogvger.over-blog.com/) pour vérifier ce que cela donne avant de commencer à procéder aux changements

    NB : Si Denis ou Iv-oam te propose un autre code pour la bannière cliquable, il sera plus que probablement meilleur que le mien et donc prends son code ;)
  • Merci de ton aide.

    Quand je regarde sur ton blog test par contre, au-dessus de la bannière tu as une ligne avec un cœur qui fait visiblement partie du thème. Pourquoi je ne l'ai plus? On peut la remettre?

    Merci encore.
  • Pas grave ;) (si tu ne le fait plus  :-)) )

    Supprimer la ligne "HOME" et "CONTACT" (c'est écrit "Home" car entretemps OB à changé pour mettre en Français, mais j'ai fait un rapide tour et c'est pas pour le même thème que toi, donc attend que je comparre et je te dirait si tu peux utiliser chez toi ou sui tu dois ouvrir un nouveau sujet/topic/discussion pour cette question.

    Entre deux réponses, je suis toujours en train de rechercher pour cette disparition du cœur :(
  • Bon, pour le cœur je sais pas  :-/ (sauf que c'est pas dans la partie css, j'ai comparé tout ligne par ligne deux fois et ai même fait un copier/coller de ton css sur le mien et j'ai toujours ce cœur ... un vrais mystère !)

    Pour supprimer le Accueil et le Contact, tu peux ouvrir un nouveau topic ;)
    Idem pour les commentaires
    Idem pour l'espacement des modules
    (Heu, en trois topics différents hein ;)) )
  • Bonjour mon frère....  :))

    Le coeur est intégré à l'image qui sert de barre de séparation.

    en voici l'adresse: http://assets.over-blog-kiwi.com/themes/6/images/postbg.png
  • :D Salut Frangin

    oui, mais je vois pas dans le css ou son intégration à disparu vu que 


                .ads-728x90{
                    background: url(http://assets.over-blog-kiwi.com/themes/6/images/postbg.png) no-repeat center bottom;
                    margin: 0 auto 10px;
                    padding-bottom: 20px;
                    width: 728px;
                }
    est toujours présent dans son css :(

    Comme expliqué, si je copie/colle son CSS chez moi, j'ai bien l'image, donc c'est autre part que ça bloque sur son blog :(
  • M'enfin, ce dessin est hanté ...  ça à disparu aussi chez moi et si je remets le thème à zéro (d'origine donc) ça n'y est plus non plus image
  • Si je ne m'abuse, c'est a la ligne 905 du thème (Ads)

                /**********
                *** Ads ***
                **********/

                .ads-728x90{
                    background: url(http://assets.over-blog-kiwi.com/themes/6/images/postbg.png) no-repeat center bottom;
                    margin: 0 auto 10px;
                    padding-bottom: 20px;
                    width: 728px;
                }
  • C'est bien la ligne que j'ai donnée deux post plus haut ;)

    Mais là même avec un design d'origine je l'ai plus image