• Astuces Ekla

     
  • Formulaire de réponse aux commentaires

    Code pour afficher le formulaire des commentaires de cette façon

    #ulmodules form {
        display: flex;
        flex-wrap: wrap;
        font-size: 0px;   
       color: transparent;
        width: 500px; /*largeur du formulaire*/
        margin: 0 auto;
    }

    #ulmodules form input,
    #ulmodules form select,
    #ulmodules form textarea{
        color: black; /*couleur du texte dans les champs*/
        font-size: medium;
        border: 1px solid #737c4255; /*bordure des champs*/
        padding: 5px 10px;
        border-radius: 5px; /*bords arrondis*/
    }

    #ulmodules form input {
        flex : 1;
        margin: 10px;
    }
    #ulmodules form select,
    #ulmodules form textarea{
        width: 100% !important;
        display: block;
        margin: 10px;
    }

    .mce-tinymce{width: 100% !important}

    #ulmodules form label{
        width: calc(100% - 40px);
        margin-top: 6px; /*aligner le text avec la checkbox*/
        color: black;  /*couleur du "me prévenir par mail"*/
        font-size: medium;
        font-size: 12px
    }

    #ulmodules form input[type=submit]{
        width: 100%;
        display: block;
        background: #bdd06e; /*couleur du bouton envoyer*/
        color: black; /*couleur du texte du bouton*/
        transition: 300ms
    }

    #ulmodules form input[type=submit]:hover{
        background: #737c42; /*couleur du bouton au survol*/
    }


    4 commentaires
  • Tout est dans le titre. On peut ajouter le nom de l'auteur d'un article, mais pas son image dans le module des derniers articles... On va résoudre ça !

    /!\ Le javascript doit être activé

    En prérequis, il faut afficher le module des derniers articles (avec les options que vous voulez), ainsi qu'un module simple dans lequel on mettre notre javascript

     

    La grande question à se poser pour commencer, c'est comment récupérer l'image d'un article ? Comme on n'a pas accès à la base de donnée, la seule solution est d'aller la chercher directement sur la page de l'article. En javascript, on va donc utiliser les liens des derniers articles pour fouiller sur leur page respective, récupérer la première image, et l'ajouter dans le module.

     

    Commençons par créer la fonction qui va gérer tout ça (pour rappel, le script doit être placé entre des balises <script></script>)

    async function ajoutImageDerniersArticles() {
       console.log('ajouter une image aux derniers articles');
    }

    ajoutImageDerniersArticles()

    Ouvrez la console du navigateur pour vérifier que la fonction est bien appelée (clique droit sur votre page -> inspecter -> onglet "console"). Le message 'ajouter une image aux derniers articles' doit s'afficher lorsque vous enregistrer le module simple

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            var link = tabDerniersArticlesLi[i].firstChild.href;
            console.log('ajouter une image pour article', link);
        }
    }

    ajoutImageDerniersArticles()

    Si vous regardez comment est structuré le module des derniers articles, on remarque que chaque lien est dans une liste. Ici, on récupère tous les éléments <li> de la liste dans un tableau. On va donc parcourir tous les éléments de ce tableau pour ajouter une image sur l'article correspondant. Dans la console, vous devriez maintenant avoir autant de messages 'ajouter une image pour l'article http.....' que vous avez définis de dernier articles, avec le lien de l'article correspondant.

    async function getImage(lien) {
        var response = await fetch(lien);
        var htmlString = await response.text();
        var doc = new DOMParser().parseFromString(htmlString, "text/html");

       return doc.querySelector('#ulmodules .article_text img');
    }

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            var lien = tabDerniersArticlesLi[i].firstChild.href;
            var image = await getImage(lien);
            console.log('image à ajouter', image);
        }
    }

    ajoutImageDerniersArticles()

    La fonction "getImage" va utiliser le lien de l'article pour récupérer tout le html de la page, qu'on va stocker dans la variable "doc". A partir de là, on peut y chercher ce qu'on veut. Ce qui nous intéresse ici, c'est la première image d'un article. On retourne ce résultat pour qu'il soit stocké dans la variable "image" de la fonction "ajoutImageDerniersArticles".

    Vous avez noté les async / await ? C'est ce qui permet d'exécuter du code asynchrone en JS. Lorsque l'on fait une requête, le résultat peut mettre du temps à arriver, et on ne sait pas combien de temps. On doit dire au code d'"attendre" (await) certaines informations. Et pour que cela fonctionne, les fonction qui attendent des informations doivent être indiquées comme asynchrones (async).

    async function getImage(lien) {
        var response = await fetch(lien);
        var htmlString = await response.text();
        var doc = new DOMParser().parseFromString(htmlString, "text/html");

       return doc.querySelector('#ulmodules .article_text img');
    }

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            var lien = tabDerniersArticlesLi[i].firstChild.href;
            var image = await getImage(lien);
            tabDerniersArticlesLi[i].querySelector('a').prepend(image);
        }
    }

    ajoutImageDerniersArticles()

    Je peux enfin ajouter l'image dans mon lien de dernier article ! Vous pouvez vérifier que tout fonctionne bien et... vous allez probablement remarquer un problème.

    L'image s'ajoute bien si elle existe. Il est même possible qu'elle s'ajoute plusieurs fois, ou que vous ayez une erreur si l'article ne comporte aucune image. On va donc ajouter deux sécurité pour finir ce code.

    async function getImage(lien) {
        var response = await fetch(lien);
        var htmlString = await response.text();
        var doc = new DOMParser().parseFromString(htmlString, "text/html");

       return doc.querySelector('#ulmodules .article_text img');
    }

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            if(!tabDerniersArticlesLi[i].querySelector('img')){
                var lien = tabDerniersArticlesLi[i].firstChild.href;
                var image = await getImage(lien);
                if(image){
                    tabDerniersArticlesLi[i].querySelector('a').prepend(image);
                }
            }       
       }
    }

    ajoutImageDerniersArticles()

    Le premier if permet de vérifié qu'il n'y ai PAS déjà une image dans le lien du dernier article. S'il n'y a pas d'image, on exécute le reste du code, sinon on s'arrête là.

    Le deuxième if vérifie si la requête à bien permis de récupérer une image associé à cet article. Si c'est bien le cas, on ajoute cette image dans le lien, sinon on s'arrête.

    tabDerniersArticlesLi[i].querySelector('a').prepend(image) place l'image avant le titre de l'article. Vous pouvez remplacer "prepend" par "append" pour la placer après

     

    Et c'est tout pour la partie JS. Vous pouvez ensuite customiser tout ça comme vous le souhaitez en CSS.

    Petit exemple à modifier :

    .module_menu_type_lastarticles a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .module_menu_type_lastarticles a img{
        height: 30px;
        margin: 0 10px;
        border-radius: 50%;
    }

    votre commentaire
  • 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; }


    43 commentaires

  • Voici le sélecteur à utiliser pour modifier le fond, le type de police ou autre

    #menubar {propriété: valeur;}


    Pour enlever les traits de séparation et les fonds bleu au survol:

    #menubar_section_content,
    #menubar_section_appearance,
    #menubar_section_interactions,
    #menubar_section_manage,
    #menubar_section_account,
    #menubar_section_help,

    #menubar_notifications,
    #menubar_signin,
    .menubar_button
    .menubar_section:hover,
    .menubar_section,
    #menubar_favorites,
    .menubar_separation,
    #menubar_logobackgroundnone;}
    #menubar_favorites_btn
    #menubar_nofavorites_btn:hover backgroundurl("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn backgroundurl("/images/menubar/icon_favorite.png")no-repeat 50% 50%
    } 



    Pour la petite flèche permettant d'afficher ou de masquer la menubar, voici l'image de base : 

    La flèche en haut a droite, c'est celle qui permet de refermer la barre d'outil. Celle du bas, c'est son aparence au clique. Les fleches de gauches, c'est lorsque la barre est fermée.
    Et mettez ce code dans votre css

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

    Pour la flèche qui remet la barre, c'est ça (même image que ci-dessus)

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

     

    Menubar, les onglets

    Voici le code

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


    Si vous voulez mettre des images et que vous ne voulez pas modifier les tailles, faites le sur ce model là:



     


    Pour ceux qui veulent mettre des couleurs

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

    La ligne en rouge est ce qui sera affiché au survol

    Changer le fond de "contenu", "apparence"... 

     .menubar_section:hover div{
                       background: valeur;}

    Mettez "background: none" pour qu'il n'y ai ni image ni couleur.

    Menubar : Notifications

    #menubar_notifications:hover
    #menubar_notifications_btn{
                       background: valeur;}

    Menu déroulant des notification:

    #notifications_panel a,
    #notifications_panel div{ background: valeur}

    Pour ceux qui veulent mettre une image, suivez ce model

    Menu Notifications

    Explications :

    Le premier machin blanc signifie les notifications auquel vous voyez habituellement. Le machin bleu clair signifie le moment où on a une nouvelle notifications. Le premier machin bleu foncé signifie n'importe qu'elle survol. Le deuxième machin blanc signifie le 'afficher les notifications' en mode normal et le deuxième machin bleu foncé signifie 'afficher les notifications" au survol. ^^

    Couleur ou image différente:

    #notifications_panel a,
    #notifications_panel div {background: valeur}
    #notifications_panel a:hover, 
    #notifications_panel div:hover {background: valeur}
    #notifications_panel
    .new_notification {background: valeur} 

    En noir, c'est l'apparence normal
    En rouge, c'est au survol
    En bleu, c'est pour les nouvelles notification

    Blog Favori

    Pour supprimer la barre de séparation:

    #menubar_favorites{background-image: none}

    Pour enlever le fond bleu:

    #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%; } }

    Pour modifier l'image du coeur gris:

    #menubar_favorites_btn,
    #menubar_nofavorites_btn:hover { background: url("IMAGE") no-repeat 50% 50%;}

    Pour modifier l'image du coeur rouge:

    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn  {background: url("IMAGE") no-repeat 50% 50%;}

    Un immense merci à EtoileSosso et Jak-Ich_an pour avoir aider à trouver tout ça

    162 commentaires
  • Les déplacer

    Pour des raisons purement esthétiques, ce serai bien de pouvoir placer les module ou on veut. Par exemple dans le header ;) Déjà, il faut que les module existent sur votre blog.
    Pour l'exemple, j'ai pris le module des derniers visiteurs.

    Regardez dans le code source de votre page: 
        •"clique droit => Code source de la page"
        •Faites Ctrl+F pour chercher votre module



    •Surligné en orange, c'est le titre du module, qui doit être le résultat de votre recherche.
    •Encadré en bleu, vous remarquez l'id
    •Et enfin, ce qui est surligné en jaune, c'est ce que nous allons mettre dans le css pour pouvoir le déplacer.

    Voici maintenant ce que vous allez mettre dans votre css:
    #module_menuXXXXXX {position: absolute;
              top: Xpx;
              left: Xpx;
    }
    Remplacez XXXXXX par le nombre souligné en rouge dans le code source.

         •"position: absolute" permet de placer le module dans le coin en haut à gauche par défaut.
         •"top: Xpx" Remplacez X par un nombre de px. Cela indique à combien de px du haut de la page vous placez le module
         •"left: Xpx" Remplacez X par un nombre de px. Cela indique à combien de px de la gauche de la page vous placez le module

    Personnaliser

    Une fois que vous connaissez les id de vos modules, vous pouvez les modifier indépendamment en css. Par exemple, si je veux que mon module visiteur est un fond bleu, et que le module recherche n'en ai pas:
    #module_menu2827671 {position: absolute;
              top: Xpx;
              left: Xpx;
              background: rgba(90, 188, 189, 0.2);
              border-radius: 15px;
              box-shadow: 0 0 10px #7afeff ;}

    #module_menu2821246 {position: absolute;
              top: 188px;
              margin-left: 500px;
              background: none;}
    Vous pouvez ainsi modifier tous vos modules séparément. N'oubliez pas de changer mes valeurs (en rouge) par les votre, sinon ça ne risque pas de fonctionner ;)
    Note de Papasti:
    A noter que pour les modules prédéfinis, on peu y accéder sans connaitre l'id du module, comme ceci:
    .module_menu_type_lastvisitors{
              position: absolute;
              top: Xpx;
              left: Xpx;
              background: rgba(90, 188, 189, 0.2);
              border-radius: 15px;
              box-shadow: 0 0 10px #7afeff ;}

    Titre des modules personnalisés

    Vous voulez pouvoir personnaliser les titres de vos modules, en mettant une image par exemple? L'article est ICI

    317 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique