Table of Contents
Pretty common requests are related to hiding specific parts on the website which don’t have their own on/off button on the admin side. As it’s not possible to have theme admin buttons for each detail on the frontend, you can simply hide unwanted parts using CSS if you are not familiar with the editing of HTML codes to remove the part at all.
Locate part to remove
You can use browser developer tools you can locate the exact part which you want to remove.
Let’s say you want to remove the part with the date and author under the blog post, with right-click on this part Inspect Element and open browser developer tools:
Moving the mouse cursor over your source code you can see highlighted section on the page that refers to a line of source code under your mouse cursor:
This way you can find par you would like to hide – for example referring to screenshots above if it’s all section with date and author, or only date section, or only author section.
Write CSS to hide selected section
When you have selected a part you want to hide, use the ID or CLASS attribute of the selected HTML tag in your own CSS styles, or use the exact CSS selector used by the theme for this tag. CSS selector for the selected tag used by the theme you can locate on the right side of browser developer tools.
For example, if you decided to remove the whole part with the date and author, the selector used by the theme is: .elm-posts-main .item .item-info
CSS style to hide HTML tag on the side is “display: none;“, you can use also !important statement to prevent further overwriting of CSS style with another CSS.
So the final CSS style to hide part with the date and author will be:
.elm-posts-main .item .item-info {
display: none !important;
}
Add custom CSS code into Customizer
You can add the custom CSS code into Appearance > Customize > Additional CSS
After publishing you can check it on your website:
