Fashion maman

Fashion maman

blog Mode Déco Cuisine Jumeaux Famille nombreuse belge à Lille après Lyon Nantes...


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

Publié par Blog fashion maman Lille sur 12 Janvier 2015, 10:22am

Catégories : #Divers

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 avec modification du code, la bannière et les liens apparaissent dans le menu haut

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

Impression d'écran du blog sans modification du code

Commenter cet article

Magali 13/03/2017 14:28

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

Fashion maman Lille 14/03/2017 11:39

mais de rien, contente d'avoir pu vous aider

F.L.C 16/10/2016 12:02

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 02/05/2016 11:09

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

Fashion maman Lille 04/05/2016 10:31

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

Digital média réunion 27/04/2016 23:34

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 06/11/2015 20:23

merci pour les informations
bravo

Fashion maman Lille 07/11/2015 08:49

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 27/02/2015 09:33

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 07/03/2015 19:14

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 24/02/2015 13:10

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 24/02/2015 16:12

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 06/01/2015 14:49

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 07/01/2015 13:39

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 06/01/2015 14:41

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

Blog fashion maman Lille 07/01/2015 13:41

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?

Nous sommes sociaux !

Articles récents