Removing Elements with CSS

Removing Elements from a Website with CSS Chainsaw Chopping HTML

One task that seems to occur a lot with theme adjustment, is making elements disappear. Whether it is WordPress, Joomla, or Drupal, there tends to be pieces of the original theme that will not work well with the new design concept. So the question is, how do we remove web design elements with CSS?

It’s actually a rather straight-forward process once it is figured out. First order of business is to isolate the area that represents the item to be removed.

Removing Elements Search

If it is a search bar, highlight the item in all blue and right click on the highlighted area,(Note: you’ll want to use Google Chrome developer tools) then select from the drop down list “Inspect Element.”

Inside the developer tools will be information about the DIV ID that contains the element you want to remove. This ID name is the key to removing elements with CSS. Armed with this name, go to your CSS master style sheet. If you are in WordPress, this is located under “Appearance” -> “Editor” and is the open file when you land in the editor.

At the beginning of the CSS document, you can write your changes in. When removing elements, we call the ID and tell it not to display. The code looks like this:

#NAME-OF-DIV-ID {

display: none;

}

Click the update button or save the file and check out the site to view your handy work. If the element did not disappear, then you may need to go back and check the developer insights to see if there is a different div element that could be controlling the element you want to remove.

Have a CSS trick of your own to share? Do so in the comments below!

Jophiel Silvestrone

Written by: Jophiel Silvestrone

Jophiel Silvestrone has written 163 posts in the Tech Blog.

Jophiel grew up on a ranch in Paradise Valley, Montana near Chico Hot Springs. Working on the ranch instilled work ethic and self motivation. Filled with this drive, Jophiel started mowing the local school's yards twice a month throughout the summers, at the age of 12. He moved to Billings in 2004, where he has been deeply involved in the local business community ever since. A serial entrepreneur, Jophiel has ran multiple businesses in our local community. He now runs a web development company SkyPoint Studios. One of his favorite jobs though, is fathering his 11-year old son Jaoquin. "JJ" also loves technology.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.