• Blogs en Couleur

  • Avant de commencer à vous présenter comment personnaliser les couleurs ou la texture d'un élément de blog, j'aimerai faire un petit point sur comment on utilise le CSS. Il est assez facile de l'apprendre en mettant main à la pâte et en louchant dans le code source de la page: à l'inverse de l'HTML, vous ne pouvez pas rendre votre page web hors service en l'utilisant. Cependant, dans la programmation des blogs, Eklablog a recours à de l'HTML dans lequel est imbriqué du CSS: il est possible de le modifier évidemment mais les modifications effectuées avec les autres outils Eklablog dans "Modifier l'apparence" prennent très souvent le dessus sur celles que vous faites dans votre code CSS. Pour éviter ce genre de problème, désactivez ce que vous pensez faire conflit contre votre code s'il ne fonctionne pas. Dans tous les cas, mes DMs sont ouverts pour n'importe quelle question.

    Maintenant que cela est mis au clair, nous pouvons commencer. Pour pouvoir colorer un élément de blog, vous devez tout d'abord vous munir du code de la couleur que vous voulez utiliser. Les plus basiques sont black, white, blue, red, green, purple... et ainsi de suite, rien de plus facile que les couleurs en anglais! Mais ils existent aussi sous forme de code couleur, comme toutes leurs nuances: un hashtag suivi de six chiffres qui représentent votre couleur. Ainsi, le blanc sera #ffffff quand le noir sera #000000. Vous trouverez ci-dessous un sélecteur de couleurs qui vous donnera la couleur de votre choix (Attention, il faut activer Flash Player).

    Le code HTML à coller dans votre code source si vous le désirez:


    <object data="http://ekladata.com/1ptoryDafHRtYDIDwhpBQ4ec-3E/tableau-de-color.swf" type="application/x-shockwave-flash" wmode="transparent" width="386" height="248">


     Désormais vous savez comment accéder à toutes les nuances possibles de couleur! Maintenant, apprenez à intégrer ces petites perles dans votre code CSS. Le fonctionnement se fait ainsi: sélecteur{propriété:couleur;} (ce modèle est expliqué dans l'article Le CSS, c'est Quoi?). Si vous avez lu mon article Les Sélecteurs Eklablog, vous savez aisément comment remplir la partie sélecteur, mais qu'est-ce donc que la propriété? Elle varie en fonction de ce que vous voulez modifier dans votre élément de blog.

    J'explicite: prenons par exemple l'en tête #header, si l'on veut modifier la couleur de fond de celui-ci, on utilisera la propriété background-color pour rendre le fond jaune: #header{background-color:yellow;}.

    Au contraire, si l'on veut modifier seulement la couleur du texte du header, on utilisera simplement la propriété color: #header{color:blue;}.

    Passons maintenant à l'insertion d'images. On peut, grâce à la propriété background-image, ajouter une image qui sera forcément placée par dessus la couche de fond colorée s'il y en a une. Il faut pour cela trouver l'URL de votre image en l'hébergeant sur le web: la technique la plus efficace qui a 99% de réussite (notez que les images très lourdes ne passent pas) est de cliquer sur "Contenu" > "Gérer les fichiers" et de cliquer sur "Uploader un fichier", terme fancy pour l'importer sur le réseau eklablog qui vous donnera une adresse que vous n'aurez plus qu'à copier.

    Mais où placer son URL? C'est simplissime: c'est exactement comme pour les codes couleurs, à un chouya près: au lieu de #m0ncU1 (???) ce sera url(VOTRE URL). Exemple:

    #header{background-image: url(VOTRE URL);}

    Il ne reste plus qu'à sauvegarder votre code CSS et le tour est joué!

    Je dépose ici les codes permettant de modifier l'attachement de l'image et compagnie:

    • La répétition de l'image: background-repeat:
      • repeat; (répétition)
      • no-repeat; (pas de répétition)
      • repeat-y; (répétition verticale)
      • repeat-x; (répétition horizontale)
    • L'attachement de l'image: background-attachment:
      • scroll; (normal)
      • fixed; (fixe)
    • position de l'image: background-position:
      • top right; (en haut à droite)
      • top left; (en haut à gauche)
      • top center; (en haut au milieu)
      • center right; (au milieu à droite)
      • center right; (au milieu à gauche)
      • center center; (au milieu)
      • bottom right; (en bas à droite)
      • bottom left; (en bas à gauche)
      • bottom center; (en bas au milieu)
      • Xpx Ypx; (à Xpx de la gauche et Ypx du haut)
      • X% Y%; (à Xcm de la gauche et Ycm du haut)
      • Xcm Ycm; (à Xcm de la gauche et Ycm du haut)

    Voici un exemple de tout ce que l'on a dit plus tôt:

    #header{

    background-color: blue;

    background-image: url(URL);

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: center left;}

    On peut aussi raccourcir le code grâce à la propriété background qui regroupe tout (on sépare chaque valeur par un espace):

    #header{background: blue url(URL) no-repeat fixed center left;}

    Vous savez maintenant tout sur comment insérer des couleurs et des images à l'aide du CSS. Si vous avez une question, quelle qu'elle soit, posez-là moi en commentaire; ce sera un plaisir d'aider.

    A venir: ombres et transparence


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


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


    votre commentaire


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