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

Bon, excusez-moi pour ce titre qui peut paraître un peu bébête. 

Le CSS, tout d'abord, c'est un language informatique comme bien d'autre. Lorsqu'on programme une page de blog, il y a deux languages qui interviennent principalement: l'HTML,qui structure la page web, et le CSS qui la "décore". Ce dernier est plus précis, facile, et moins dangereux pour la page (se tromper en html peut totalement bloquer un blog). Avec Eklablog, on a des outils au top donnés gratos au prix d'un peu de pub, et qui m'épatent à chaque fois.

Vous pouvez trouver le champ CSS dans "Apparence" > "Modifier le thème" > "Ajouter du CSS". A noter qu'avec ce CSS vous pouvez modifier l'aspect visuel entier du blog à condition de bien le maîtriser; autant dire que les autres outils d'Eklablog que l'on trouve dans "Modifier le thème" ne sont là que pour simplifier la personnalisation de la page et moins pointus que l'utilisation directe du CSS (vous n'y pourrez pas modifier la barre de menu en haut du blog, où arrondir les angles de votre contenu par exemple). Bref, le CSS est un must-have.

Le CSS a une structure super simple: on indique l'élément du blog à modifier (un sélecteur), qui sera l'en-tête #header.  On met ensuite entre accolades la propriété à modifier, par exemple la couleur de fond background-color suivie de deux points. Ensuite, on met la valeur que l'on veut appliquer à la propriété, ici la couleur blanche white. On termine par un point virgule et on ferme l'accolade. Et ça donne une première ligne de CSS. Voilà le résultat:

 #header{background-color: white;}

 Il va de soi qu'il faut certaines notions d'anglais pour ne pas être totalement perdu en CSS. En plus de la structure, il faut connaître le nom des sélecteurs, des propriétés et les valeurs que l'on peut leur appliquer. Mais ce sera pour une prochaine fois. Vous savez désormais ce qu'est que le CSS et comment il est structuré!

A suivre: les sélecteurs eklablog

Bienvenue sur mon blog, visiteur !

Ce blog est officiellement lancé en ce 17 octobre 2019! Bien que ceci ne soit pas mon premier passage sur la plateforme eklablog, j'ai décidé de tout recommencer à zéro.

Etant tout particulièrement intéressée par le design (j'aime faire de belles choses et prendre mon temps pour les réaliser), je dédie une rubrique de ce blog intitulée Blogs en Couleur - cliquez dessus pour y être redirigé - à la personnalisation de vos blogs. J'espère vous en apprendre plus sur la simplicité qu'est le codage en CSS (ne parlons pas de javascript car c'est un bordel sans nom) et faire de vos blogs de petites perles visuelles. Je vais m'arrêter là et vous laisser découvrir par vous même.

Du coup, parce que ce n'est pas l'objectif principal du blog, je cherchai quelques co-administrateurs pour animer leurs propres rubriques. J'aime la littérature et j'aime en parler avidement, que ce soit dans l'enrichissement culturel de vos petites têtes ou par pur plaisir de partager ma passion. Alors attendez-vous à retrouver des longues analyses ennuyantes de mes œuvres favorites (je plaisante).

La journaliste en herbe que je suis aime l'actualité et a la langue bien pendue. Dans ma tête sommeille un projet de rubrique invasive et chiante (telle que je les aime) qui se mêle de tout.

Alors si vous aimez la beauté de la vie, ce blog est né pour vous. Venez prêter main forte à son édification et glisser dans mes DM pour me rejoindre à l'administration de Carences d'Amour! Attention, maîtrise de la langue française et de l'art du bavardage exigée...

Bonne visite !

Madmazelle.