Hide featured image on default template pages in Goran them

• 

  chrmarketing · Member · Apr 3, 2015 at 8:51 pm

  • Copy link
  • Add topic to favorites

  Hi I’m looking for help in hiding featured images on default template pages in the Goran theme.

  I still would like the featured images to display in the grid layout on the static homepage.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 4, 2015 at 5:56 pm

  • Copy link

  Hi, give the following a try. It targets the pages themselves and removes the featured image from the top.

  body.page.hero-image .hero.with-featured-image {
      display: none !important;
  }

• 

  chrmarketing · Member · Apr 6, 2015 at 1:36 pm

  • Copy link

  So let’s say I wanted to use it for “page ID 4″… How would that then look?

  Sorry pretty new to CSS, so just learning.

• 

  chrmarketing · Member · Apr 6, 2015 at 2:37 pm

  • Copy link

  I should also note, when I just plugged in the original code, it did not hide the featured images on other pages. For example: https://chrbillingservices.wordpress.com/solutions/usps-ncoalink/

• 

  thesacredpath · Member · Apr 6, 2015 at 7:05 pm

  • Copy link

  Remove this from right above the rule I gave
  .menu-item .dropdown-toggle
  It is what is messing things up.

  To do selected pages only, your selector would look something like this instead:

  .page-id-4 .hero.with-featured-image {
      display: none;
  }

• 

  chrmarketing · Member · Apr 6, 2015 at 7:39 pm

  • Copy link

  So I applied that in the it looks things moved around in an odd way…

  USPS NCOALink®

  Any thoughts on a solution to this?

• 

  thesacredpath · Member · Apr 6, 2015 at 11:07 pm

  • Copy link

  Right now, that page looks pretty good to me. Can you explain the “odd way” since I may be missing it.

• 

  chrmarketing · Member · Apr 7, 2015 at 1:35 pm

  • Copy link

  So on that page right now, on the screen I’m on, it has the copy of the body content (such as the photo and text) floating up into the header bar.

  I wish I could screenshot or email to show. But basically the text and pictures not staying in the lower area where it typically has been.

• 

  chrmarketing · Member · Apr 8, 2015 at 3:00 pm

  • Copy link

  Here’s a screenshot of what it looks like on a large monitor with it floating up into the header.

  

• 

  thesacredpath · Member · Apr 9, 2015 at 5:57 pm

  • Copy link

  With the changes to the header, this starts to get a little complex. We have to limit the change in top padding for the content between 1229 and 1020.

  @media screen and (max-width: 1229px) and (min-width: 1020px) {
  	.archive .hentry, .blog .hentry, .search .hentry, .content-area, .featured-page, .featured-page-area, .footer-widget-area, .front-page-widget-area, .grid, .grid-wrapper, .widget, .widget-area {
  		padding-top: 150px
  	}
  }

• 

  chrmarketing · Member · Apr 9, 2015 at 6:58 pm

  • Copy link

  Alright, I applied the changes above. Still running into issues. (My view is 1920×1080)

  Here’s what a subpage looks like: http://d.pr/i/19Th9
  -this is the actual page’s URL: https://chrbillingservices.wordpress.com/solutions/process/

  This is what the static home page looks like: http://d.pr/i/1c6jj

  This is what my CSS in entirety looks like:

  /*
  Welcome to Custom CSS!

  To learn how this works, see http://wp.me/PEmnE-Bt
  */
  .site-info {
  color: #ffffff;
  }

  .site-footer a, .site-top-content a {
  color: #403f3f;
  }

  .site-footer a, .site-top-content a:hover {
  color: #ffffff;
  }

  .site-info:before {
  color: white;
  content: “Copyright 2015 CHR Solutions | “;
  }

  .custom-big-button {
  padding: 12px 24px;
  background: none repeat scroll 0 0 #0079c1;
  border-radius: 4px;
  color: #FFF;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
  }

  tr, td, table {
  border: 0;
  }

  td {
  vertical-align: middle;
  }

  .grid .more-link {
  background: none repeat scroll 0 0 #0079c1;
  }

  .page-id-1 .without-featured-image, .page-id-11 .hero .page-title, .page-id-46 .hero .page-title, .page-id-28 .hero .page-title, .page-id-8 .hero .page-title, .page-id-32 .hero .page-title, .page-id-30 .hero .page-title, .page-id-107 .hero .page-title {
  display: none;
  }

  body.page.hero-image .hero.with-featured-image {
  display: none !important;
  }

  .site-header {
  background: #939ba1;
  }

  @media screen and (max-width: 1229px) and (min-width: 1020px) {
  .archive .hentry, .blog .hentry, .search .hentry, .content-area, .featured-page, .featured-page-area, .footer-widget-area, .front-page-widget-area, .grid, .grid-wrapper, .widget, .widget-area {
  padding-top: 150px
  }
  }

• 

  thesacredpath · Member · Apr 11, 2015 at 1:39 pm

  • Copy link

  Hmmm, for the Process page you reference, I’ve used the following and am not seeing any overlap issues from 2500px wide all the way down to my browser’s narrowest width, which is 335px. Give this a try for that page and see if you see any issues. If not, you can use it as a guid, or add additional CSS selectors to it for the other pages you wish to hide the featured image on.

  body.page-id-8.hero-image .hero.with-featured-image {
  	display: none;
  }
  
  @media screen and (max-width: 1229px) and (min-width: 1020px) {
  	.page-id-8 .content-area {
  		padding-top: 150px;
  	}
  }