How to Own Your Site Design With This Easy CSS Trick

How to Own Your Site Design With This Easy CSS Trick.jpg

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.

InspectElement1.png

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

InspectElement2.png

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.

monstera_displaynone_email.png

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.

MonsteraEmailShare.png

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.

CSSbefore.png

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!

CSSAfter.png

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!

Own Your Site Design With This Easy CSS Trick.png

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

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

KindredA-1.png
CSS Cheat Sheet

Get your Free CSS Cheat Sheet

Overcome your fear of CSS + start customizing!

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.

additional CSS.png

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.

Fable_displaynone.png

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

SSafter-485x1024.png

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.

CommentedOut.png

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

FableAfter.png

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 our 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." You can also grab our free, 4-page CSS cheat sheet below and make even more customizations to your site.

CSS Cheat Sheet

Get your Free CSS Cheat Sheet

Overcome your fear of CSS + start customizing!

So how are you going to implement display: none in your own projects? I'd love to see your examples in the comments!