{"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\/nl\/delen-van-de-website-verbergen-via-css\/","title":{"rendered":"Aangepaste CSS &amp; delen van de website verbergen via CSS"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Veel voorkomende verzoeken hebben betrekking op het verbergen van specifieke onderdelen op de website die geen eigen aan\/uit-knop hebben op de beheerkant. Omdat het niet mogelijk is om op de voorkant voor elk detail een thematische beheerknop te hebben, kun je ongewenste onderdelen eenvoudig verbergen met CSS als je niet bekend bent met het bewerken van HTML-codes om het onderdeel helemaal te verwijderen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Locate_part_to_remove\"><\/span>Zoek het onderdeel dat u wilt verwijderen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Je kunt de ontwikkelaarstools van de browser gebruiken om het exacte onderdeel te vinden dat je wilt verwijderen.<br>Stel dat u het gedeelte met de datum en auteur onder het blogbericht wilt verwijderen, klik dan met de rechtermuisknop op dit gedeelte Inspect Element en open de browser developer tools:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/open_developer_tools.jpg\"><img decoding=\"async\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/open_developer_tools.jpg\" alt=\"Tools voor open ontwikkelaars\" class=\"wp-image-22529\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Als u de muiscursor over uw broncode beweegt, kunt u een gemarkeerd gedeelte op de pagina zien dat verwijst naar een regel broncode onder uw muiscursor:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/find_element_in_source.jpg\"><img decoding=\"async\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/find_element_in_source.jpg\" alt=\"Element in bron zoeken\" class=\"wp-image-22530\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Op deze manier kun je het gedeelte vinden dat je wilt verbergen - bijvoorbeeld verwijzend naar bovenstaande schermafbeeldingen of het alle secties zijn met datum en auteur, of alleen datumsectie, of alleen auteursectie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Write_CSS_to_hide_selected_section\"><\/span>Schrijf CSS om geselecteerde sectie te verbergen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Als je een onderdeel hebt geselecteerd dat je wilt verbergen, gebruik dan het ID- of CLASS-attribuut van de geselecteerde HTML-tag in je eigen CSS-stijlen, of gebruik de exacte CSS-selector die het thema voor deze tag gebruikt. De CSS-selector voor de geselecteerde tag die door het thema wordt gebruikt, kun je vinden aan de rechterkant van het ontwikkelgereedschap van de browser.<br>Als je bijvoorbeeld besluit om het hele gedeelte met de datum en auteur te verwijderen, is de selector die door het thema wordt gebruikt:&nbsp;<code>.elm-posts-main .item .item-info<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/css_selectors_for_tag.jpg\"><img decoding=\"async\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/css_selectors_for_tag.jpg\" alt=\"CSS-selectors voor tag\" class=\"wp-image-22531\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">CSS-stijl om HTML-tag aan de zijkant te verbergen is \"display: none;\", je kunt ook<strong>&nbsp;belangrijk<\/strong>&nbsp;om te voorkomen dat een CSS-stijl verder wordt overschreven met een andere CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dus de uiteindelijke CSS-stijl om het gedeelte met de datum en auteur te verbergen wordt:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.elm-posts-main .item .item-info {\n\tdisplay: none !important;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_custom_CSS_code_into_Customizer\"><\/span>Aangepaste CSS-code toevoegen in Customizer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Je kunt de aangepaste CSS-code toevoegen aan <strong>Uiterlijk &gt; Aanpassen &gt; Extra CSS<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"1024\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/09\/customizer-additional-css-342x1024.png\" alt=\"\" class=\"wp-image-94933\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/09\/customizer-additional-css-342x1024.png 342w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/09\/customizer-additional-css-100x300.png 100w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/09\/customizer-additional-css.png 345w\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Na het publiceren kun je het controleren op je website:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/applied_css_style.jpg\"><img decoding=\"async\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2015\/04\/applied_css_style.jpg\" alt=\"toegepaste_css_stijl\" class=\"wp-image-22532\"\/><\/a><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhoudsopgave<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ait-themes.club\/nl\/delen-van-de-website-verbergen-via-css\/#Locate_part_to_remove\" >Zoek het onderdeel dat u wilt verwijderen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ait-themes.club\/nl\/delen-van-de-website-verbergen-via-css\/#Write_CSS_to_hide_selected_section\" >Schrijf CSS om geselecteerde sectie te verbergen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ait-themes.club\/nl\/delen-van-de-website-verbergen-via-css\/#Add_custom_CSS_code_into_Customizer\" >Aangepaste CSS-code toevoegen in Customizer<\/a><\/li><\/ul><\/nav><\/div>","protected":false},"excerpt":{"rendered":"<p>Vrij veel voorkomende verzoeken hebben betrekking op het verbergen van specifieke onderdelen op de website die geen eigen aan\/uit-knop hebben op de beheerkant. Omdat het niet mogelijk is om thema-adminknoppen voor elk detail op de voorkant te hebben, kun je ongewenste onderdelen eenvoudig verbergen met CSS als je niet bekend bent met het bewerken van [...]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_citadela_custom_class":"","footnotes":""},"categories":[63],"tags":[],"citadela-post-location":[],"class_list":["post-90906","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials"],"_links":{"self":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/90906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/comments?post=90906"}],"version-history":[{"count":5,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/90906\/revisions"}],"predecessor-version":[{"id":96004,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/90906\/revisions\/96004"}],"wp:attachment":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/media?parent=90906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/categories?post=90906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/tags?post=90906"},{"taxonomy":"citadela-post-location","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/citadela-post-location?post=90906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}