The Size of Header on BookLite

• 

  mohammedrafiqlodhia · Member · Aug 5, 2014 at 3:01 am

  • Copy link
  • Add topic to favorites

  @TheSacredPath or @francisbob

  How to reduce the header on theme “BookLite”? The image that I
  have on right now is large. Is there any code to insert in CSS to
  downsize it?

  Awaiting the favor of your early reply.

  Thanks in advance.

  Rafiq

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

• 

  eurello · Staff · Aug 5, 2014 at 8:02 pm

  • Copy link

  Hi there,

  You can make the header narrower with this CSS:

  #masthead {
  height: 300px;
  }

  Just adjust that 300 until it looks like you want it to. Does that work? :)

• 

  mohammedrafiqlodhia · Member · Aug 5, 2014 at 11:38 pm

  • Copy link

  No, it did not worked. It reduces the height tremendously. I tried
  to change the px, but it distorts the image completely. I believe
  that something is missing in the code. It should reduce width
  and height proportionately.

• 

  eurello · Staff · Aug 5, 2014 at 11:53 pm

  • Copy link

  Hi there,

  When I adjust the px size, it works properly to shorten and lengthen the header area without distorting the width. If you’re still seeing distortion, can you leave what you’ve entered, so I can take a look?

  Note that doing this won’t affect the actual image you’ve uploaded, just the size of the header area. So if you want a shorter image, but you don’t want the bird cut off at all, you’ll want to resize your image to fit the new dimensions, upload it again and set the new sized image as header.

• 

  mohammedrafiqlodhia · Member · Aug 5, 2014 at 11:56 pm

  • Copy link

  Okay. You can look at the image now.

• 

  mohammedrafiqlodhia · Member · Aug 5, 2014 at 11:57 pm

  • Copy link

  What size should I upload?

• 

  mohammedrafiqlodhia · Member · Aug 6, 2014 at 1:28 am

  • Copy link

  Any idea on how to adjust the width as well as height of the image?
  If you look at the image, you will notice that the height is shrunk.
  My goal is to reduce the image proportionally in both width and
  height. Let me know if there be any change in the existing code.

  Thanks,

  Rafiq

• 

  mohammedrafiqlodhia · Member · Aug 6, 2014 at 1:44 pm

  • Copy link

  Good Morning WordPress Support Team,

  Patiently awaiting for a reply on how to adjust the size of the image on
  the header of BookLite theme.

  I am confident that you all should have an answer. As you can see I
  tried it, and the width remains the same and the height is shrunk down.
  All I need is to get the code that will adjust the width and the height
  proportionately.

  Thanks,

  Rafiq

• 

  eurello · Staff · Aug 6, 2014 at 6:56 pm

  • Copy link

  Hi Rafiq,

  Try the following to reduce the width:

  #masthead {
  background-size: 50% !important;
  }

• 

  mohammedrafiqlodhia · Member · Aug 6, 2014 at 10:37 pm

  • Copy link

  @eurello,

  Nope, that did not work. Kindly review it and let me know. Not sure
  about the word “!important;” used on the code!

  Rafiq

• 

  mohammedrafiqlodhia · Member · Aug 6, 2014 at 10:45 pm

  • Copy link

  @eurello,

  Sorry, I made made the mistake on inserting the code. Now I see
  another problem, that is, the distance between the content of my
  post and the image is now far apart. How to reduce the spacing?
  This is important, or else, it will look ugly.

  Rafiq

• 

  eurello · Staff · Aug 6, 2014 at 11:37 pm

  • Copy link

  Hi Rafiq,

  To reduce the vertical space, add the height parameter back to the masthead:

  #masthead {
  	background-size: 50% !important;
  	height: 300px;
  }

  You can make it more or less than 300 until it looks the way you want.

  We’ve got a great series on the Daily Post teaching our users basic CSS. You should check these out! They’re a big help:

  http://dailypost.wordpress.com/2013/06/21/css-intro/

  An Intro to CSS: Finding CSS Selectors

  Intro to CSS: Previewing Changes with the Matched Rule Pane

• 

  mohammedrafiqlodhia · Member · Aug 7, 2014 at 12:41 am

  • Copy link

  @eurello,

  I wish I was a WordPress wiz. For the last two months I am now
  learning new things every day with the help of you and everyone
  else.

  BookLite on Google Search says that the keep header size is with
  pixels 1440 px width and 500 px height. I think I will leave it at that.

  One more question which I have is, “How can I shrink the space
  from the bottom of the image and “The Story of Salman Amin Khan.”

  Appreciate your help.

  Thanks again,

  Rafiq

• 

  eurello · Staff · Aug 7, 2014 at 6:53 pm

  • Copy link

  Hi Rafiq,

  You’ll be a wiz before you know it! :)

  To shrink that space, try:

  #main {
  padding-top: 1em;
  }

  If you’d like a smaller header image area without going through the trouble of customizing it, you might check out some alternate themes. Book Lite has a particularly large header.

  Here are a few examples of themes with a full-width option like Book Lite, but a narrower custom header area:
  http://theme.wordpress.com/themes/suits/
  http://theme.wordpress.com/themes/coraline/
  http://theme.wordpress.com/themes/able/