SilverThistle

 

So, one of the fun things 'bout a site like BookLikes (apart from the obvious, like yanno...books) is the ability to personalize your space here and a header is a really good way to start that process. 

 

At the moment the default template has a brown leather effect as a header, and that's nice but you'll find a gazillion other users with the same one. 

 

I wanted a completely new look for my space and the leather just wasn't fitting in with that so it had to go....

 

{{*snip*   continue below the cut....}}

 

If you try to right click the header banner on the default template to save it as a guide to size etc, you'll find this image

 

The header graphic is set as a repeat in the html code and that's the key to getting a nice header.  Any graphic you use as your header will repeat to fill the space so the smaller it is, the more repeats there will be of it.

 

I decided to make a big one because I didn't want the default 'text' to show on my header, ie; blog name and description, but I still wanted to show who I was.

 

So, to make a long story even longer I made a new one from scratch (you could use an image you have already or one you find out there on the interweb too).  I made mine in Photoshop which is a whole new tutorial that I won't be covering, but the main thing to know with your header is size.  The design could be whatever you want but the overall size plays a big part in things looking right so get that sorted and the rest is easy.  The smaller the image the more repeats it will have.

 

I made this image to use for mine

 

 

Everyone's screen size differs so for some people with very small screens* the image doesn't repeat but actually crops.  For this reason I tried to keep things simple so that even on smaller browsers nothing was missed off.  Mostly though, you'll find that the header image you use will 'repeat' in browsers.  Mine does too, it's just not so noticeable as I made the graphic to disguise that effect.  The size above is a good fit for the header but it's not perfect.  Patience isn't my middle name so rather than faff around with it I just went with a size that didn't look too weird and called it done. 

*Note:  small laptop/browser screens.  I have no clue what an iphone user sees on their tiny screen.

 

The size I used is 1260 x 181 pixels.

 

You'll see in my banner shown here that the side edges have no fancy stuff, just plain colour.  When the banner repeats it just adds another copy of the banner onto the end of the first one so if the two edges that 'touch' are identical it looks seamless.  Obviously if my banner was very short I'd have lots of 'repeats' and the effect would be lost, but with this size of banner the repeat is only once at the right hand edge and isn't very noticeable.  If you search 'seamless tiles' on google you'll find millions of graphics that you could use as your header image, if you'd like something plain and easy.

 

Anyhoo...enough waffle.  On to how to add it to your page, once you find/make one you like.

 

In part one I mentioned where to find the customization menu and that's where we're starting from here.

 

Scroll down the brown column until you see 'Header Background'

 

Click 'upload picture' and choose which image you've chosen as your header.  Click the green 'save' button and you're done!!  Ta Da!!!  How easy was that?!!!

 

Any time you want a new header just re-upload your new image using the 'upload picture' button like you did the first time, although from now on it will say that you already have an image there and you have an option to delete it.  If you do delete your image it will return to the default leather graphic so don't be scared to try out some looks.  If they don't work just delete them and try again, you'll still have your leather one to fall back one :)

 

Hope this helps someone.

 

Next time I'll be changing the background of the main page to a colour other than white. 

 

 

Part One - How to get started

Part Three -  Changing your main page background colour

Part Four -  Moving follower buttons

Part Five - Changing the look of your follower buttons

Part Six - Changing the colour of your sidebar background

Part Seven - Changing your comment section background colour

 

 

Little bit of code below for thoughtsandpen :)

 

 

h1.header-title a {
    display: none;
}