Issues hiding feature image

• 

  cjoondeph · Member · Apr 26, 2017 at 4:20 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I would like to hide the feature image because it looks really bad with my current theme (Lovecraft) on an individual post page but is still useful to have to display through links elsewhere.

  I’ve written the CSS to do this, but the problem is when the feature image disappears, the blog ends up partially covering up the links at the top. For example: http://imgur.com/a/QjkIl Its almost like I need some padding in between once the image is gone, but I am not sure how to write that code.

  This is the specific page I am trying to remove the feature image on: https://authentictraveling.wordpress.com/2017/04/22/independent-day-trip-to-the-taj-mahal/

  As you can see, when it goes away, the upper part of the blog covers the links. How can I fix this?

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

• 

  otpidusprime · Member · Apr 26, 2017 at 4:31 pm

  • Copy link

  Hello @cjoondeph,
  It is happening because the content area class which wraps the content of the site is using a negative top margin like this:

  .content-area {
      float: left;
      margin: -120px -26.3% 0 0;
      width: 100%;
  }

  So to move the blog content down so that it does not cover up the menu-bar when you hide the featured image, use this CSS code:

  .content-area {
      margin-top: 0px;
  }

  Hope this helps 🙂

• 

  otpidusprime · Member · Apr 26, 2017 at 4:31 pm

  • Copy link

  CORRECTION:
  It is happening because the content area class which wraps the content of the blog* is using a negative top margin like this:

• 

  cjoondeph · Member · Apr 27, 2017 at 5:34 am

  • Copy link

  Wow! Thank you! This helped me so much.

  On another note, I was wondering if you knew how to write the CSS code to actually change the feature image within the post?

  For example, if I set a featured image, then I want to overwrite this with CSS to display the default feature image I use elsewhere on my site? I’ve tried around simply by changing this link:
  `background-image: url(https://authentictraveling.files.wordpress.com/2017/03/cropped-img_7469.jpg);
  }’
  But it doesn’t seem to work.

• 

  otpidusprime · Member · Apr 27, 2017 at 7:33 am

  • Copy link

  So you want to have a default featured image for the posts that do not have any featured images? Right?

  Well you have to do that manually by setting a default featured image for all your posts from the post editor.

  There’s no way to do that using CSS, because that would require some JavaScript to detect whether the featured image is present or not. And on WordPress.COM we are not allowed to add custom JavaScript codes.

  Sorry about that mate.

• 

  cjoondeph · Member · Apr 27, 2017 at 7:36 am

  • Copy link

  My question is there a way to override the set featured image to display the default featured image? Meaning I’ll still have one set on my post, but rather than just hiding it, I show the default instead.

• 

  otpidusprime · Member · Apr 27, 2017 at 9:42 am

  • Copy link

  Please confirm this.
  Are you talking about the post featured image or the site header image?

  Here’s the difference between the two: http://prnt.sc/f1dye2