Skip to content
  • About
  • Blog
  • Contact
  • Sponsor
  • About
  • Blog
  • Lisa Bronwyn

  • Contact
  • Sponsor

How to Own Your Site Design With This Easy CSS Trick

October 18, 2020October 18, 2020 Lisa Bronwyn Leave a comment
How to Own Your Site Design With This Easy CSS Trick

Note: this post originally appeared on Station Seven. I used to be their WordPress support coordinator and also helped to improve upon their themes, Squarespace templates, and other products for their brand.

Whether you’re relatively new to rocking WordPress and Squarespace, or have been doing so for awhile, there’s still so much to learn! Have you ever struggled to get rid of that one pesky element, but didn’t feel like paying your developer friend or a stranger, and don’t even want to go there with “child themes”? What are those anyway?

What if I told you there is a simple way to remove unwanted elements from your website without having to edit your theme files?

Showing and hiding content is kind of a big deal, so today I want to share with you my favorite CSS trick for doing so, the display: none rule. It’s very handy when you need to quickly remove specific elements that you don’t want on your website. This post will show you everything you need to know about using this wonderfully powerful line of CSS.

Getting Started

If you’ve been owning the inspect element tool like a boss, this will be familiar. For those of you that haven’t used inspect element, I promise it won’t hurt! We are going to use our Monstera theme for WordPress to show you an example. To get started, in the web page in your browser, right-click. You’ll see Inspect at the bottom.

After clicking Inspect, you’ll see the window open below the content.

With our Inspect window open, we can begin viewing our site’s CSS code and even sample a few changes of our own.

A Basic Example

There are many ways for your readers to share your content in using the built-in share buttons, but perhaps you think email is old school and want to remove that option only. Below I’ll show you how to remove the Email link only without removing the other share links.

We’ll target the share email element with Inspect once again to figure out that we need to target the .email-share element.

.email-share { display: none; }

Add it into our Additional CSS box under Appearance > Customize, and voila! It’s gone.

TWO MORE EXAMPLES

Let’s hide the dates after the title of your blog post. For this example, we’ll use the Matchstick theme for WordPress. Below you can see the before look and that February 18 is the date after the title Terrariums For Rainy Days. With inspect element, I’ve isolated what element I’m targeting, which is p.entry-meta.

After targeting p.entry-meta to remove the date, I am going type display: none underneath white-space: no-wrap. Here’s where the magic happens!

Hooray, it looks great! Now, if you’re using the Kindred theme for your delicious recipe blog and the featured image is preventing you from immediately getting to the content so you want to remove it, below we show how to do so with our new CSS trick!

We’ve found our selector, .attachment-blog-featured, so our snippet becomes:

.attachment-blog-featured {     display: none; }

Saving your Changes

Now what? If you wanted to save this to make the change permanent, you would do so by pasting the snippet into your WordPress dashboard under Appearance > Customize > Additional CSS.

Here’s the snippet:

p.entry-meta {     

display

: 

none

; }

Be sure that you don’t forget the closing bracket!

SQUARESPACE EXAMPLE

Let’s now try using display none in a SquareSpace example this time, using the Fable Squarekit. In this example, we will be removing the button from the footer signup form.

From your SquareSpace dashboard, select Design, then scroll to the bottom and select Custom CSS.

After using inspect element, we’ll find the piece we’re removing and use this snippet to remove the button:

.newsletter-block .newsletter-form-button-wrapper button {     

display

: 

none

; }

Protip: Title your Changes

Are you ready for another cool trick that I love? You can make a comment above your CSS snippet so that you can remember what it does! This is so helpful when you DIY and can’t remember every pesky little detail.

I did this by typing /*Remove email signup button from footer*/ but it’s not mandatory. However, it’s a great way to keep yourself organized when adding your own customizations. Don’t forget that the opening of commented out code always starts with a backslash and asterisk /* and ends with an asterisk and backslash */ and that anything in between (your handy notes) will not be displayed anywhere else.

And here’s our end result!

AFTER

Final Notes

If you choose to use display: none, keep in mind that the item may still be loading on your web page, even if it’s not displaying. Besides title tags, there are other elements to think of, like a JPEG or animated GIF. If you have something like this that’s bigger in size, there could be page loading issues. No one wants to be slowed down while they’re taking in your awesome content, right?

Also, many themes include built-in options to hide/remove elements. Be sure to check the relevant theme documentation for your theme, as well as the Customizer (in WordPress) or Style Editor (in Squarespace) to see if there are existing options for removing unwanted elements. No need to reinvent the wheel!

YOUR EXAMPLES

Now that you’ve seen some examples, why not try to use it for some of your own content? Think back to those times where you’ve been frustrated and thought “Gosh darn it, it’s almost perfect but I want to remove ____ fill in the blank.”

cssweb devwordpress

Post navigation

Copyright-Free Sounds and Videos

Leave a Reply Cancel reply

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

Recent Posts

  • How to Own Your Site Design With This Easy CSS Trick
  • Pandemic Fitness – Time Travel Edition
  • Faux Fur Favorites
  • Happy New Year 2019!
  • Copyright-Free Sounds and Videos

Categories

  • Fitness
  • Thoughts
  • Web Dev

Archives

  • October 2020
  • May 2020
  • January 2019
  • November 2018

Join my mailing list!

Tutorials, lifestyle tips and fitness - right in your inbox!

Latest ‘Grams

One of my favorite Nick Cave albums. PJ Harvey, One of my favorite Nick Cave albums. 
PJ Harvey, Kylie Minogue, Rowland S. Howard, Shane MacGowan, etc.
This is one of my preoccupations with the endemic. This is one of my preoccupations with the endemic. Been relistening to Rowland S. Howard a lot which led me to pick up the bass again. ❤️
Kids are doing well, experts at Minecraft, Roblox, Among Us. 
C’s a great artist and L is hysterical, she made fun of a laser and called it LAMEser. They both make me laugh and I’ll take it. 🙂
You’d better shape up, 2021. Don’t blow it! You’d better shape up, 2021. Don’t blow it! 
Also, when you find Special Effects hair dye that’s no longer made, you use it! Yes, more conditioning, always, but I like change sometimes. 
How are you? ❤️ #greenhair #greenhairdontcare #greenhaircolor #greenhairdye
‘Tis the season. ❤️ ‘Tis the season. ❤️
It’s been suspiciously sunny here and there, but It’s been suspiciously sunny here and there, but notice that I’ve busted out all the faux fur? 
Yep, it’s 🥶.
I just realized that I didn’t ever post about th I just realized that I didn’t ever post about that chair project from a long time ago!
Not sure why I didn’t post a pic of it FINISHED finished, but here you go. 🙂
I dyed the silk and faded fabric with fuchsia RIT and stained the wood with a green one that was on clearance. 
Hope you’re staying safe and healthy. ❤️❤️❤️
Follow on Instagram
© 2021 | Lisa Bronwyn