• Barre d'outil [EklaBlog]

    Ce tutoriel passe en revu les différents éléments de la barre d'outil EklaBlog (la petite barre blanche au dessus du blog). Comme le sujet un petit peu "touffu", des codes tout prêts sont disponible à la fin de l'article.

    Accéder aux codes

     

    Structure de la menubar

    Si vous avez déjà été fouiller dans le code source du blog, vous avez pu remarquer que la menubar est constituée de nombreux éléments distincts. Je vous propose donc de décortiquer tout ça pour commencer. (seuls la structure et les identifiants sont notés)

    <div id="menubarabsolute">
       <div id="menubar_show">
       </div>
       <div id="menubar">
          <table>
             <tr>
                <td id="menubar_hide">
                </td>
                <td id="menubar_logo">
                </td>
                <td class="menubar_section" id="menubar_section_account">
                </td>
                <td class="menubar_section" id="menubar_notifications">
                </td>
                <td class="menubar_separation">
                </td>
                <td class="menubar_section" id="menubar_section_content">
                </td>
                <td class="menubar_section" id="menubar_section_appearance">
                </td>
                <td class="menubar_section" id="menubar_section_interactions">
                </td>
                <td class="menubar_section" id="menubar_section_manage">
                </td>
                <td class="menubar_section" id="menubar_section_help">
                </td>
                <td id="menubar_favorites">
                </td>
             </tr>
          </table>
          <div id="menubar_info">
          </div>
       </div>
    </div>

    Si vous connaissez les balises HTML, vous remarquez que la menubar est en grande partie un tableau.

    Un tableau se trouve entre les balises <table>. On définit d'abbord la ligne avec <tr> puis les différentes cellules se trouvent entre les <td>
    En plus du tableau qui contient presque toutes les informations, nous avons une <div> avant, et une div après le tableau.

    La <div> #menubarabsolute contient toute cette structure. Mais elle est masquée par #menubar, c'est pourquoi je vous conseil de travailler en priorité sur ce sélecteur si vous voulez changer le fond ou la couleur de texte par exemple.

    #menubar{background: red;}

    En ce qui concerne le tableau, chaque ligne appartient à un élément spécifique. Les ID me semblent assez explicites, mais je vais quand même revenir dessus :

    #menubar_hide
    -> Il s'agit de la petite flèche à droite de la menubar qui permet de la masquer (d'où le "hide" voulant dire "caché")

    #menubar_logo
    -> La zone contenant le logo d'EklaBlog. Je vous rappelle que même s'il est très facile de le supprimer ou le modifier, ce serait totalement irrespectueux vis à vis de la plateforme

    #menubar_section_account
    -> La zone contenant votre pseudo et votre avatar réduit

    #menubar_notifications
    -> Cellule contenant l'icône et le nombre de notification

    #menubar_section_content
    -> Contenu

    #menubar_section_appearance
    -> Apparence

    #menubar_section_interactions
    -> Interactions

    #menubar_section_manage
    -> Configuration

    #menubar_section_help
    -> Aide

    #menubar_favorites
    -> Bouton favoris (invisible pour le fondateur du blog)

    La classe menubar_section.menubar_section sert à définir l'apparence des sections (les petites barres blanches verticales). Cependant, toutes les images de sections ne se trouvent pas dans cette classe (notamment pour les favoris, je reviendrais dessus plus loin)

    Pour la dernière <div> #menubar_info, il s'agit de la partie utilisée par le staff d'EklaBlog pour noter de cours message à l'intention des utilisateurs

    Les flèches "hide" et "show"

    Vous avez certainement remarqué que j'ai oublié ne parler de l'ID #menubar_show. Il s'agit en fait de la flèche permettant de rendre la menubar visible après avoir été masquée. Nous allons donc voir un peu plus en détail comment fonctionne cette flèche

    <div id="menubar_show" style="display: none;" onclick="MenuBar.show();">
    </div>
    <div id="menubar" style="display: block">
    <table>
       <tr>
          <td id="menubar_hide" onclick="MenuBar.hide();">
          </td>

    Je ne suis pas sûre que l'explication technique vous intéresse, je dirais donc simplement que hide() et show() sont deux fonctions qui sont appelées au clique pour afficher ou masquer la menubar (et accessoirement, afficher #menubar_show lorsque la menubar est invisible).

    #menubar_show et #menubar_hide sont donc deux éléments totalement différents ;)

    Pour changer l'image de la flèche (parce que je suppose que c'est ce qu'il vous intéresse), vous pouvez créer des nouvelles images en adaptant la taille de la div et de la cellule. Si vous n'avez pas envie de calculer de nouvelles mesures, vous pouvez faire une unique image sur le même modèle que les flèches de base :

    /!\ Les dimensions doivent être identiques. Copiez / collez cette image dans votre logiciel de graphisme pour ne pas vous tromper

    Les deux flèches de gauche sont les flèches pour masquer la menubar. Celle du bas est l'image affiché lorsque vous cliquez
    A droite, ce sont les flèches pour remettre la menubar

    Je le répète, il s'agit de deux éléments différents donc vous devez noter les deux sélecteurs dans votre CSS

    #menubar_hide,
    #menubar_show { background-image: url("IMAGE");
    }

    Remplacez image par l'url de votre image.

    Si avez fait deux images différentes il faut les renseigner séparément : 

    #menubar_hide { background-image: url("IMAGE1");
          width: Xpx;
    }
    #menubar_show { background-image: url("IMAGE2");
         width: Xpx;
    }

    Pour ceux qui ne suivent pas, IMAGE1 sera l'image affichée pour masquer la manubar et IMAGE2 l'image pour la remettre.
    Si votre image ne fait pas 17px de large, vous devez également préciser sa largeur (remplacez le X)

    Les sections et les onglets

    Attaquons la "grosse" partie.

    Les sections sont les éléments de la menubar que l'on peut survoler pour afficher un petit menu, que je vais appeler "onglet". Les notifications et les favoris seront vu un peu plus loin.

    Contenu, Apparence, Interactions, Configuration et Aide ont exactement la même structure, je vais donc commencer par ceux là en prenant #menubar_section_content comme exemple. La section du profil est un tout petit peu différente.

    <td class="menubar_section" id="menubar_section_content">
          <div>
          <img src="/images/menubar/icon_content.png" alt="" class="icon" /> Contenu </div>
          <ul>
                <li onclick="Module.edit('mod', 'article', 'new');">Nouvel article</li>
                <li onclick="Module.create('mod', 'articles');">Nouvelle rubrique</li>
                <li onclick="Module.create('mod', 'html');">Nouvelle page</li>
                <li onclick="Module.edit('mod', 'survey', 'new');">Nouveau sondage</li>
                <li onclick="Module.create('mod', 'newsletter');">Nouvelle newsletter</li>
                <li onclick="Module.create('mod', 'flickr');">Nouvelle galerie Flickr</li>
                <li onclick="Module.create('mod', 'guestbook');">Nouveau livre d'or</li>
                <li onclick="Module.create('mod', 'forum');">Nouveau forum</li>
                <li onclick="Windows.load('mod', 'manage');">Gérer les rubriques</li>
                <li onclick="Windows.load('blog', 'files');">Gérer les fichiers</li>
          </ul>
    </td> 

    Je vous rappelle que .menubar_section est la classe affichant les barre de séparation. Si vous voulez les supprimer il vous suffit d'indiquer qu'il y a pas d'arrière plan :

    .menubar_section { background: none; }

    #menubar_section_content est le sélecteur de cette section. Si vous travaillez sur une autre section, il suffit de remplacer "content" par le nom de la section en question. Tous les sélecteurs sont notés dans la première partie de l'article.

    Si vous voulez modifier toutes les sections d'un coup, il faut le noter de cette façon :

    #menubar_section_content,
    #menubar_section_appearance,
    #menubar_section_interactions,
    #menubar_section_manage,
    #menubar_section_help,
    #menubar_section_account { propriété : valeur; }

    Pour ceux qui s'apprête à copier coller le code tel quel, "propriété : valeur;" est à remplacer par les propriétés de votre choix.

    Passons maintenant à la petite différence de #menubar_section_account

    <td class="menubar_section" id="menubar_section_account">
           <a href="http://www.eklablog.com/profile/nagalia">
                    <img src="http://ekladata.com/iwK1Zo1ze8aMq9k1mAi0f42xeCM@19x19.gif" alt="" class="icon" />
                    Nagalia
            </a>

            <ul>
                  <li onclick="Windows.load('membres', 'myprofile');">Mon profil</li>
                  <li onclick="Windows.load('membres', 'profile');">Informations personnelles</li>
                  <li onclick="Windows.load('membres', 'following');">Abonnements</li>
                  <li onclick="Windows.load('membres', 'msg');">Messages</li>
                  <li onclick="Windows.load('membres', 'notifications');">Notifications</li>
                  <li onclick="Windows.load('membres', 'revenues');">Revenus</li>
                  <li onclick="document.location='http://www.eklablog.com/?createblog';">Créer un blog</li>
                  <li onclick="logout();">Déconnexion</li>
            </ul>
    </td>

    Vous pouvez voir que l'avatar et le pseudo sont dans un lien qui redirige à la page de l'utilisateur. Par conséquent, si vous voulez appliquer des effets de texte sur vos section (changer la couleur par exemple) vous devez également indiquer a dans le sélecteur. Un exemple sera peut être plus parlant :

    #menubar { color : red; }

    Ce code modifiera la couleur de texte de toutes les sections sauf de #menubar_section_account
    Pour résoudre ce problème, vous devriez écrire ceci :

    #menubar,
    #menubar a { color: red; }

    Maintenant que vous êtes au point avec les sections, voyons les onglets

    Vous avez sûrement remarqué qu'il s'agit d'une liste. Donc pour y accéder en CSS, nous allons utiliser la classe .menubar_section en précisant que nous nous intéressons aux listes contenues dans cette classe :

    .menubar_section li { propriété : valeur; }

    Il faudra également utiliser le pseudo-class :last-child (traduisez littéralement par "dernier enfant") pour travailler sur la dernière ligne de l'onglet, par exemple si vous voulez ajouter un arrondis :

    .menubar_section li:last-child { propriété: valeur; }

    Si vous voulez changer les images, vous pouvez les faire sur ce modèle, ce qui vous évitera d'avoir à changer la taille des onglets :

     

    La zone bleue correspond à la partie visible au survol. 

    Si vous voulez mettre uniquement des couleurs, n'oubliez pas de supprimer l'image de base

    .menubar_section li { background-image: none;
          background-color: COULEUR;}
    .menubar_section li:last-child { background-image: none;
          background-color: COULEUR;} 
    Les notifications

    Si vous regardez dans le code source, vous verrez que le code des notification est ridiculement court comparé au reste des onglets :

    <td class="menubar_section" id="menubar_notifications" onclick="MenuBar.toggleNotificationsPanel();" title="Notifications">
       <div>
             <img src="/images/menubar/icon_notifications.png" alt="" class="icon" />
             <span id="nb_new_notifs"></span>
       </div>
       <ul id="notifications_panel"></ul>
    </td>

    Le contenu des notifications sera chargé dynamiquement lorsque vous cliquerez sur l'icône.

    #nb_new_notif est le nombre de nouvelle notification. Quand la balise <span> est vide, c'est simplement qu'il n'y a pas de nouvelle notification ;)
    #notification_panel est l'onglet qui affiche les notification. Lorsque le contenu est chargé, il s'agit d'une liste qui contient plusieurs éléments :

    <ul id="notifications_panel">
          <li>
                <a href="#">
                     <span class="notif_msg">...</span>
                     <span class="notif_date">...</span>
                </a>
          </li>
          <li>...</li>
    </ul>

    Les classes .notif_msg et .notif_date permettent respectivement de modifier l'affichage du texte de la première ligne et de la deuxième ligne du bloc de notification

    Voici l'image de base des notification. 
    Les parties blanches correspondent au mode d'affichage normal, la dernière étant la dernière ligne de l'onglet "Afficher toutes les notification"
    La partie bleue claire indique les nouvelles notifications
    Enfin, en bleu foncé, c'est l'état survolé

    Pour mettre de la couleur ou une autre image, vous devez utiliser les sélecteurs suivants :

    Notifications normales :

    #notifications_panel li { propriété : valeur; }

    Notifications survolées :

    #notifications_panel li:hover { propriété : valeur; }

    Nouvelles notifications :

    #notifications_panel .new_notification {propriété : valeur; }

    Bien sûr, comme pour les onglets vu précédemment, vous pouvez utiliser :last-child pour modifier la dernière ligne.

    Favoris

    Je passe rapidement sur ce module, car il n'y a pas grand chose à dire, excepté qu'il n'est pas du tout fait comme les autres, donc les images à enlever ou modifier ne se trouvent pas aux même endroits...

    La séparation se trouve en background de #menubar_favorites. Pour l'enlever :

    #menubar_favorites{background-image: none}

    En supprimant le fond bleu du survol, on supprime également l'icône du coeur. Il faut la replacer comme ceci :

    #menubar_favorites_btn,
    #menubar_nofavorites_btn:hover {
          background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%; 
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn {
          background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%;
    }

    Le code précédant permet également de changer cette icône. Remplacez les url en bleue par vos images. La première correspond au coeur rouge et la deuxième au coeur gris.

    Module de connexion

    On a trop souvent tendance à l'oublier mais il fait bien partie de la menubar ;)

    <td id="menubar_signin">
     <form action="?" method="post">
     <p>
     Connexion :
     <input type="text" name="pseudo" id="menubar_signin_username" />
     <input type="password" name="passe" id="menubar_signin_password" />
     <input name="connexion"/>
     <input name="remember"/>
     <input type="submit" id="menubar_signin_submit" class="button_win" />
     </p>
     </form>
    </td>

    La barre de séparation se trouve en arrière plan de #menubar_signin

    #menubar_signin { background: none; }

    Vous pouvez également modifier les éléments du formulaire (champs de texte et bouton)

    Pour finir, les deux boutons qui apparaissent à côté du module de connexion appartiennent à la même classe .menubar_button. Vous n'avez donc qu'à spécifier background : none; pour enlever la séparation

    .menubar_button { background: none;}
    Des codes pratiques

    Comme la menubar est assez longue et fastidieuse à modifier, je vous propose quelques codes tout près pour vous éviter de taper des lignes répétitives de code :

    Supprimer toutes les barres de séparation 

    .menubar_button
    .menubar_section:hover,
    .menubar_section,
    .menubar_separation,
    .menubar_button,
    #menubar_logo,
    #menubar_favorites { background: none;}

    Supprimer tout les fonds bleus au survol

    #menubar_section_content,
    #menubar_section_appearance,
    #menubar_section_interactions,
    #menubar_section_manage,
    #menubar_section_account,
    #menubar_section_help,
    #menubar_notifications,
    #menubar_signin { background: none;
    }
    #menubar_favorites_btn,
    #menubar_nofavorites_btn:hover {
          background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn {
          background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%;
    }

    Menubar visible au survol avec transition (il faut remonter la page pour éviter les 20px de vide entre le contenu du blog et le haut de la fenêtre)

    #body {top: 0px;
       border-top: none;
    }
    #menubar { opacity: 0;
       transition: 800ms;
       -webkit-transition: 800ms;
       -moz-transition: 800ms;
       -o-transition: 800ms;
    }
    #menubar:hover{ opacity: 1; }

    Exemple d'un onglet de notification gris et rouge

    #notifications_panel{ background-color: silver;
       border-radius: 0 0 20px 20px;
    }
    #notifications_panel li { background: none;}
    #notifications_panel li:hover {background: rgba(255,255,255,0.5);
    }
    #notifications_panel li:last-child:hover{  border-radius: 0 0 20px 20px;
       background: rgba(255,255,255,0.5);
    }
    #notifications_panel .new_notification {background : red; }

    Exemple d'onglets gris

    .menubar_section ul { background-color: silver;
       border-radius: 0 0 20px 20px;
    }
    .menubar_section li { background-image:none;}
    .menubar_section li:hover { background: rgba(255,255,255,0.5); }
    .menubar_section li:last-child {background-image:none;}
    .menubar_section li:last-child:hover {border-radius: 0 0 20px 20px; }


  • Commentaires

    1
    Samedi 31 Mai 2014 à 09:55

    Merci ! Je cherchais justement les codes css pour la barre d'outil et comme par hasard tu fais un tuto à ce moment ;)

    2
    Samedi 31 Mai 2014 à 09:55

    J'ai trouvé :

     td#menubar_logo {display: none;}
     div#menubar_info {display: none;}
     td.menubar_button {display: none;}
     td#menubar_signin {display: none;}
     div#menubar {position: absolute; background:#046380;}
     td#menubar_hide {display: none;}
     td.menubar_section {color: black;}
     td.menubar_separation {display: none;}

    3
    Samedi 31 Mai 2014 à 15:29

    C'est la réécriture d'un vieil article qui date de 2011 XD

    #menubar_logo et td#menubar_logo sélectionnent le même élément, donc tu n'es pas obligé de rajouter td ou div ;)

    4
    Samedi 31 Mai 2014 à 16:13

    C'est vrai que dans l'ancien article j'avais pas compris grand chose ^^ Je peux améliorer a nouveau ma menubar :3 Merci beaucoup !

    5
    Samedi 31 Mai 2014 à 17:48

    Je l'ai trouvé sur un site ;)

    6
    Samedi 31 Mai 2014 à 17:53

    Ici ?
    => http://clubpenguincodefr.blogspot.fr/2014_03_01_archive.html

    C'est une façon de faire, mais je trouve ça un peu radical de tout mettre en display:none XD

    7
    Samedi 31 Mai 2014 à 21:14

    J'ai pas tout lu, la flemme pour le moment, mais l'article à l'air utile ^^

    Je me demandais quand même si on pouvais faire de cette barre horizontale une barre verticale, de faire une sorte de.. Menu déroulant pas le coté. J'ai peur d'essayer des trucs compliqués et de m'y perdre >.<

    8
    Dimanche 1er Juin 2014 à 00:42

    Comme ça tu veux dire ?

    Je vais faire un autre tuto pour personnaliser un peu plus la menubar (comme sur ce blog ou Monde Imaginaire). Je ne voulais pas tout mettre dans cet article, ça aurait vraiment été trop XD

    9
    Dimanche 1er Juin 2014 à 09:51

     

    Oui Nagalia c'est sur ClubPinguin mais c'était un hasard XD pense pas que j'vais d'ssus... :D

    10
    Dimanche 1er Juin 2014 à 16:59

    Ouai un truc du genre ! Qui suivrait sur le coté (à gauche ou droite) ^^

    11
    Mardi 3 Juin 2014 à 15:04

    Merci beaucoup pour ce partage

    12
    Dimanche 8 Juin 2014 à 15:20

    Bonjour, peut-t-on changer l'icone des notifications ? é_ê

    13
    Dimanche 8 Juin 2014 à 17:04

    Merci Aladin tu m'as bien aidé il ne me reste plus qu'une barre blanche

    Vous ètes très fort(e)s tout(e)s

     

    14
    Jeudi 12 Juin 2014 à 22:11

    j'adore

    15
    Samedi 28 Juin 2014 à 22:07

    Merci beaucoup pour tous ces codes ! >w<

    16
    Mercredi 2 Juillet 2014 à 19:28

    J'arrive pas à déplacer le coeur pour les favoris >.<

    #menubar_favorites_btn,
    #menubar_nofavorites_btn:hover {
          background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
                 top: 60px;
                 left: 28%;
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn {
          background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%;
                 top: 60px;
                 left: 28%;
    }
    #menubar_favorites{top: 60px;
                 left: 28%;
    }

    17
    Vendredi 11 Juillet 2014 à 17:07

    Merci Nagalia tout ce que tu fais m'est très utile mais comme je suis pas très intelligente j'ai du mal à comprendre XD et je voulais savoir... Est-ce qu'on peut changer juste un seul onglet? Comme l'onglet déconnexion par exemple? ^o^ Merci d'avance :3

    18
    Jeudi 9 Octobre 2014 à 21:55

    Bonsoir;
    J'avais besoin d'aide pour pouvoir retirer le "Créer mon blog" qui est dans le menu barre quand on n'a pas de compte et que nous sommes sur le blog.
    Malgré les superbes tutos que vous fournissez je ne trouve pas comment faire. cry Si quelqu'un peut me donner un morceau de code Css pour le retirer ce serait très gentil.
    Merci beaucoup bonne soirée. biggrin

    19
    Vendredi 17 Octobre 2014 à 19:04

    Je trouve que c'est sympa les codes déjà prêt pour les GROS< nul comme moi :D

    Tu devrais en mettre +

    20
    Mercredi 22 Octobre 2014 à 12:09

    Merci beaucoup pour tout ces codes !

    21
    Dimanche 14 Décembre 2014 à 17:00

    J'vais paraître une noob mais (j'en suis une !! >.<) pour changer la menubar on dois le faire où avec tous ses codes ? x)

    22
    Dimanche 14 Décembre 2014 à 17:02

    J'me permet de répondre, me tapez pas é_è

    Pour la modifier, tu dois mettre tes codes dans la partie CSS.

    23
    Dimanche 14 Décembre 2014 à 18:16

    C'est tout ? ._.'

    24
    Dimanche 14 Décembre 2014 à 18:56

    Après quand il y a marqué "IMAGE" Tu mets le lien de l'image que tu veux.

    Quand il y a "Xpx" Tu remplaces le X par la valeur que tu souhaites (en chiffre)

    Et quand il y a "COULEUR" tu mets le code couleurs que tu veux. o/

    25
    Mardi 13 Janvier 2015 à 20:16

    Merci ! Je cherchais un nouveau code pour enlever toutes les barres de séparation car l'ancien ne me les avait pas toutes enlevées.

    26
    Jeudi 15 Janvier 2015 à 15:01

    bonjour,

    Déja tu a fais un super boulot et son site est super génial !

     

    j'avais une question.

    Je voudrais modifier la barre ekablog

    je voudrais garder le nom ekablog, le connexion et enlever "créez mon compte/blog" et qunad on serait connecter mettre un bouton déconnexion,mettre le bouton de recherche et mettre 2 lien vers un de mes articles serait tu comment je pourrais faire ?

     

    et a toute hasard, tu ne code pas toit même les blogs?

     

    merci de ta réponse. (surtout que je t'en demande beaucoup^^)

    Très cordialement, sirius BLACK

    27
    Samedi 21 Février 2015 à 16:10

    Bonjour, merci beaucoup Nagalia de nous dire cela. Mais soit j'ai mal compris (je suis dure à comprendre) soit j'ai raison, je n'ai pas trouvé comment faire comme toi pour mettre ce que je souhaite dans la menubar, du genre comme toi tu as mis "Graphisme" "Codage" etc... Ou alors ceux-sont des menus de l'en-tête header fixe ?  Bref, je suis embrouillée !

    Ce que je veux savoir d'autres est très simple: Comment faire pour que la menubar ne soit pas fixe ? Il me semble qu'il n'y a pas de code dessus sur ton article, enfin, je crois...

    Merci si tu me donnes une réponse ! ;)

    28
    Samedi 18 Avril 2015 à 16:07

    Merci pour les codes. ^^

    29
    Mercredi 29 Avril 2015 à 16:23

    Salut, déjà super tuto mais j'aimerais savoir si on pouvais aussi changer la police de la barre d'outil? Et si oui comment stp?

    30
    Dimanche 3 Mai 2015 à 17:37

    Je n'ai pas trouvé mais je ne suis pas un génie, je voudrais juste mettre ma barre EKLA en majuscules car j'ai un grand écran et en minuscules elle est un peu short je trouve.

    Si quelqu'un sait le code CSS que je dois rajouter... Merci d'avance.

    31
    Dimanche 3 Mai 2015 à 18:04

    J'ai finalement trouver comment faire mais merci d'avoir répondu et si tu veut le CSS le voici: 

    .menubar_button
    .menubar_section:hover,
    .menubar_section,
    .menubar_separation,
    .menubar_button,
    #menubar_logo,
    #menubar_favorites {font-family: NOM DE LA POLICE; }

    32
    Dimanche 3 Mai 2015 à 18:07

    Merci beaucoup RileyGraph

    33
    Dimanche 3 Mai 2015 à 18:07

    De rien ^^

    34
    Dimanche 7 Juin 2015 à 18:58

    Hey! Merci pour tous ces supers codes. J'ai une question : tu parles de "remonter a page pour éviter les 20px" lorsqu'on rend la barre transparente. Comment on fait, déjà ? 

    35
    Dimanche 7 Juin 2015 à 19:29

    Elle va mettre un peu de temps avant de répondre, je crois ;) C'est ce code là :

    #body {top: 0px;
       border-top: none;
    }

    36
    Dimanche 7 Juin 2015 à 21:10

    Merci! Le blog n'est plus actif?

    37
    Jeudi 20 Août 2015 à 23:40

    Merci pour cette profusion de codes... *s'en va personnaliser sa barre*

    38
    Mercredi 18 Novembre 2015 à 19:23

    Merci beaucoup pour tout les codes. c:

    39
    Mardi 26 Avril 2016 à 19:12

    Merci pour l'explication des codes :3

    40
    Vendredi 13 Octobre 2017 à 16:50

    Petite question, j'ai bien rajouté à mon code: 

    #body {top: 0px; border-top: none; }

    afin de remonter la page pour éviter les 20 px de la barre transparente mais ça n'a rien donné. 

      • Vendredi 13 Octobre 2017 à 19:49

        Essaie avec des valeurs négatives

        #body {top: -20px; border-top: none; }

    41
    Vendredi 13 Octobre 2017 à 19:53

    Super ça marche, merci! ^^

    42
    Mercredi 6 Mars 2019 à 18:09

    Bonjour . Super . boulot et super conseils . Comment peut ont modifier la largeur du menubar ?  j'avais ce code mais je l'ai perdu , merci de votre réponse . 

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :