Hiding With CSS

NOTE: If you came here hoping to become a master in all things CSS, we hate to break it to you, but you’re in the wrong place :)  There are a multitude of other sites that can give you an overview of what CSS is and does, like this one here.

But, if you simply want to hide things on your ProPhoto site that can’t be done in the “ProPhoto” > “Customize” area, you are in the right place.  Just make sure that you use CSS as a last resort, if there is an option to hide something in ProPhoto directly, use that option!

The Basics

To hide something on your ProPhoto site that you can’t hide directly within “ProPhoto” > “Customize“, you’ll need to use a line of CSS code in the “Custom CSS” area under “ProPhoto” > “Customize” > “Advanced” > “Custom Code“.  A line of Custom CSS code generally consists of 3 parts.

To demonstrate, let’s create an example.  Let’s say we want to hide our site’s “logo” on just the “blog” page of our site, where all of our posts are displayed (this is just an example, you can actually use the “ProPhoto page/post specific options” area to remove the logo from a specific post).

The Custom CSS to do this would be exactly this:

body.blog #logo {display: none;}

… and we will paste the code in ProPhoto’s special Custom CSS area:
Once we put this in and save, the logo is hidden:

Now, the 3 parts of our example code seen above are:

  1. WHERE – the first part of the code is “where” on the site we want to do something special. (e.g., which specific page or page type on the site) In this case, we want to do something special on our “blog” page so we use “body.blog” as the WHERE portion.
  2. WHAT –  the second part of the code is “what” part of the page with which we want to do something special. In this case our “logo” is what we want to modify so we use “#logo” as the WHAT portion.
  3. RULE – the last part of the code is the “rule” to do something special. In this case, we are going to hide the logo so we use the rule “{display: none;}” so the logo is not displayed.

The good news is that the third ‘rule’ part of our CSS code “{display: none;}” will be the same if all we need to do is hide stuff.  So to hide whatever you’re wanting, on whatever page you’re wanting, all you need to determine are parts 1 and 2, the “WHERE” and the “WHAT.”

WHERE to Hide

Here is a list of the codes you can use for “WHERE” (on which pages or page types) you want to hide something.

Use the codes in parenthesis instead to target only the ProPhoto mobile site.

  • Static Home Page only – body.not-mobile.is-front-page (.mbc-is-front-page)
  • Every ‘Static’ WordPress Page – body.page (.mbc-page)
  • One specific ‘Static’ WordPress Page** – body.page-id-xx (.mbc-page-id-xx)
  • Every page of the Blog – body.blog (.mbc-blog)
  • Every Blog Post page type – body.single (.mbc-single)
  • Every Proofing gallery page – body.single-pfp (.mbc-single-pfp)
  • Every Gallery page type – body.gallery-quasi-page
  • One specific Blog Post or Proofing Gallery** – body.postid-xx (.mbc-postid-xx)
  • All ‘sticky’ Blog Posts body.article-stuck-post
  • Every Blog Category Archive page type – body.category (.mbc-category)
  • One specific category archive page – body.category-title (.mbc-category-title)
  • Every Blog Monthly Archive page type – body.archive (.mbc-archive)
  • Every Blog Tag Archive page type – body.tag (.mbc-tag)
  • Search Results page – body.search (.mbc-search)

Using Page ID numbers

**Each time you want to use Custom CSS for a specific ‘blog post’ or ‘static page,’ you’ll just need to use that page/posts ‘ID’ number (“xx” in the code above). To get the ID number, edit your Post or Page in WordPress. When you’re editing it, you’ll find the ID number in your browser address bar after the part that says “&post=” as seen here:
page-id-address-barAn example using this number to hide the Title of the Page I’m editing would be:

body.page-id-5307 .article-header {display: none;}

This number will be different for every single Page or Post on your WordPress site, so your ID number will be different.

WHAT to Hide

And here is the list of the codes you can use for “what” it is you’re wanting to hide:
Use the codes in parenthesis instead to target only the ProPhoto mobile site.

  • Masthead** – #masthead  (#masthead-content)
  • Logo – #logo (#logo-img)
  • Primary Nav Menu – #primary-nav
  • Secondary Nav Menu – #secondary-nav
  • Bio*** – #bio
  • Footer** – #footer
  • Sliding Sidebar Drawer #1, etc. – #drawer_1
  • Post/Page Title text – .article-title (.article-title)
  • Post date – .article-date 
  • Post/Page Header area (all text and space) – .article-header (.article-header)
  • Archive Title area (on Category and Date archive page types) – .page-title-wrap
  • Grid Title text – .grid-item h3  (.grid-item h3)
  • Facebook Comments box – .fb-comments
  • Call to Action area – .call-to-action-wrap
  • Previous/Next links – #adjacent-posts-links
  • Ad Banner area – #ad-banners
** These items have ProPhoto controls so you can hide them on certain page types – for more info on this, click here.
*** The CSS rule for the bio area requires just one additional rule.  Instead of {display: none;}, you’ll need to use {display: none !important;} for it to work properly and hide your bio are completely.

(Just a note, do not try using Custom CSS to hide the Fixed Sidebar area on your site.  Instead, check out this tutorial here which explain how to do that.)

Putting It All Together

So, to create your own code, just use the lists above and follow this structure:

where what {display: none;}

Again, like in our example:

body.blog #logo {display: none;}

Make sure that the code you create always follows this same structure and always looks exactly like the above (e.g. no extra punctuation, correct spacing, etc.)

And if you want to hide multiple things, just create new lines of CSS code in the “Custom CSS” area, it’s that easy!

I want to do something not mentioned here!

Have you already gone through the ProPhoto settings areas? Many times someone asks to do something with CSS code, it can be done with a ProPhoto setting. Seriously, go see if ProPhoto offers an option to do what you want – maybe you haven’t found it yet.   :)

Otherwise, if you have looked this guide over and you’ve scoured ProPhoto for a setting, and you still can’t do what you want to do, please try researching CSS on your own. ProPhoto was created to provide you with control to create a pretty sweet website without writing code, and it does an amazing job – but there are probably a few fringe things it doesn’t yet do.


NOTE: If you came here hoping to become a master in all things CSS, we hate to break it to you, but you’re in the wrong place :)  There are a multitude of other sites that can give you an overview of what CSS is and does, like this one here.

But, if you simply want to hide things on your ProPhoto site that can’t be done in the “ProPhoto” > “Customize” area, you are in the right place.  Just make sure that you use CSS as a last resort, if there is an option to hide something in ProPhoto directly, use that option!

The Basics

To hide something on your ProPhoto site that you can’t hide directly within “ProPhoto” > “Customize“, you’ll need to use a line of CSS code in the “Custom CSS” area under “ProPhoto” > “Customize” > “Advanced” > “Custom Code“.  A line of Custom CSS code generally consists of 3 parts.

To demonstrate, let’s create an example.  Let’s say we want to hide our site’s “logo” on just the “blog” page of our site, where all of our posts are displayed.

The Custom CSS to do this would be exactly this:

body.blog #logo {display: none;}

… and we will paste the code in ProPhoto’s special Custom CSS area:
Once we put this in and save, the logo is hidden:

Now, the 3 parts of our example code seen above are:

  1. WHERE – the first part of the code is “where” on the site we want to do something special. (e.g., which specific page or page type on the site) In this case, we want to do something special on our “blog” page so we use “body.blog” as the WHERE portion.
  2. WHAT –  the second part of the code is “what” part of the page with which we want to do something special. In this case our “logo” is what we want to modify so we use “#logo” as the WHAT portion.
  3. RULE – the last part of the code is the “rule” to do something special. In this case, we are going to hide the logo so we use the rule “{display: none;}” so the logo is not displayed.

The good news is that the third ‘rule’ part of our CSS code “{display: none;}” will be the same if all we need to do is hide stuff.  So to hide whatever you’re wanting, on whatever page you’re wanting, all you need to determine are parts 1 and 2, the “WHERE” and the “WHAT.”

WHERE to Hide

Here is a list of the codes you can use for “WHERE” (on which pages or page types) you want to hide something.

Use the codes in parenthesis instead to target only the ProPhoto mobile site.

  • Static Home Page only – body.not-mobile.is-front-page (.mbc-is-front-page)
  • Every ‘Static’ WordPress Page – body.page (.mbc-page)
  • One specific ‘Static’ WordPress Page** – body.page-id-xx (.mbc-page-id-xx)
  • Every page of the Blog – body.blog (.mbc-blog)
  • Every Blog Post page type – body.single (.mbc-single)
  • Every Proofing gallery page – body.single-pfp (.mbc-single-pfp)
  • Every Gallery page type – body.gallery-quasi-page
  • One specific Blog Post or Proofing Gallery** – body.postid-xx (.mbc-postid-xx)
  • All ‘sticky’ Blog Posts body.article-stuck-post
  • Every Blog Category Archive page type – body.category (.mbc-category)
  • One specific category archive page – body.category-title (.mbc-category-title)
  • Every Blog Monthly Archive page type – body.archive (.mbc-archive)
  • Every Blog Tag Archive page type – body.tag (.mbc-tag)
  • Search Results page – body.search (.mbc-search)

Using Page ID numbers

**Each time you want to use Custom CSS for a specific ‘blog post’ or ‘static page,’ you’ll just need to use that page/posts ‘ID’ number (“xx” in the code above). To get the ID number, edit your Post or Page in WordPress. When you’re editing it, you’ll find the ID number in your browser address bar after the part that says “&post=” as seen here:
page-id-address-barAn example using this number to hide the Title of the Page I’m editing would be:

body.page-id-5307 .article-header {display: none;}

This number will be different for every single Page or Post on your WordPress site, so your ID number will be different.

WHAT to Hide

And here is the list of the codes you can use for “what” it is you’re wanting to hide:

  • Masthead** – #masthead
  • Logo – #logo
  • Primary Nav Menu – #primary-nav
  • Secondary Nav Menu – #secondary-nav
  • Bio*** – #bio
  • Footer** – #footer
  • Sliding Sidebar Drawer #1, etc. – #drawer_1
  • Post/Page Title text – .article-title
  • Post date – .article-date
  • Post/Page Header area (all text and space) – .article-header
  • Archive Title area (on Category and Date archive page types) – .page-title-wrap
  • Facebook Comments box – .fb-comments
  • Call to Action area – .call-to-action-wrap
  • Previous/Next links – #adjacent-posts-links
  • Ad Banner area – #ad-banners
** These items have ProPhoto controls so you can hide them on certain page types – for more info on this, click here.
*** The CSS rule for the bio area requires just one additional rule.  Instead of {display: none;}, you’ll need to use {display: none !important;} for it to work properly and hide your bio are completely.

(Just a note, do not try using Custom CSS to hide the Fixed Sidebar area on your site.  Instead, check out this tutorial here which explain how to do that.)

Putting It All Together

So, to create your own code, just use the lists above and follow this structure:

where what {display: none;}

Again, like in our example:

body.blog #logo {display: none;}

Make sure that the code you create always follows this same structure and always looks exactly like the above (e.g. no extra punctuation, correct spacing, etc.)

And if you want to hide multiple things, just create new lines of CSS code in the “Custom CSS” area, it’s that easy!

I want to do something not mentioned here!

Have you already gone through the ProPhoto settings areas? Many times someone asks to do something with CSS code, it can be done with a ProPhoto setting. Seriously, go see if ProPhoto offers an option to do what you want – maybe you haven’t found it yet.   :)

Otherwise, if you have looked this guide over and you’ve scoured ProPhoto for a setting, and you still can’t do what you want to do, please try researching CSS on your own. ProPhoto was created to provide you with control to create a pretty sweet website without writing code, and it does an amazing job – but there are probably a few fringe things it doesn’t yet do.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us