• [CSS] Mettre en évidence le titre d'un article

    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
    }
    
    « [CSS] Ajouter une ombre au titre et au slogan de l'en-tête[CSS] Info-bulles en CSS sans Javascript »

  • Commentaires

    1
    Mardi 22 Avril 2014 à 16:31

    Très intéressant ! Merci beaucoup ! Je sais je suis un peu nul (oops) mais je n'ai toujours pas compris comment trouvé le numéro identifiant d'un article ... Merci par avance ! 

    2
    Mardi 22 Avril 2014 à 17:12

     On voit l'identifiant lorsqu'on survole le bouton Editer de l'article (dans la barre d'état en bas si elle est affichée) :
    javascript:Module.edit('mod', 'article', 106907602);void(0);


    Ou dans la barre d'adresse sur la page de l'article :
    http://gerer-mon-blog.eklablog.fr/css-mettre-en-evidence-le-titre-d-un-article-a106907602 


    Si ça ne s'affiche pas, il est possible de copier le raccourci (clic droit => Copier le raccourci).
    Par exemple : http://naturel.eklablog.net/reglement-a-signe-a103207567
    => l'identifiant de cet article est 103207567

    3
    Mardi 22 Avril 2014 à 17:30

    Ha merci !!! Ça m'avance déjà beaucoup ! Une mine d'or ! 

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    4
    Mercredi 28 Mai 2014 à 20:52

    Bonjour Thierry. Je voudrais savoir comment fait-on pour le titre des rubriques (car je veux mettre en avant le titre de la rubrique "Accueil"

    Merci :)

    5
    Mercredi 28 Mai 2014 à 21:19

    Bonjour,

    Pour un titre de rubrique c'est presque pareil :

    #module_titre_articles24844338
    {
    colorblue;
    font-weight:bold;
    font-size:24px;
    padding-left 100px;
    background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/icons/nouveau.pngno-repeat
    }

    C'est module_titre_articles avec un "s" en plus.

    Il n'y a pas de lien, donc la deuxième partie avec un "a" à la fin n'est pas nécessaire.

    Du coup on peut tout regrouper.

    Pour retrouver l'identifiant numérique de la rubrique, c'est comme pour les articles on le trouve dans le lien url ou en survolant le bouton d'édition.

    6
    Dimanche 13 Juillet 2014 à 21:57

    Merci pour les codes  C'est super pour améliorer nos blog

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :