Header image sizing and placement

• 

  bonnieturnerbooks · Member · Mar 18, 2017 at 1:32 am

  • Copy link
  • Add topic to favorites

  “Hi! I would like my header image to ONLY appear on the front page. I would not like those to appear on any other pages. Could someone write that code for me?

  Also, this image is so large that people need to scroll down to find the text! Do you have a code for that too?”

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

• 

  thesacredpath · Member · Mar 20, 2017 at 9:45 pm

  • Copy link

  Hi, let’s start with this and see what you think. This removes the header image from all pages except for the home page. I noticed on your blog page that the quote you have as your site description created a problem because of its length, so I had to include a Media Query in order to reduce the font size so that it would all fit in the available area. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  body:not(.home) .custom-header-image {
    background-image: none !important;
    padding-top: 150px !important;
  }
  body:not(.home) #masthead .entry-title {
    padding-top: 60px;
  }
  @media screen and (min-width: 736px) {
    body.blog .custom-header-image {
      padding-top: 240px !important;
    }
    body.blog .site-description {
      font-size: 20px;
      padding-top: 60px;
    }
  }

• 

  thesacredpath · Member · Mar 20, 2017 at 9:52 pm

  • Copy link

  Actually, scratch the above and use this instead, which also addresses the image size on the main page.

  body:not(.home) .custom-header-image {
    background-image: none !important;
    padding-top: 150px !important;
  }
  body:not(.home) #masthead .entry-title {
    padding-top: 60px;
  }
  @media screen and (min-width: 736px) {
    body.blog .custom-header-image, body.home .custom-header-image {
      padding-top: 240px !important;
    }
    body.blog .site-description, body.home .site-description {
      font-size: 20px;
      padding-top: 60px;
    }
  }

  You may also want to add the following which shifts the header image up so that the path shows from the bottom.

  .custom-header-image {
      background-position: bottom left;
  }

• 

  bonnieturnerbooks · Member · Mar 21, 2017 at 7:20 am

  • Copy link

  Thank you so much! I’m very pleased with the changes you made and everything looks so much better. One thing I wish could be changed is showing more of the image from the bottom up because I love the path and its gorgeous colors.

  On second thought, maybe I didn’t read your comments very well for the additional code. It mentions it would shift the header up so the path shows from the bottom. (I had better learn to read!) But if that’s what it does, it apparently didn’t move up to show the path I mention in my last paragraph here. I noticed the full image was on the smallest device when previewed.

  When I pasted the first code, I skipped a space before entering the second and smaller code. Should there be a space between the two codes?

  I like the black headers you created. Looks cool! The only other thing I’d like is to single space my sidebar widget. Can you write code for that, too? Or have I just missed how to do it?

  Thanks again!
  Bonnie

• 

  thesacredpath · Member · Mar 22, 2017 at 12:29 am

  • Copy link

  Hi, great. On the image shift, it is the second bit of code at the bottom of my reply that moves the image down. I don’t see that in your custom CSS. Add that and then let me know how things go.

  On the widget line spacing, add the following and see what you think.

  .widget > ul li {
  	margin-top: 0;
  	padding-top: .2em;
  }

  It isn’t necessary to have a space between the CSS rules, but sometimes it makes it a bit easier to go through and find things later when you need to change something.

• 

  bonnieturnerbooks · Member · Mar 22, 2017 at 4:02 am

  • Copy link

  Hi, and thanks again!

  I must be doing something wrong. I have checked and re-checked and nothing changes with the image itself — it doesn’t shift up to show the path, but my page slides up under it. What am I missing?

  Otherwise, I can live with it the way it is. I’m just a color fanatic and love the red autumn leaves in the path. :)

  Bonnie

• 

  thesacredpath · Member · Mar 22, 2017 at 4:12 am

  • Copy link

  Oh dear, sorry, I had an errant period in my code, not sure how it got there as I did a copy and paste. Here is the corrected code.

  .custom-header-image {
      background-position: bottom left !important;
  }

  I think I need dinner and some rest. :)

• 

  bonnieturnerbooks · Member · Mar 22, 2017 at 4:49 am

  • Copy link

  It’s perfect now, sir! If I could, I would buy your dinner. :)

  Bonnie

• 

  thesacredpath · Member · Mar 22, 2017 at 6:31 am

  • Copy link

  Well, thank you Bonnie, and sorry for the butter-fingers on the keyboard. Let me know if you have additional questions or problems.