[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.

#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 :

#module_titre_article106907602{
padding-left : 100px;
background:url(https://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 :

#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(https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/icons/nouveau.png) no-repeat
}