{"id":90906,"date":"2021-08-31T12:42:23","date_gmt":"2021-08-31T12:42:23","guid":{"rendered":"https:\/\/www.ait-themes.club\/?p=90906"},"modified":"2023-12-12T09:19:50","modified_gmt":"2023-12-12T08:19:50","slug":"hide-parts-of-website-via-css","status":"publish","type":"post","link":"https:\/\/www.ait-themes.club\/fr\/cacher-des-parties-du-site-via-css\/","title":{"rendered":"CSS personnalis\u00e9 et masquage de certaines parties du site web via CSS"},"content":{"rendered":"

Les demandes assez courantes sont li\u00e9es au masquage de parties sp\u00e9cifiques sur le site Web qui n'ont pas leur propre bouton marche\/arr\u00eat du c\u00f4t\u00e9 administrateur. Comme il n'est pas possible d'avoir des boutons d'administration de th\u00e8me pour chaque d\u00e9tail sur le frontend, vous pouvez simplement masquer les parties ind\u00e9sirables \u00e0 l'aide de CSS si vous n'\u00eates pas du tout familiaris\u00e9 avec l'\u00e9dition de codes HTML pour supprimer la partie.<\/p>\n\n\n\n

<\/span>Localiser la pi\u00e8ce \u00e0 supprimer<\/span><\/h2>\n\n\n\n

Vous pouvez utiliser les outils de d\u00e9veloppement 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'\u00e9l\u00e9ment et ouvrir les outils de d\u00e9veloppement du navigateur\u00a0:<\/p>\n\n\n\n

\"Ouvrir<\/a><\/figure>\n\n\n\n

En d\u00e9pla\u00e7ant le curseur de la souris sur votre code source, vous pouvez voir la section en surbrillance sur la page qui fait r\u00e9f\u00e9rence \u00e0 une ligne de code source sous le curseur de votre souris\u00a0:<\/p>\n\n\n\n

\"Rechercher<\/a><\/figure>\n\n\n\n

De cette fa\u00e7on, vous pouvez trouver le pair que vous souhaitez masquer - par exemple en vous r\u00e9f\u00e9rant aux captures d'\u00e9cran 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.<\/p>\n\n\n\n

<\/span>\u00c9crire CSS pour masquer la section s\u00e9lectionn\u00e9e<\/span><\/h2>\n\n\n\n

Lorsque vous avez s\u00e9lectionn\u00e9 une partie que vous souhaitez masquer, utilisez l'attribut ID ou CLASS de la balise HTML s\u00e9lectionn\u00e9e dans vos propres styles CSS, ou utilisez le s\u00e9lecteur CSS exact utilis\u00e9 par le th\u00e8me pour cette balise. S\u00e9lecteur CSS pour la balise s\u00e9lectionn\u00e9e utilis\u00e9e par le th\u00e8me que vous pouvez localiser sur le c\u00f4t\u00e9 droit des outils de d\u00e9veloppement du navigateur.
Par exemple, si vous avez d\u00e9cid\u00e9 de supprimer toute la partie avec la date et l'auteur, le s\u00e9lecteur utilis\u00e9 par le th\u00e8me est : .elm-posts-main .item .item-info<\/code><\/p>\n\n\n\n

\"S\u00e9lecteurs<\/a><\/figure>\n\n\n\n

Le style CSS pour masquer la balise HTML sur le c\u00f4t\u00e9 est "affichage\u00a0: aucun\u00a0;", vous pouvez \u00e9galement utiliser !important<\/strong> d\u00e9claration pour emp\u00eacher l'\u00e9crasement ult\u00e9rieur du style CSS avec un autre CSS.<\/p>\n\n\n\n

Ainsi, le style CSS final pour masquer une partie avec la date et l'auteur sera\u00a0:<\/p>\n\n\n\n

.elm-posts-main .item .item-info { display: none !important; }<\/pre>\n\n\n\n
<\/span>Ajouter du code CSS personnalis\u00e9 dans Customizer<\/span><\/h2>\n\n\n\n
Vous pouvez ajouter le code CSS personnalis\u00e9 dans Apparence\u00a0> Personnaliser\u00a0> CSS suppl\u00e9mentaire<\/strong><\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Apr\u00e8s la publication, vous pouvez le v\u00e9rifier sur votre site Web\u00a0:<\/p>\n\n\n\n
\"style_css_appliqu\u00e9\"<\/a><\/figure>\n
\n
\n
Table des mati\u00e8res<\/p>\n<\/span><\/div>\n