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.

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!

Written by: Jophiel Silvestrone

Jophiel Silvestrone has written 326 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. The first business, a janitorial and carpet cleaning company, founded in 2005, has employed over 50 locals. Moving on to the media industry, Jophiel and several partners founded Green Directory Montana in the spring of 2007. Green Directory's sustainability ranking software awarded points based on sustainable or "green" actions. These points counted towards a business's total "Green Score," which in turn ranked them against other businesses in their category and throughout the entire site. It also featured a limited edition print version distributed annually. A business acquisition allowed Jophiel to focus on new projects, and a few close business colleagues and Jophiel started Rocky Mountain Mr. & Ms. Magazine, a lifestyle publication for men and women in the Magic City. After a year and a half at the helm of RM3 Magazine, the business was purchased. He now runs a web development company SkyPoint Studios and fathers his son Jaoquin, who plays football, basketball, soccer, and is learning snowboarding from his dad. Recently, has expanded to locations in Havasu, Arizona & Vegas. SkyPoint Studios is a market leader in both Billings & Havasu and Jophiel is working on building that same level of market dominance in Vegas. Specialties: Extensive experience in online and offline business. Especially savvy at WordPress, and operate several sites, one example is the blog: skypointwebdesignbillingsmontana.com/tech-blog. Check out skypointwebdesignbillingsmontana.com for the latest projects from SkyPoint Studios.