7964

Currently Reading

Pietr Le Letton
Georges Simenon
Sherlock Holmes: The Definitive Collection
Arthur Conan Doyle, Stephen Fry
The Golden Age of Murder
Martin Edwards
Merlin Trilogy
Mary Stewart
Progress: 340/928 pages
She Walks These Hills
Sharyn McCrumb
The Adventures of Sherlock Holmes
Arthur Conan Doyle

Recently Added

The Redeemer - Jo Nesbø
Runaway - Peter  May
The Mistletoe Murder and Other Stories - P. D. James
"You only live once, but if you do it right, once is enough." ― Mae West


"The man who does not read has no advantage over the man who cannot read." ― Mark Twain


"Women and cats will do as they please, and men and dogs should relax and get used to the idea." ― Robert A. Heinlein


"Always be a first rate version of yourself and not a second rate version of someone else." ― Judy Garland
Find me elsewhere:
My Leafmarks Profile
Project Hamlet

Customizing BookLikes Tutorial - Part 2 - Back to basics. Adding a new header (Reblogged from Silver Thistle)

 

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. 

 

 

Reblogged from SilverThistle