How to Upload Full Width Header Image

• 

  1kdesign · Member · Jul 16, 2014 at 3:29 am

  • Copy link
  • Add topic to favorites

  I am using the Suit theme and am trying to upload a full-width header image in the customizer. While it let me do so initially, now any image that I upload (regardless of dimensions) is cropped to be only as wide as the center column of the page with black all around it. How do I upload a full-width (960×180?) header image in the suit theme?

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

• 

  sandymcfadden · Member · Jul 17, 2014 at 12:08 am

  • Copy link

  Hi alifebeyondborders,

  I took a look into this and I don’t think without having the Custom Design product add-on that you’ll be able to do this with this theme.

  960 is the width of center column and the theme forces you to crop the image to that width.

  If you did have the Custom Design then you could make an image larger that and upload it. Then manually set the background using CSS code.

  If you want to go that route let me know and I can certainly help you with it.

• 

  1kdesign · Member · Jul 18, 2014 at 3:41 pm

  • Copy link

  Thank you. I will by the upgrade, can you then provide instructions for a novice designer on where to manually set header image in the CSS code?

• 

  sandymcfadden · Member · Jul 18, 2014 at 6:54 pm

  • Copy link

  Absolutely.
  The first thing will be to is to get the image you want to use and upload it to your Media area in your Dashboard.
  Once it is uploaded you will need the full url to the image.
  You can get that by going to Dashboard > Media > Library.
  Find the image you uploaded and click the edit link beside it or on the image itself.

  On this new screen the full url will be on the right under the title File Url.

  Next you’ll need to know where to put the css code. It is Dashboard > Appearance > Customize.

  Then in the right hand menu click CSS.

  In the window that comes up put this code.

  .site-header {
      background-image: url(<url to your image>);
      background-size: cover;
  }

  But putting in the url to the image we found earlier.
  Save your changes and that should do it.

  Let me know how you make out or if you have any other questions about this.

• 

  1kdesign · Member · Jul 21, 2014 at 2:38 am

  • Copy link

  Hmm. I followed those steps but it still doesn’t seem to be working. When I do that, it doesn’t load any photo at all. Is there an email address I can email you at so I can attach a screen shot. If not, any other ideas?

• 

  timethief · Member · Jul 21, 2014 at 2:43 am

  • Copy link

  You can use http://snag.gy/ to share screenshots.

• 

  1kdesign · Member · Jul 21, 2014 at 3:09 am

  • Copy link

  Nevermind, got it all figured out. One last question – is there any way to remove the widget sidebar just from the individual post pages? I want it on the home page (which has my history of posts) but when you click through to a specific post I’d like the widget sidebar to disappear. Is that possible?

• 

  sandymcfadden · Member · Jul 21, 2014 at 9:27 am

  • Copy link

  Glad you got that figured out.
  You can change the Visibility of each widget to only display on pages if you like. This way it won’t show up on post pages.
  http://en.support.wordpress.com/widgets/#widget-visibility

  You’ll have to setup the rules for each widget in the sidebar but I think that will do what you’re looking for.