• Les sélecteurs eklablog

    A mon grand dam, lorsque j'ai débuté avec le CSS, il m'était impossible de trouver sur internet des sélecteurs bien précis (comme le champ "Message" dans "Contact"). J'ai donc décidé de répertorier au mieux les sélecteurs eklablog dans une liste non exhaustive que j'espère pouvoir compléter à vos demandes.

    A savoir:

    • On ajoute :hover après le sélecteur pour apporter une modification au survol de la souris (ex: #titre_header:hover)
    • On ajoute p après le sélecteur pour apporter une modification à son texte (cela correspond à ce qui se trouve entre les balises <p </p> en HTML, donc à la partie textuelle) (ex: #body p)
    • On ajoute a après le sélecteur pour apporter une modification au(x) lien(s) qu'il contient (ex: #menu1 a)
    • Pour apporter les mêmes modifications à plusieurs sélecteurs, ont peux les séparer par une virgule: #header, #footer{ background-color:blue;} L'en-tête et le pied de page deviendront alors tous les deux bleus.
    • On ajoute img après le sélecteur pour apporter une modification aux images qu'il contient.

    Sélecteurs de l'en-tête:

    • en-tête: #header
    • liens de l'en-tête: #header a
    • titre du blog: #titre_header
    • slogan du blog: #slogan_header

    Sélecteurs du pied de page:

    • pied de page: #footer
    • liens du pied de page: #footer a
    • lien blog: #titre_footer

    Sélecteurs menus:

    • boutons de modification des modules: .module_tools (cependant ce selecteur seul ne permettra pas de dépasser la mise en forme du bouton déjà imposée par eklablog, c'est pourquoi je vous conseille d'utiliser #background .ulmodule_menu .module_tools à la place)
    • menu normal gauche: #menu1
    • menu normal droite: #menu2 
    • menu de l'en-tête: #menu
    • module du menu normal: .module_menu
    • contenu du module normal: .module_menu_contenu
    • titre du module normal: .module_menu_titre
    • block du module normal: .ulmodule_menu>li
    • liens menu de l'en-tête: #menu a
    • menu déroulé de l'en-tête: #menu ul
    • lignes du menu déroulé de l'en-tête: #menu il
    • dernière ligne du menu déroulé de l'en-tête: #menu il:last-child
    • module derniers visiteurs: .module_menu_type_lastvisitors
    • avatars des derniers visiteurs: .module_menu_type_lastvisitors img
    • module recherche: .module_menu_type_search
    • module newsletter: .module_menu_type_newsletter
    • module calendrier: .module_menu_type_calendar
    • module shoutbox: .module_menu_type_shoutbox
    • module sondages: .module_menu_type_survey
    • module derniers articles: .module_menu_type_lastarticles
    • module statistiques: .module_menu_type_stats

    Sélecteurs barre d'outils eklablog:

    • barre d'outil: #menubar
    • section utilisateur: #menubar_section_account
    • logo utilisateur: #menubar_section_account img
    • section notifications: #menubar_notifications
    • section "Contenu": #menubar_section_content
    • section "Apparence": #menubar_section_appearance
    • section "Interactions": #menubar_section_appearance
    • section "Configuration": #menubar_section_manage
    • section "Aide": #menubar_section_help
    • menu déroulant: #menubar ul
    • lignes du menu déroulant: #menubar li
    • dernière ligne du menu déroulant: #menubar li:last-child
    • logo eklablog: #menubar_logo
    • flèche (faire disparaître la menubar): #menubar_hide
    • flèche (faire apparaître la menubar): #menubar_show
    • séparations de la menubar: #menubar_separation, #menubar_section, #menubar_button
    • section favoris: #menubar_favorites

    Sélecteurs de champs:

    • champs du blog: #sélecteur input[type="text"] (on remplace 'sélecteur' par le sélecteur de l'élément qu'on veut modifier, par exemple pour le contenu: #content input[type="text"])
    • champ de sélection: #sélecteur select  (ex: #background select)
    • champs de texte: #sélecteur textarea (ex: #formcontact textarea)
    • fenêtre d'édition du texte (rédaction d'un article/module simple/commentaire): .mce-tinymce 
    • case à cocher: #sélecteur input[type="checkbox"] (ex: #body input[type="checkbox"])

    Sélecteurs de commentaires:

    • commentaires: .comment_normal
    • commentaires administrateurs: .comment_admin 
    • avatar: .commentavatar img (et le block où il se trouve: .commentavatar) 
    • corps du commentaire: .commentbody
    • commentaire en réponse: .comment-reply 
    • block du commentaire en réponse: .block-reply
    • pseudo: .commentpseudo
    • date: .commentdate
    • numéro: .commentnumber
    • bouton voir les réponses: .show-replies
    • en-tête commentaire: .commentheader

    Sélecteurs divers:

    • bouton "Ajouter un module": body a.button_tools
    • icones: .icon
    • fond de la fenêtre: #body
    • fond de la page: #background
    • surlignage: ::selection
    • liens: a
    • texte: p
    • images: img

    Sélecteurs du contenu

    • contenu: .module_contenu, #content
    • titre du contenu: .module_titre
    • infos des articles: .article_info
    • liens info des articles: .article_info a 
    • contenu des articles: .article_text
    • images du corps de l'article: .article_text a
    • chapô "Lire la suite": .article_readmore
    • liens du bloc de contenu (flux RSS, accéder aux commentaires, flux RSS): .module_contenu_block>a
    • bouton accéder aux commentaires: .article_comments_link

    Sélecteurs de fenêtres:

    • bulle d'aide: #help_bubble
    • fenêtre: .window
    • titre fenêtre: .window_title
    • titre gauche fenêtre: .window_handle_left
    • titre droit fenêtre: .window_handle_right
    • bord gauche fenêtre: .window_content_wrapper1
    • bord droit fenêtre: .window_content_wrapper2
    • bas fenêtre: .window_bottom
    • bas gauche fenêtre: .window_bottom_wrapper1
    • bas droit fenêtre: .window_bottom_wrapper2

    Et voilà le travail! Il doit manquer quelques sélecteurs mais j'ai l'impression d'en avoir fait le plus gros et ainsi de vous éviter d'aller fouiller dans le code source de votre page. Pour les curieux, il existe un guide très pratique du CSS à cette adresse, puisque nous avons déjà passé les codes CSS propres à eklablog n'étant pas intégrées dans ce tutoriel: le reste de la programmation se révèle commun à (normalement) toutes les plateformes web et donc utilisable partout!

    A suivre: les couleurs et les images


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :