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.
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:
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!