Tuto Overblog ajouter et modifier : bannière, fond, titre, liens menu haut. Code HTML CSS thème "Elegant"

Si vous n'avez pas de blog et que vous ne connaissez pas le langage HTML, désolée vous serez un peu perdus.

Cet article est destiné à ceux qui ont un blog Overblog Kiwi et ont des notions en HTML.

Il est aussi pour moi qui oublie où j'ai modifié le code, vu qu'il y a des milliers de lignes.

Voici un exemple pour ajouter des liens dans le menu haut du thème "Elegant"

Tuto :

Ajouter et modifier : liens menu haut, bannière, fond, titre

en modifiant le code HTML du thème "Elegant"

Dans le menu haut de l"administration faire dérouler le menu de l'onglet :

Gérer > Thème > Editer

Modifier le code HTML dans le CSS  :

pour la trouver dans le code, cliquer sur CTRL+F et rechercher ce qu'on veut modifier.

Les lignes de code à modifier sont en gras.

A chaque modification, j'ajoute ma signature, pour retrouver mes modifications :

/**** @fashionmaman ***/

Liens dans le menu haut (vers la ligne 1802, rechercher "<!-- menu -->")

Ajouter une ligne de code avec le nom et l'adresse du lien, je l'ai mis juste après les catégories.

<!-- menu -->

<!-- Tags -->

<li>
<a href="#">{{ Lang.Get('Tags') }}</a>
<ul>
{% list Blog.PostsTags(10) %}
<li {% if isTag and Tag.Title == PostsTag.Title %} class="active" {% endif %}>
<a href="{{ PostsTag.Url }}">{{ PostsTag.Title }}</a>
</li>
{% endlist %}
</ul>
</li>
{% endif %}

<!-- lien -->
<li><a href="adresse du lien">{{ Lang.Get('Nom du lien') }}</a></li>

Exemple : liens vers ma catégorie MODE :

<!-- lien mode -->
<li><a href="http://fashion.maman.over-blog.com/tag/mode%20%26%20beaute%20maman/">{{ Lang.Get('Mode') }}</a></li>

Fond (vers ligne 214):

  body {
                font-size:13px;
                font-family:Tahoma,Georgia,"Times New Roman",Times,serif;
                color:#333;
                background:#eee url(http://assets.over-blog.com/t/elegant_press/images/bg.png) repeat;
                padding:0;
            }

Titre Fashion maman à Lille (vers ligne 312, rechercher /**** blog title ***/) :    

.blog-title {

                font-family: "Cagliostro", cursive;
                color: #E2007A;
                font-size: 35px;
            .blog-title a,
            .blog-title a:visited {
                color: #E2007A;
            }

Sous-titre (vers ligne 326):
            .header .description {
                font-family: "Cagliostro", sans-serif;
                                 
                font-size: 20px;
                letter-spacing: 0px;
                max-width: 960px;
                text-align: center;
            }

Bannière (vers ligne 306) :
            .header {
                padding: 20px 0 30px;
                 background: url(http://img.over-blog-kiwi.com/0/93/68/14/20141215/ob_c96f12_blog-fashion-maman-lille-banniere.png) ;
            }

Impression d'écran du blog avec modification du code, la bannière et les liens apparaissent dans le menu haut

Impression d'écran du blog sans modification du code

Comments

[Sandrine]

Bonjour, ayant un ancien thème, je souhaiterais passer sur le thème élégant press mais en lisant vos explications, j'ai cherché et impossible de trouver l'onglet Gérer > Thème > Editer. Auriez-vous une autre solution? Merci

[Fashion maman]

Je crains qu'Overblog n'ai changé l'interface depuis. Un moment je bloqu'ais et en changeant de navigateur, j'ai réussi (Firefox ou Explorer)

[M]

merci!!!

[Magali]

Bonjour, merci pour cet article simple et clair, grâce à vous j'ai pu modifier mon blog. Merci beaucoup!

[Fashion maman Lille]

mais de rien, contente d'avoir pu vous aider

[F.L.C]

bonjour merci pour vos connaissances, j'avais mis sous l'image avant les articles un espaces pour y mettre des infos de dernière minute...Malheureusement a la dernière mise a jour d'over blog, hier, tous mes ajouts ont disparus !, auriez vous sous la main, ces code a ajouter,pour espace d' accueil
bonne journéee

[Le blog d'la petite Eva]

C'est super intéressant, mais assez compliqué pour moi

[Fashion maman Lille]

oui c'est vrai qu'il faut connaitre un peu le code, avec l'habitude cela vient.

[Digital média réunion]

bonjour et bel article! Si vous consultez encore vos commentaires je voudrais savoir quelles lignes de code utiliser pour avoir un différent header par section de mon menu (pour vous, cela correspond à avoir un header différent pour toute les pages qui sont classées par rubrique: mode, déco, cuisine ect). J’espère que vous m'avez compris! Merci à vous^^

[simo]

merci pour les informations
bravo

[Fashion maman Lille]

de rien vous me direz si cela fonctionne.
De mon côté je cherche à mettre le menu droite dès la page d'accueil, je n'ai pas trouvé mais pas beaucoup cherché et ne suis pas spécialiste en code, j'ai tout appris seule.

[Coccinelle]

Bonjour, je viens de tenter de changer la couleur du titre, comme la votre et ... RS, ça fonctionne dans l'aperçu mais quand j'enregistre, plus rien ...
AU SECOURS !!

[Blog fashion maman Lille]

Je sais que j'avais galéré car il y a 2 endroits où changer la couleur du titre. Il faut aussi enregistrer 2 fois.

[Nico]

Super, merci bien pour ces astuces qui m'ont été très utiles ! Par contre, j'ai une question : comment faire pour que le tag que tu as mis dans le menu horizontal du haut, n'apparaisse pas aussi dans la section catégorie qui se déroule ? Merci d'avance :)

[Blog fashion maman Lille]

bonjour,
les tags que j'ai mis en haut sont des liens donc ils ne sont pas dans le menu déroulant sauf s'ils y sont déjà. C'est vrai que ça m'embête de ne pas savoir comment choisir les catégories qui apparaissent dans mon menu déroulant. J'aimerais savoir faire un menu déroulant personnalisé mais je ne sais pas, enfin je n'ai pas cherché. J'aimerais également mettre le menu droite dès la page d'accueil.

[Evelyne, Tout Simplement]

Joli blog, bien sympa ! Je passe par l'intermédiaire de "blogueurs Overblog" sur FB.. Faut que je vois si ta manip est valable ausse sur d'autres thèmes OB..
Merci ! Je repasserai te voir !

[Blog fashion maman Lille]

bonjour

je pense que c'est aussi valable, sans doute pas à la même ligne, c'est pour ça qu'il faut rechercher menu dans le code, tu me diras si ça fonctionne.
Je cherche aussi à ajouter le menu à droite dès la page d'accueil sur ce thème.

[Georges]

Mille Mercis, j'ai longtemps cherché comment faire et vous m'avez grandement aidé !!! Merci, Merci,Merci ;-)

[Blog fashion maman Lille]

De rien j'aime partager mes astuces car ce n'est pas toujours évident.
Et c'est aussi un moyen de m'en souvenir quand je veux le refaire.
Savez vous comment ajouter un menu à droite sur la page d'accueil comme dans les articles?