• Les sélecteurs Eklablog

    Eklablog nous permet une multitude de réglages pour le style du blog. La plupart d'entre eux est accessible via le menu (Apparence / Modifier le thème).
    Cependant, malgré toutes ces possibliltés, on souhaite quelquefois modifier certaines propriétés CSS qui ne sont pas accessibles par ce menu.

    Je vous propose dans cette page de répertorier les noms de balises ou le moyen d'accéder à ces éléments. Les codes CSS donnés en exemple ne sont qu'une infime partie des possibilités. Pour connaître la liste des propriétés possibles, rendez vous ici.

    Pour savoir comment mettre en place le code CSS, c'est par ici.

    Les sélecteurs EklablogModule Recherche Barre de menu supérieure     
    Les sélecteurs EklablogModule Calendrier      
    Les sélecteurs EklablogModule Newsletter      

     

    Les sélecteurs EklablogModule Recherche

    Type : class  Nom: module_menu_type_search

    Accès au fond du module

    Le code ci-dessous met le fond du module en bleu.

    .module_menu_type_search 
    {
    background-color:blue;
    }

    Accès au bouton de recherche

    Le code ci-dessous fixe les dimensions du bouton de recherche. (largeur à 100% du module et hauteur à 30pixels)

    .module_menu_type_search [type="submit"]  
    {
    width:100%;
    height:30px;
    }

    Accès à la zone de saisie

    Le code ci-dessous fixe la largeur de la zone de saisie à 100% de celle du module.

    .module_menu_type_search [name="q"]  
    {
    width:100%;
    }

     

    Les sélecteurs EklablogModule Calendrier

    Type : class  Nom: module_menu_type_calendar

    Accès au fond du module

    Exemple qui fixe la couleur du fond du module en bleu clair.

    .module_menu_type_calendar .module_menu_contenu 
    {
    background-color:lightblue;
    }

    Accès à la ligne du mois

    Exemple qui change les couleurs de la ligne du mois (Ecriture en blanc sur fond noir).

    .module_menu_type_calendar #menu_calendar_month 
    {
    background-color:black;
    color:white; 
    }

    Accès à la ligne des jours

    Met la ligne des jours sur fond rouge.

    .module_menu_type_calendar #menu_calendar th
    {
    background-color:red;
    }

    Accès au fond du calendrier

    Met le calendrier (son contenu) en jaune sur fond bleu.

    .module_menu_type_calendar tr
    {
    background-color:blue;
    color:yellow;
    }

     

    Les sélecteurs EklablogModule Newsletter

    Type : class  Nom: module_menu_type_newsletter

    Accès au fond du module

    Exemple qui met le fond du module en bleu clair.

    .module_menu_type_newsletter .module_menu_contenu 
    {
    background-color:lightblue;
    }

    Accès à la zone de saisie

    Fixe la largeur de la zone de saisie à 100% de celle du module.

    .module_menu_type_newsletter [name="subscribe"]  
    {
    width:100%;
    }

    Accès au bouton d'inscription

    Exemple qui change les dimensions du bouton: largeur 100% et hauteur 30 pixels.

    .module_menu_type_newsletter [type="submit"]  
    {
    width:100%;
    height:30px;
    }

    Barre de menu supérieure

    Type : id  Nom: menubar

    J'ai vu des posts sur le forum officiel Eklablog ou certains demandaient le moyen de cacher le logo Eklablog de la barre de menus. Ce moyen existe et est très simple à mettre en oeuvre. Cependant, je n'en parlerai pas car Eklablog nous offre une prestation unique à savoir nous permettre de réaliser nos blogs gratuitement et sans publicité. Et rien que pour celà, ce logo existe et doit rester.

    Accès à la barre

    L'exemple suivant met le texte de la barre en blanc, supprime l'image de fond et la remplace par une couleur bleu-gris.

    #menubar
    {
       color:white;
       background-image:none;
       background-color:#6b9ed1;
    }

    Accès aux lignes des menus déroulants

    Dans cet exemple, on agit sur 3 balises.

    • #menubar ul  correspond au fond du menu déroulé. Ici, je supprime l'image de fond pour la remplacer par une couleur
    • #menubar li correspond à chacune des lignes. Je les définit avec un texte blanc sur fond #6b9ed1, en supprimant l'image originale
    • #menubar li:hover comme ci-dessus mais je définis les couleurs lorsque la ligne est survolée par la souris
       

    #menubar ul
    {
       background-image:none;
       background-color:#6b9ed1;

    }
    #menubar li
    {
       color:white;
       background-image:none;
       background-color:#6b9ed1;
    }
    #menubar li:hover
    {
       color:white;
       background-color:slategrey;
    }

    Accès au panneau de notifications

    Le principe est le même que pour les lignes du menu déroulant. Seules les balises changent.

    #menubar_notifications
    {
       color:white;
       background-color:#6b9ed1;
    }
    #notifications_panel a
    {
       color:white;
        background-image:none;
       background-color:#6b9ed1;
    }
    #notifications_panel a:hover
    {
       color:white;
       background-color:slategrey;
    }

    Tooltip des membres Eklablog

    Pour changer l'apparence  la couleur des infos-bulles des profils de membre vous avez le sélecteur Help_bubble.

    #help_bubble
    {
    background-color:black;
    color:white;
    opacity:0.7;
    }

    Papasti