Header Picture/Main Page

• 

  hunpot4 · Member · Mar 20, 2014 at 4:10 pm

  • Copy link
  • Add topic to favorites

  How do make the header picture on main page smaller?

  Is there a way to only have that picture on the main page rather then every tab and every page?

  when you click on the tabs to go to different pages it looks like your still on the same page until you scroll down. I would like you to be able to tell you have changed pages

  here is the site I need help with
  http://southshorewarriors.com/

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

• 

  hunpot4 · Member · Mar 20, 2014 at 5:44 pm

  • Copy link

  theme is adventure journal

• 

  thesacredpath · Member · Mar 20, 2014 at 11:54 pm

  • Copy link

  The following would put the banner on the main page only and specifically exclude it from all other pages on the site.

  .home #banner {
      background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      height: 200px;
  }
  .home #banner img {
      visibility: hidden;
  }
  .single #banner, .archive #banner, .page #banner {
  display: none;
  }

• 

  thesacredpath · Member · Mar 20, 2014 at 11:58 pm

  • Copy link

  I forgot to mention, I arbitrarily set a height of 200px in the first rule above for your new header image, but you can make it any height you want, just make sure and set the height to match the height of your image.

  Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.

• 

  hunpot4 · Member · Mar 21, 2014 at 1:38 am

  • Copy link

  thank you for responding I actually changed all images on pages to their theme picture of that specific page. It actually looks good that way you can tell you have changed tabs(pages).

  all I need to do is somehow make the theme image on main page smaller
  when I go to customize then header it says the default 920×360 but doesn’t give me an option to change that size. Anyway to change the size?

• 

  thesacredpath · Member · Mar 21, 2014 at 3:05 am

  • Copy link

  To use a different height header on the main page do not use the header image uploader. Add the following CSS,

  Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.

  .home #banner {
      background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      height: 200px;
  }
  .home #banner img {
      visibility: hidden;
  }

• 

  herindigorain · Member · Mar 21, 2014 at 3:15 am

  • Copy link

  You mean for hunpot4.wordpress.com?

  If so, the recommended size is 960×260. You can upload a header image that is any height, but the uploader will automatically stretch or shrink the image to 960px wide.

• 

  thesacredpath · Member · Mar 21, 2014 at 3:18 am

  • Copy link

  No, for southshore.

  Are you wanting to do that for hunpot4?

  Not all themes have flexible headers. Adventure Journal does not.