• Bonjour,

    Un petit article pour la mise en forme des images des galeries d'images.

    Pour information, les galeries d'images dans Eklablog sont gérées par cerabox.

    Sur clic sur une image de la galerie, l'image s'affiche dans un élément div d'identifiant « cerabox ».

    [CSS] Modifier le rendu de la galerie
    Affichage des images d'une galerie

    Non visible sur ce schéma : un élement « div » de classe « cerabox-content-protection » qui recouvre l'image.

    Pour modifier le rendu, le code CSS  est à écrire dans « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Ajouter « !important » à chaque attribut pour forcer sa priorité.

    Par exemple :

    Pour afficher la légende sous l'image et non pas dessus :
    .cerabox-title { position:relative !important;}

    Le fond du blog est opaque à 50%, il est possible d'augmenter l'opacité (0.9 dans l'exemple, doit être compris entre 0 et 1) :
    #cerabox-background {opacity:0.9 !important;}

    On peut également ajouter des bordures :
    .cerabox-content { border:4px solid black !important; }
    .cerabox-title { border:2px solid black !important; }

    Pour « protéger » les images (la protection est sommaire et empêche juste le click droit => enregistrer sous) :
    .cerabox-content-protection { display:block !important;}
     

     


    votre commentaire
  • En voyant la liste de mes derniers articles (le module "Derniers articles"), je me suis dit qu'avec des longs titres ça devenait une grosse bouillie illisible.

    L'idée est d'avoir une ligne sur deux avec une couleur différente, comme vous pouvez le voir sur ce blog à droite.

    Il est possible de faire cela avec du code CSS, pour peu que le visiteur ait un navigateur assez récent (au moins IE9 par exemple) ; si ce n'est pas le cas ce n'est pas grave l'affichage restera comme d'habitude.

    Note : le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Voir cet article pour une première découverte du CSS : Mon premier code CSS - images au coins arrondis avec ombrage

    Pour connaître les noms/classes des éléments du blog : Structure d'un blog Eklablog (en-tête, contenu, menus...)

    Le sélecteur CSS qui permet de réaliser cela est nth-child.

    Pour ce blog j'utilise ce code CSS :

    /* Derniers articles */
    .
    module_menu_type_lastarticles li:nth-child(odd) a {color:#505050}
    .module_menu_type_lastarticles li:nth-child(even) a {color:#808090}
     

    • "module_menu_type_lastarticles" est la classe du module des derniers articles.
    • "li" est le type des éléments contenant chaque titre d'article.
    • "nth-child" permet de rechercher un sous-élément particulier : odd pour les éléments impairs, even pour les éléments pairs.
    • "a" est le type des éléments liens hypertextes dont on veut changer la couleur.

     

    De la même manière, on peut modifier par exemple la couleur du titre d'un article sur deux, dans le contenu du blog cette fois-ci :

    /* Titres des articles */
    #content .ulmodules li:nth-child(odd) .module_titre_contenu a {color:darkred}
    #content .ulmodules li:nth-child(even) .module_titre_contenu a {color:darkblue}

     

    Le premier article affiché aura son titre en bleu foncé (darkblue), le second en rouge foncé (darkred), puis ça continue en alternance.

     Et voilà c'est assez facile en fait ! wink2


    votre commentaire
  • Vous avez peut-être souhaité réduire la taille des images de la liste des derniers visiteurs.

    Pour ce blog j'utilise ce code CSS qui réduit la taille et ajoute un arrondi et une ombre.

    /* Derniers visiteurs */
    .module_menu_type_lastvisitors img {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        box-shadow:0px 0px 12px #777;
        -moz-box-shadow0px 0px 12px #777;
        -webkit-box-shadow0px 0px 12px #777;
        margin:4px;
        max-width:60px;max-height:60px;
    }

    Note : le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Du coup j'affiche trois images par lignes.
    Si je définis l'affichage de dix visiteurs je suis bien embêté : j'ai un orphelin sur la dernière ligne (et ce n'est pas très joli...)

    Dix visiteurs dont un orphelin...
    Dix visiteurs dont un orphelin...

    Pour masquer le dixième visiteur on va utiliser ce code CSS :

    /* Retire le dixième visiteur */
    .module_menu_type_lastvisitors .module_menu_contenu_block a:nth-last-child(1{display:none}

    Ce code masque le 10éme visiteur (1er en partant de la fin).
    Vous pouvez modifier le nombre 1 pour masquer un autre visiteur, et copier cette ligne pour en masquer plusieurs en fonction du nombre de visiteurs affichés et du nombre de visiteurs souhaités.

    Voyez le résultat à droite dans mon module « Derniers visiteurs », l'orphelin a disparu.
    On voit un visiteur de moins mais ça fait gagner de l'espace et c'est mieux visuellement à mon goût.

    Remarque : ce code ne fonctionne pas pour Internet Explorer 8 et inférieur (mais ce n'est pas très grâve...)


    13 commentaires
  • Lorsqu'on souhaite déplacer un élément à un endroit précis de la page, on utilise du code CSS pour passer l'élément en position absolue :

    Par exemple pour déplacer le module de menu Newsletter  :

    .module_menu_type_newsletter {
        position:absolute;left:800px;top:10px;
    }

    On ajuste les propriétés left et top pour déplacer le menu.
    On peut également utiliser width et height pour la largeur et la hauteur.

    Pour retirer le titre de ce module on ajoutera :

    .module_menu_type_newsletter .module_menu_titre {
        display:none;
    }

    Mais on se rend alors compte que le module ne conserve pas sa place.
    Il est positionné différemment en fonction de l'écran du PC, du zoom de la page...
    En fait il est fixe par rapport à la page, mais le contenu du blog n'a pas la même place sur la page (il est centrée et donc pas à la même place en fonction de la taille de l'écran).

    Pour éviter cela ajoutez le code CSS suivant :

    #background {position:relative;}

    Il faut ensuite repositionner correctement en modifiant les valeurs left et top car les valeurs sont maintenant relatives au fond du blog.

    En effet le positionnement absolu se fait par rapport au premier parent qui n'est pas positionné de manière static (c'est le positionnement par défaut) ; c'est à dire le corps de la page dans le cas d'un blog car aucun élément structurant n'a de positionnement particulier.

    En forçant le positionnement relatif pour le fond (#background), on positionne alors les éléments par rapport à ce fond au lieu de positionner par rapport à la page.
    Ainsi, les éléments repositionnés en absolute « suivent » le contenu du blog.


    2 commentaires
  • Voici à gauche un module Newsletter standard, et à doite le module amélioré (celui de ce blog) :

      

    On a :

    • ajouté du texte en rouge et en italique
    • élargi la zone de texte de saisie
    • élargi le bouton

    Ces modifications sont faites uniquement avec du code CSS.
    Inutile donc d'avoir le Javascript activé pour les mettre en place.

    Le code CSS doit être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

     

    Copiez-collez le code affiché ci-dessous dans la fenêtre d'édition CSS (à l'emplacement du cadre jaune montré ci-dessus), puis cliquez sur le bouton « Appliquer et Sauvegarder ».

    Code CSS pour la NewletterTout sélectionner

    /* Newsletter */
    .module_menu_type_newsletter input[name=subscribe] {width:80%;}
    .module_menu_type_newsletter input[type=submit] {width:80%;}
    .module_menu_type_newsletter form:before{
    content:"Inscrivez votre adresse pour suivre ce blog.";
    font-style:italic;
    font-size:10px;
    color:darkred;
    }

    Le module d'inscription à la Newletter à une classe de nom .module_menu_type_newletter.
    On y trouve un formulaire (form) contenant des éléments (input).

    L'élément de nom subscribe est la zone de texte de saisie.
    L'élément de type submit est le bouton.

    Notez l'utilisation de :before qui permet d'ajout un élément avant l'élément ciblé par le sélecteur CSS (donc ici avant le formulaire).

    content définit le contenu de ce nouvel élément.
    Ensuite on ajoute les styles de cet élément (ici en italique, de taille 10px et de couleur rouge sombre).

    Il n'est pas possible avec cette technique d'appliquer un format différent aux mots de l'élément ajouté : tout le contenu est du même format.

    Vous pouvez ajouter une image à l'aide du style background.


    7 commentaires
  • Une info-bulle est un texte qui s'affiche généralement lorsqu'on survole un élément de la page.
    Cela permet d'ajouter des petits textes d'aide ou d'information.

    On les utilise par exemple sur les liens : pour voir une info-bulle, survolez ce texte.

    L'info-bulle ci-dessus est écrite dans l'attribut title du lien.
    Il n'est pas spécifié dans la norme que cet attribut doit être affiché sous forme d'info-bulle mais c'est généralement le cas dans la plupart des navigateurs.
    Cependant c'est très limité, on ne peut pas faire grand chose de plus que d'afficher un texte non formaté, et il faut passer en éditeur de code source pour ajouter l'attribut.

    Vous avez peut-être déjà lu la possibilité d'ajouter des info-bulles plus évoluées en utilisant Help.bubble (par exemple ici) mais cela nécessite l'activation de Javascript pour votre compte.

    Nous allons dans cet article mettre en place des info-bulles uniquement avec du code CSS, donc utilisables sur tous les blogs.

    Encore plus intéressant, il sera possible d'ajouter des info-bulles sans même aller dans le code source HTML !

     Un petit exemple :

    Voici une première info-bulleCeci est une info-bulle
    sur deux lignes
     suivie d'une deuxième info-bulleEt voici une autre information avec du gras !.
    Survolez les textes ci-dessus en bleu sur fond jaune pour voir apparaître des informations.

    Ces info-bulles ont quelques limitations et inconvénients :

    • la détection d'un texte avec info-bulle se fait sur l'adresse cible (Url) du lien.
      Il n'est donc pas possible de mettre une info-bulle sur un lien pour lequel on souhaite une navigation vers une autre page. Le clic sur un lien info-bulle n'aura aucun effet.
    • Si on clique sur le lien, la page avec l'ancre #mabulle est ajoutée à l'historique de navigation.
    • l'info-bulle peut déborder en dehors de l'écran si le texte est trop à droite ou en bas.
      Mais ce n'est pas très gênant, habituellement on survole des éléments qui ne sont pas en bordure d'écran.
    • on ne peut pas mettre du texte en indice dans l'info-bulle (en petit en bas).
      Cela non plus ne devrait pas être un gros soucis.

     En contrepartie, il est possible de les mettre en place même si vous n'avez pas activé le Javascript pour votre profil.

     Commencez par ajouter à votre blog le code CSS nécessaire.

    On verra plus bas comment ce code fonctionne et comment le personnaliser.

    Le code CSS doit être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

     

    Copiez-collez le code affiché ci-dessous dans la fenêtre d'édition CSS (à l'emplacement du cadre jaune montré ci-dessus), puis cliquez sur le bouton « Appliquer et Sauvegarder ».

    Code CSS pour les info-bullesTout sélectionner

    /* Début CSS info-bulles */
    a[href="#mabulle"] /* texte du lien */
    {
    text-decoration:none; /* pas de soulignement */
    background-color:#FFFFAA; /* couleur surlignée */
    color:darkblue; /* couleur du texte */
    }
    a[href="#mabulle"]:hover /* texte du lien survolé */
    {
    cursor:help; /* curseur souris */
    }
    a[href="#mabulle"] + sub /* texte d'info en indice après le lien */
    {
    bottom:auto; /* Corrige le positionnement du sub */
    line-height:inherit; /* Corrige la taille de ligne du sub */
    display:none; /* pas d'affichage avant le survol */
    position:absolute; /* position absolue pour que la bulle soit positionnée hors du texte */
    font-size:inherit; /* hérite de la taille du texte du lien */
    color:darkblue; /* couleur du texte d'info */
    text-align:justify; /* alignement du texte justifié */
    -moz-border-radius:10px; /* bordure arrondie 10px de rayon */
    -webkit-border-radius:10px;
    border-radius:10px;
    margin:10px 10px; /* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */
    padding:10px; /* marge intérieure de 10px */
    padding-left:50px; /* marge intérieure gauche de 50px pour laisser de la place à l'image */
    border:1px solid #0000AA; /* taille, style et couleur de la bordure */
    /* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */
    background:#ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center;
    }
    a[href="#mabulle"]:hover + sub /* texte en indice sur survol du lien */
    {
    display: inline; /* affichage de la bulle */
    }
    /* Fin CSS info-bulles */

    Cette opération n'est à faire qu'une seule fois pour tout le blog.

     Vous voilà prêt à ajouter une info-bulle !

    Passez en premier lieu en édition sur un article.

    Notez que l'info-bulle ne fonctionne que sur un lien hypertexte.

    Ajoutez donc un lien en cliquant sur le bouton « Insérer/éditer un lien ».

    - Dans « Url », inscrivez #mabulle.

    Il est important de mettre exactement cette Url, car celle-ci à deux rôles :

    1. Elle permet de détecter les liens qui doivent être traités comme des info-bulles (on retrouve cette Url dans le CSS).
    2. Elle évite de naviguer dans la page lorsqu'on clique sur le lien (pour peu que vous n'ayez pas d'ancre nommée ainsi sur la page).

    - Dans « Texte à afficher », écrivez le texte qui sera affiché sur l'article (celui qui sera survolé).

    Ajoutez ensuite du texte juste après le lien :

    Sélectionnez ce texte qui doit être placé dans l'info-bulle et mettez le en indice :

    La mise en indice se fait en passant d'abord l'éditeur en mode « Expert ».

    La mise en indice du texte permet de le détecter avec le CSS, c'est le rôle du sélecteur sub.

    Il est alors possible d'écrire la suite du texte, en cliquant si besoin à nouveau sur le bouton « Indice » pour revenir en texte normal.

    Dans l'éditeur, on ne voit pas les info-bulles. On voit le texte d'information en indice, ce qui nous permet de le modifier.

     Dans votre article en ligne, vous devriez obtenir ceci : Survolez pour infoCeci est un texte d'information et voici la suite du texte.

     Notez que pour l'exemple, si vous survolez le lien ci-dessus, j'ai ajouté du texte rouge en gras. Il est en effet possible de mettre du formatage dans le contenu.
    Par contre on ne peut pas mettre du texte en indice car tout le contenu y est déjà...


     A partir d'ici nous allons un peu étudier le code pour pouvoir l'adapter :

    • modifier les couleurs ;
    • aligner le texte ;
    • changer ou retirer l'image...

    Le code CSS se divise en quatre parties :

    1. Le style du lien (pour modifier le style par défaut des liens).
    2. Le style du lien survolé.
    3. Le style de l'info-bulle (texte, fond, bordure...)
    4. Le style de l'info-bulle lorsque le lien est survolé (en fait juste une demande d'affichage).

    Dans le code vous trouvez :

    • en bleu : des sélecteurs qui pécisent quels éléments sont ciblés ;
    • en noir : des noms de paramètres de style ;
    • en rouge : les valeurs de ces paramètres ;
    • en vert : des commentaires.

    Première partie : le style du lien.

    Code CSS pour les info-bulles : première partieTout sélectionner

    a[href="#mabulle"]  		/* texte du lien */
    {
    text-decoration:none; /* pas de soulignement */
    background-color:#FFFFAA; /* couleur surlignée */
    color:darkblue; /* couleur du texte */
    }

    On détecte les liens « info-bulle » avec l'Url #mabulle.
    Cette Url se retrouve dans le code HTML en attribut href du lien.
    Le lien est un élément nommé a, l'attribut href est défini entre crochets.

    Le style entre accolades s'appliquera donc au texte des liens dont l'Url est #mabulle.

    • text-decoration avec la valeur none permet de ne pas avoir le caractère de soulignement du lien ;
    • background-color définit la couleur de fond du texte : #FFAAAA est une couleur jaune ;
    • color définit la couleur du texte : darkblue est un code couleur pour du bleu foncé.

    Recherchez sur internet « code couleurs HTML » par exemple, vous trouverez de nombreuses informations sur la codification des couleurs.

    Deuxième partie : le style du lien survolé.

    Code CSS pour les info-bulles : deuxième partieTout sélectionner

    a[href="#mabulle"]:hover	/* texte du lien survolé */
    {
    cursor:help; /* curseur souris */
    }

    On ajoute le selecteur :hover qui signifie « survolé ».

    Le style entre accolades s'appliquera donc au texte des liens survolés dont l'Url est #mabulle.

    • cursor avec la valeur help permet de modifier le curseur de la souris en un curseur d'aide (flèche + point d'interrogation) ;
      Par défaut le curseur est une main. Si vous souhaitez ne pas modifier ce curseur, retirez le code.

    Vous trouverez tous les curseurs disponibles sur ce lien : CSS cursor property.

    Troisième partie : le style de l'info-bulle.

    Code CSS pour les info-bulles : troisième partieTout sélectionner

    a[href="#mabulle"] + sub 	/* texte d'info en indice après le lien */
    {
    bottom:auto; /* Corrige le positionnement du sub */
    line-height:inherit; /* Corrige la taille de ligne du sub */
    display:none; /* pas d'affichage avant le survol */
    position:absolute; /* position absolue pour que la bulle soit positionnée hors du texte */
    font-size:inherit; /* hérite de la taille du texte du lien */
    color:darkblue; /* couleur du texte d'info */
    text-align:justify; /* alignement du texte justifié */
    -moz-border-radius:10px; /* bordure arrondie 10px de rayon */
    -webkit-border-radius:10px;
    border-radius:10px;
    margin:10px 10px; /* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */
    padding:10px; /* marge intérieure de 10px */
    padding-left:50px; /* marge intérieure gauche de 50px pour laisser de la place à l'image */
    border:1px solid #0000AA; /* taille, style et couleur de la bordure */
    /* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */
    background:#ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center;
    }

    On ajoute le selecteur + sub qui signifie « le texte en indice qui suit le lien ».

    Le style entre accolades s'appliquera donc au texte en indice qui suit les liens dont l'Url est #mabulle.

    • bottom et line-height corrige le positionnement du texte initialement prévu pour être en en indice ;
    • display avec la valeur none permet de masquer totalement le texte en indice ; on l'affichera ensuite au survol du lien dans la quatrième partie ;
    • position avec la valeur absolute définit que ce texte sera affiché, non pas dans le flux de texte classique, mais « par dessus » le reste ;

    Ces deux premiers paramètres de style ne doivent pas être modifiés pour le bon fonctionnement de l'info-bulle.
    Les paramètres suivants peuvent être changés.

    • font-size avec la valeur inherit précise que la taille du texte de la bulle doit être la même que celle du texte du lien  ;
      Il est possible de préciser une taille en pixels (10 px) ou en unités em (1.5em);
      L'unité em est la taille par défaut d'un caractère ; 1.5em signifie donc « une fois-et-demi la taille par défaut ».
    • color avec la valeur darkblue définit une couleur de texte bleu foncé ;
    • text-align avec la valeur 10px définit un alignement justifé ;
      Vous pouvez modifier la valeur pour left (gauche), right (droite) ou center (centré).
    • border-radius avec la valeur justify définit une bordure arrondie ;
      Vous pouvez modifier la valeur pour ajuster le rayon de l'arrondi.
      Notez que ce paramètre est répété 3 fois avec différents préfixes pour assurer une compatibilité avec la plupart des navigateurs (mais sur certains navigateurs anciens cela ne fonctionne pas).
    • margin avec la valeur 10px 10px définit la marge extérieure de la bulle (10px à en haut et 10px à droite) ;
      Vous pouvez modifier les valeurs pour positionner l'info-bulle par rapport au texte survolé ;
    • padding avec la valeur 10px définit la marge intérieure de la bulle (10px à en haut, à droite, en bas et à gauche) ;
      Vous pouvez modifier la valeur pour laisser plus d'espace autour du texte ;
    • padding-left avec la valeur 50px définit la marge intérieure gauche de la bulle (annule et remplace la marge gauche définie juste avant), pour laisser de la place à l'image définie ensuite ;
      Si vous ne placez pas d'image de fond, vous pouvez retirer cette ligne. ;
    • border avec la valeur 1px solid #0000AA définit une bordure de taille 1px, de type continu (solid) et de couleur #0000AA (couleur bleue) ;
      Si vous ne souhaitez pas de bordure, vous pouvez retirer cette ligne. ;
    • background avec la valeur #ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center définit un fond de couleur #ddd (gris), avec une image dont l'adresse est la valeur dans url(). L'image ne se répète pas (no-repeat), est positionnée à 5px horizontalement et centrée verticalement (center)  ;
      Modifiez l'url pour mettre celle votre image, que vous aurez ajoutée dans « Contenu » => « Gérer les fichiers ».
      Ouvrez l'image après l'avoir ajoutée pour voir son adresse.
      Si vous ne souhaitez pas d'image de fond, vous pouvez retirer cette ligne, ainsi que la marge intérieure gauche (padding-left). ;

    Quatrième partie : le style de l'info-bulle lorsque le lien est survolé.

    Code CSS pour les info-bulles : quatrième partieTout sélectionner

    a[href="#mabulle"]:hover + sub  	/* texte en indice sur survol du lien */
    {
    display: inline; /* affichage de la bulle */
    }
    /* Fin CSS info-bulles */

    On ajoute le selecteur :hover qui signifie « survolé ».

    Lorsque le texte est survolé, on définit la propriété display à inline,ce qui a pour effet d'afficher la bulle.

    Si la souris quitte le texte, la bulle est masquée (le style de la bulle sans survol est réappliqué).


     Et si on souhaite avoir plusieurs styles d'info-bulles ?

    Il suffit de définir plusieurs Url, par exemple #mabulleinfo et #mabullewarning.

    On place d'abord les styles communs à toutes les info-bulles dans des code CSS dont le sélecteur sera par exemple : a[href="#mabulleinfo"], a[href="#mabullewarning"]

    Ensuite on place le code spécifique à chaque info-bulle avec un sélecteur qui cible l'Url de chaque info-bulle.

    Ce qui nous donne :

    Code CSS pour plusieurs styles d'info-bullesTout sélectionner

    /* Début CSS info-bulles multiples */ 
    /* Styles commun à toutees les info-bulles */
    a[href="#mabulleinfo"], a[href="#mabullewarning"] /* texte du lien */
    {
    text-decoration:none; /* pas de soulignement */
    color:darkblue; /* couleur du texte */
    }
    a[href="#mabulleinfo"]:hover, a[href="#mabullewarning"]:hover /* texte du lien survolé */
    {
    cursor:help; /* curseur souris */
    }
    a[href="#mabulleinfo"] + sub, a[href="#mabullewarning"] + sub /* texte d'info en indice après le lien */
    {
    bottom:auto; /* Corrige le positionnement du sub */
    line-height:inherit; /* Corrige la taille de ligne du sub */
    display:none; /* pas d'affichage avant le survol */
    position:absolute; /* position absolue pour que la bulle soit positionnée hors du texte */
    font-size:inherit; /* hérite de la taille du texte du lien */
    color:darkblue; /* couleur du texte d'info */
    text-align:justify; /* alignement du texte justifié */
    -moz-border-radius:10px; /* bordure arrondie 10px de rayon */
    -webkit-border-radius:10px;
    border-radius:10px;
    margin:10px 10px; /* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */
    padding:10px; /* marge intérieure de 10px */
    padding-left:50px; /* marge intérieure gauche de 50px pour laisser de la place à l'image */
    }
    a[href="#mabulleinfo"]:hover + sub, a[href="#mabullewarning"]:hover + sub /* texte en indice sur survol du lien */
    {
    display: inline;
    }
    /* Styles spécifiques à chaque info-bulles */
    a[href="#mabulleinfo"] /* texte du lien */
    {
    background-color:#FFFFAA; /* couleur surlignée */
    }
    a[href="#mabullewarning"] /* texte du lien */
    {
    background-color:#FFAAAA; /* couleur surlignée */
    }
    a[href="#mabulleinfo"] + sub /* texte d'info en indice après le lien */
    {
    border:1px solid #0000AA; /* taille, style et couleur de la bordure */
    /* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */
    background:#ddd url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center;
    }
    a[href="#mabullewarning"] + sub /* texte d'info en indice après le lien */
    {
    border:1px solid #AA0000; /* taille, style et couleur de la bordure */
    /* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #daa */
    background:#daa url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/warning.png) no-repeat 5px center;
    }
    /* Fin CSS info-bulles multiples */

     

    Et voici une informationCeci est une information et un avertissement testCeci est un avertissement.


    A retenir :
    • collez le code CSS donné en début d'article (ou celui de fin pour de multiples styles) dans le thème de votre blog ;
    • utilisez #mabulle (ou autre Url définie dans le CSS : #mabulleinfo, #mabullewarning...) comme Url du lien ;
    • mettez le contenu de l'info-bulle en indice juste après le lien.

    9 commentaires
  • Le titre de cet article  a été modifié pour :

    • afficher une image « Nouveau » ;
    • mettre le texte en bleu, gras et légèrement plus grand.

    Ce résultat est obtenu avec du code CSS,  ajouté dans le menu  :
    « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Pour commencer il vous faut connaître l'identifiant de l'article à mettre en évidence.
    Voir cet article pour comprendre comment est structuré un blog : [HTML] Structure d'un blog Eklablog

    L'identifiant d'un article est facile à trouver. Il est contenu dans l'adresse de l'article et apparaît également au survol du bouton d'édition de l'article.
    Une fois ce nombre repéré, il suffit de le remplacer dans les codes ci-desous.

    Pour le texte : on va modifier la couleur, mettre en gras, et définir la taille des caractères à 24 pixels.

    Code CSS pour le texteTout sélectionner

    #module_titre_article106907602, #module_titre_article106907602 a {
    color: blue;
    font-weight:bold;
    font-size:24px
    }

    Remplacez dans le code ci-dessus les valeurs numériques surlignées en bleu par l'identifiant de votre article.

    Notez qu'on applique le style à l'élément de titre ainsi qu'au lien hypertexte (a) qu'il contient éventuellement.
    En effet lors de l'affichage d'une liste d'articles, on remarque que le texte est un lien hypertexte qui pointe vers l'article.
    Lors de l'affichage d'un article seul sur la page, il n'y a pas de lien hypertexte.

    Pour ajouter une image (ou remplacer une image par défaut définie dans l'apparence du blog), il suffit de définir un style de fond de cette manière :

    Code CSS pour l'imageTout sélectionner

    #module_titre_article106907602{
    padding-left : 100px;
    background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/icons/nouveau.png) no-repeat
    }
    

    Ici également, remplacez dans le code ci-dessus les valeurs numériques surlignées en bleu par l'identifiant de votre article.

    La valeur 100px définit un décalage du texte vers la droite, afin de laisser de la place à l'image.
    Cette valeur doit être adaptée à la largeur de votre image (qui doit de plus ne pas être trop haute).

    D'ailleurs, vous pouvez changer d'image en modifiant la propriété url.

    L'image peut-être créée avec un éditeur d'image ou trouvée sur internet (vérifiez la licence d'utilisation de l'image).
    Chargez-la dans le blog avec le menu « Contenu » => « Gérer les fichiers », et double-cliquez sur l'image pour l'ouvrir et récupérer son adresse.

    Remarque : si vous souhaitez appliquer le même style à plusieurs articles, ne répétez pas tout le code ; vous pouvez appliquer le même code à plusieurs articles en sépérant les sélecteurs par des virgules, par exemple :

    Code CSS pour plusieurs articlesTout sélectionner

    #module_titre_article106907602, #module_titre_article106907602 a, /* titre article 106907602 */
    #module_titre_article106800692, #module_titre_article106800692 a  /* titre article 106800692 */
    {
    color: blue;
    font-weight:bold;
    font-size:24px
    }
    #module_titre_article106907602, /* image article 106907602 */
    #module_titre_article106800692  /* image article 106800692 */
    {
    padding-left : 100px;
    background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/icons/nouveau.png) no-repeat
    }
    

    6 commentaires
  • Dans l'en-tête de ce blog vous pouvez voir un ombrage sous le titre et le slogan (pour peu que vous ayez un navigateur assez récent).

    Cela est très facile à réaliser avec du code CSS.

    Voir cet article pour une première découverte du CSS : Mon premier code CSS - images au coins arrondis avec ombrage

    La structure d'un blog nous révèle que le titre a un identifiant titre_header et le slogan un identifiant slogan_header.

    Nous allons donc définir le style pour chacun de ces identifiants.
    Il suffit de rajouter un dièse (#) devant l'identifiant et de mettre entre accolades le style voulu.

    Pour un ombrage de texte il faut utiliser le style text-shadow.

    Ce style est expliqué en détail par exemple ici : CSS3 Shadows.

    On précise une position horizontale et verticale de l'ombre, une distance du flou et une couleur.

    Voici les codes utilisés pour ce blog :

    Code CSS pour le titreTout sélectionner

    #titre_header {text-shadow:3px 3px 5px #777}

    Code CSS pour le sloganTout sélectionner

    #slogan_header {text-shadow:2px 2px 3px #AAA}

    Ces codes sont à insérer dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».


    votre commentaire
  • Le but de cet article est de colorer dynamiquement les différents niveaux d'une liste numérotée d'un article.

    Avant  Après
       

    Je ne vais pas détailler ici tous les sélecteurs possibles.
    Les types de sélecteur sont détaillés ici : Les sélecteurs en CSS3

    Créez tout d'abord une liste hiérachique : c'est-à-dire une liste à plusieurs niveaux.

    Commencez par écrire le premier élément puis cliquez sur le bouton « Numérotation ».
    Pour passer au niveau suivant (décalé vers la droite), utilisez le bouton « Augmenter le retrait », accessible en mode d'éditeur « Expert ».
    Bien évidemment, « Diminuer le retrait » fait l'inverse.
    Choisissez une numérotation différente pour chaque niveau (dans la liste déroulante « Numérotation »).
    Cela nous permettera de différencier les niveaux pour leur appliquer un style différent.

    Voici les boutons de l'éditeur qui sont utiles :

     J'ai créé pour cet article une liste avec :

    • un niveau 1 de type « Par Défaut » (numérique) ;
    • un niveau 2 de type « Alpha-Minuscule » ;
    • et un niveau 3 de type « Romain minuscule ».

    Vous devriez avoir ceci :

    En basculant vers l'éditeur de Code Source, on voit ce code :

    Code HTML  Tout sélectionner

    <ol>
    <li>Niveau 1-1<ol style="list-style-type: lower-alpha;">
    <li>Niveau 2-a</li>
    <li>Niveau 2-b<ol style="list-style-type: lower-roman;">
    <li>Niveau 3-i</li>
    <li>Niveau 3-ii</li>
    </ol></li>
    <li>Niveau 2-c</li>
    </ol></li>
    <li>Niveau 2-2</li>
    </ol>

    Que je remets en forme ici pour plus de lisibilité :

    Code HTML  Tout sélectionner

    <ol>
    	<li>Niveau 1-1
    		<ol style="list-style-type: lower-alpha;">
    			<li>Niveau 2-a</li>
    			<li>Niveau 2-b
    				<ol style="list-style-type: lower-roman;">
    					<li>Niveau 3-i</li>
    					<li>Niveau 3-ii</li>
    				</ol>
    			</li>
    			<li>Niveau 2-c</li>
    		</ol>
    	</li>
    	<li>Niveau 2-2</li>
    </ol>

    Chaque niveau de liste est défini par <ol>, et chaque élément de liste par <li>.

    Le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Comme on souhaite l'appliquer uniquement à l'article qui contient la liste, il faut d'abord repéré son identifiant avec les outils de développement par exemple.

    L'identifiant de mon article est #module_contenu_article106949204.
    Vous devrez remplacer la partie numérique par le numéro de votre article.

    Ensuite on défini le CSS du premier niveau de liste :

    Code CSS pour les imagesTout sélectionner

    #module_contenu_article106949204 OL > LI {
    COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
    }

    Un espace entre deux sélecteurs signifie par exemple ici : tous les OL à l'intérieur de mon élément d'identifiant #module_contenu_article106949204.
    Un signe supérieur signifie par exemple ici : tous les LI placés directement dans un OL (mais pas ceux qui seraient d'un niveau inférieur dans un sous-élément de OL).

    On définit ci-dessus une couleur rouge foncé avec une taille de texte de 20 pixels.
    Notez qu'on ajoute également une marge de 15 pixels pour s'assurer que les numéros à gauche soit complétement visibles car la taille agrandie des caractères risque de rendre une partie des numéros invisibles.

    Puis le deuxième niveau de liste, en bleu :

    Code CSS pour les imagesTout sélectionner

    #module_contenu_article106949204 OL OL > LI {
    COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
    }

    Et enfin le troisième niveau de liste, en noir :

    Code CSS pour les imagesTout sélectionner

    #module_contenu_article106949204 OL OL OL > LI {
    COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
    }

    On a ainsi trois lignes de CSS, chacune définissant un niveau plus fin.
    Chaque élément de liste (LI à l'intérieur d'un OL) est d'abord coloré en rouge.
    Puis si on trouve deux niveaux de liste (LI à l'intérieur d'un OL lui-même à l'intérieur d'un OL), on colore en bleu.
    Et le troisième niveau colore en noir les éléments LI à l'intérieur de trois OL.

    Voici le code à placer dans le CSS, après avoir mis l'identifiant de votre article :

    Code CSS pour les imagesTout sélectionner

    #module_contenu_article106949204 OL > LI {
    COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
    }
    #module_contenu_article106949204 OL OL > LI {
    COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
    }
    #module_contenu_article106949204 OL OL OL > LI {
    COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
    }

    Si vous souhaitez placer ce code directement dans l'article, vous pouvez ajouter (dans l'éditeur de Code Source) le code entre des balises « style » de cette manière :

    Code CSS pour les imagesTout sélectionner

    <style type="text/css"><!--
    #module_contenu_article106949204 OL > LI {
    COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
    }
    #module_contenu_article106949204 OL OL > LI {
    COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
    }
    #module_contenu_article106949204 OL OL OL > LI {
    COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
    }
    --></style>

    Et voici le résultat obtenu :

    1. Niveau 1-1
      1. Niveau 2-a
      2. Niveau 2-b
        1. Niveau 3-i
        2. Niveau 3-ii
      3. Niveau 2-c
    2. Niveau 2-2

    L'intérêt d'utiliser du code CSS plutôt que de formater manuellement chaque ligne est que lorsqu'on ajoute un nouvel élément de liste, celui-ci est automatiquement formaté.
    Et il est possible de modifier en une seule opération la couleur ou la taille d'un niveau de liste.


    votre commentaire
  • Dans cet article, les images ont des coins arrondis et un ombrage.

    Nous allons détailler la procédure pour accomplir cet effet.

    Si ne voyez pas d'effet particulier sur les images de cet article, c'est sans doute que votre navigateur est trop ancien ; mettez-le à jour.

    Le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Copier-coller le code affiché ci-dessous dans la fenêtre d'édition CSS (à l'emplacement du cadre jaune montré ci-dessus), puis cliquez sur le bouton « Appliquer et Sauvegarder ».

    Code CSS pour les imagesTout sélectionner

    img {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 0px 3px 12px #777;
    -webkit-box-shadow: 0px 3px 12px #777;
    box-shadow: 0px 3px 12px #777;}

    Ce code est construit ainsi :

    • img est un sélecteur qui définit que ce qui suit s'appliquera aux éléments de nom <img>, c'est à dire aux images ;
    • entre accolades et séparés par des points-virgules, on définit chaque style à appliquer ;
    • border-radius:10px définit un arrondi de 10 pixels ;
    • box-shadow définit un ombrage ;

    Vous noterez que chaque style est triplé avec l'ajout des préfixes -moz et -webkit, ceci afin d'assurer la compatibilité avec un maximum de navigateurs.

    Le style d'ombrage est détaillé dans cet article sur developpez.com : Créer des effets étonnants avec la propriété CSS3 box-shadow

    Le code CSS ainsi défini s'applique à tout le blog.

    Nous allons maintenant voir comment l'appliquer à un seul article.

    Pour cela il faut modifier le sélecteur.

    Les types de sélecteur sont détaillés ici : Les sélecteurs en CSS3

    Pour l'instant le code s'applique à tous les éléments img.

    En consultant le code de la page affichant un article, on voit que celui est affiché dans un élément codé ainsi :

    Code de l'élément contenant un articleTout sélectionner

    <div id="module_contenu_article106831812" class="module_contenu">

    Pour une page, le code est presque identique, html remplaçant article :

    Code de l'élément contenant un moduleTout sélectionner

    <div id="module_contenu_html748300" class="module_contenu">

    On souhaite n'appliquer notre code CSS qu'à l'article 106831812.

    On va donc ajouter en sélecteur l'identifiant repéré ci-dessus.
    Un identifiant se défini avec le caractère #, ce qui nous donne #idcible img
    On l'ajoute avant le sélecteur img, afin de cibler les éléments img contenus dans un élément d'identifiant idcible.

    L'identifiant d'un article est facile à trouver. Il est contenu dans l'adresse de l'article et apparaît également au survol du bouton d'édition de l'article.
    Une fois ce nombre repéré, il suffit de le remplacer dans le code ci-desous

    Code CSS pour formater les images d'un article précisTout sélectionner

    #module_contenu_article106831812 img {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 0px 3px 12px #777;
    -webkit-box-shadow: 0px 3px 12px #777;
    box-shadow: 0px 3px 12px #777;}

    Dans la mesure où on n'applique maintenant le code qu'à un article, on peut envisager d'écrire le code CSS dans cet article afin de ne pas polluer le code CSS global et retrouver facilement ce code dans l'article.
    Pour faire cela on peut écrire du code dans l'éditeur HTML, en l'encadrant avec des balises style.

    Pour écrire du code dans un article, une page ou un module, cliquez sur l'icone « Code Source » du menu de l'éditeur :

    Si vous ne voyez pas ce bouton, passez en mode  « Normal » ou  « Expert» :

    Le code suivant est celui qui est écrit dans cet article et qui permet d'afficher des images avec coins arrondis et ombrage, uniquement pour cet article :

    Code CSS intégré dans un articleTout sélectionner

    <style type="text/css"><!--
    #module_contenu_article106831812 img {
    
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 0px 3px 12px #777;
    -webkit-box-shadow: 0px 3px 12px #777;
    box-shadow: 0px 3px 12px #777;} --></style>

    6 commentaires


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