Hide parts of website via CSS

Updated: January 11, 2016

This article follows on previous post about modifications in CSS. In that post you can read where you can write the css codes which you learn in this article.

Pretty common requests are related to hiding of specific parts on website which don’t have own on/off button in admin side. As it’s not possible have in theme admin buttons for each one details on the frontend, you can simply hide unwanted parts using CSS if you are not familiar with editing of html codes to remove the part at all.

1. Locate part to remove

In browser developer tools you can locate exact part which you want remove.
Let’s say you want remove part with date and author under blog post, with right click on this part Inspect Element and open browser developer tools:

Open Developer Tools

Moving mouse cursor over your source code you can see highlighted section on the page that refer to line of source code under your mouse cursor:

Find Element In Source

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.

2. Write CSS to hide selected section

When you have selected part you want hide, use ID or CLASS attribute of selected html tag in your own css styles, or use the exact css selector used by theme for this tag. CSS selector for selected tag used by theme you can locate on the right side of browser developer tools.
For example if you decided remove whole part with date and author, selector used by theme is: .elm-posts-main .item .item-info

CSS Selectors for tag

CSS style to hide html tag on 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 date and author will be:

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

applied_css_style

About Ivan Hudak

Works as an IT consultant for over 7 years now. He's a manager of our support team. Knows everything about all our themes, HTML, CSS, PHP and jQuery.