Changing banner size for Sight theme

• 

  juliaaap · Member · Oct 28, 2013 at 2:37 pm

  • Copy link
  • Add topic to favorites

  Is there anyway to move the search box down to the side bar, take away the second menu and stretch the banner across the whole length of the header for the Sight theme?

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

• 

  thesacredpath · Member · Oct 28, 2013 at 8:02 pm

  • Copy link

  Create a new header image that is 975px x 150px and upload it to your media library and get the URL of the image. Replace URL_OF_IMAGE between the quote marks in the background declaration below and paste this below your existing custom CSS. If you wish to make the header a different height, you can do that and then adjust the minimum height value to match the height of your new image.

  .site-header hgroup {
  background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  min-height: 150px;
  }
  
  .header-search, .secondary-navigation {
      display: none;
  }
  
  .header-link {
      width: 96.5%;
  }

• 

  thesacredpath · Member · Oct 28, 2013 at 8:03 pm

  • Copy link

  Oh yeah, and for the search box in the sidebar, go to Appearance > Widgets and add the search widget to your sidebar.

• 

  juliaaap · Member · Oct 30, 2013 at 8:23 pm

  • Copy link

  Thank you for the reply! However, it doesn’t seem to work. While the second menu and search bar are taken away, the banner still does not stretch all the way across the top.

• 

  thesacredpath · Member · Oct 30, 2013 at 11:39 pm

  • Copy link

  What is the URL of your new image so that I can use your actual image. I’m not seeing one uploaded in your media library.

• 

  juliaaap · Member · Nov 2, 2013 at 10:27 pm

  • Copy link

  The URL is http://westerndragonboat.files.wordpress.com/2013/10/test-banner.jpg

  I did not actually save the changes after putting in the new code, because it didn’t work on the preview; so currently, the css is still the default for the theme.

• 

  justpi · Member · Nov 3, 2013 at 12:57 am

  • Copy link

  You need to make a couple of adjustments to the above suggestion. Turn this:

  .site-header hgroup {
  background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  min-height: 150px;
  }

  to:

  .site-header hgroup {
  background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  min-height: 150px;
  width: 100%;
  }

  and add this too:

  .site-header {
  padding-right: 0;
  }

• 

  juliaaap · Member · Nov 3, 2013 at 2:37 am

  • Copy link

  That works. Thank you!

• 

  thesacredpath · Member · Nov 4, 2013 at 6:41 pm

  • Copy link

  Nice work @justpi, and @juliaaap, your site is looking awesome!

• 

  bettersafethansorryproject · Member · Dec 4, 2013 at 5:33 pm

  • Copy link

  Hi, I have the same problem as juliaaap and none of the suggestions above seem to work. My blog is http://drrichblog.wordpress.com/
  and the url for the file I would like to use as the header:
  http://drrichblog.files.wordpress.com/2013/12/cropped-presentation1.jpg
  Thank you!

• 

  designsimply · Member · Dec 20, 2013 at 3:36 pm

  • Copy link

  I tested the example, and I think it should work for you.

  I looked at http://drrichblog.files.wordpress.com/2013/12/cropped-presentation1.jpg and it is 580 x 198 pixels. That’s not large enough. You should upload an image that is 975 x 150 pixels and try the example CSS again.

• 

  bettersafethansorryproject · Member · Jan 14, 2014 at 7:03 pm

  • Copy link

  I figured out what I did wrong. Thank you so much!