CSS personnalisé et masquage de certaines parties du site web via CSS

Les demandes assez courantes sont liées au masquage de parties spécifiques sur le site Web qui n'ont pas leur propre bouton marche/arrêt du côté administrateur. Comme il n'est pas possible d'avoir des boutons d'administration de thème pour chaque détail sur le frontend, vous pouvez simplement masquer les parties indésirables à l'aide de CSS si vous n'êtes pas du tout familiarisé avec l'édition de codes HTML pour supprimer la partie.

Localiser la pièce à supprimer

Vous pouvez utiliser les outils de développement de navigateur pour localiser la partie exacte que vous souhaitez supprimer.
Supposons que vous souhaitiez supprimer la partie avec la date et l'auteur sous le billet de blog, avec un clic droit sur cette partie Inspecter l'élément et ouvrir les outils de développement du navigateur :

Ouvrir les outils de développement

En déplaçant le curseur de la souris sur votre code source, vous pouvez voir la section en surbrillance sur la page qui fait référence à une ligne de code source sous le curseur de votre souris :

Rechercher un élément dans la source

De cette façon, vous pouvez trouver le pair que vous souhaitez masquer - par exemple en vous référant aux captures d'écran ci-dessus s'il s'agit de toute la section avec la date et l'auteur, ou uniquement la section de la date, ou uniquement la section de l'auteur.

Écrire CSS pour masquer la section sélectionnée

Lorsque vous avez sélectionné une partie que vous souhaitez masquer, utilisez l'attribut ID ou CLASS de la balise HTML sélectionnée dans vos propres styles CSS, ou utilisez le sélecteur CSS exact utilisé par le thème pour cette balise. Sélecteur CSS pour la balise sélectionnée utilisée par le thème que vous pouvez localiser sur le côté droit des outils de développement du navigateur.
Par exemple, si vous avez décidé de supprimer toute la partie avec la date et l'auteur, le sélecteur utilisé par le thème est : .elm-posts-main .item .item-info

Sélecteurs CSS pour la balise

Le style CSS pour masquer la balise HTML sur le côté est "affichage : aucun ;", vous pouvez également utiliser !important déclaration pour empêcher l'écrasement ultérieur du style CSS avec un autre CSS.

Ainsi, le style CSS final pour masquer une partie avec la date et l'auteur sera :

.elm-posts-main .item .item-info { display: none !important; }

Ajouter du code CSS personnalisé dans Customizer

Vous pouvez ajouter le code CSS personnalisé dans Apparence > Personnaliser > CSS supplémentaire

Après la publication, vous pouvez le vérifier sur votre site Web :

style_css_appliqué