Creating a custom header for stretch templates
Posted by
raj
under
Creating a custom header for stretch templates
it is a little more difficult to effectively create a custom header for stretch templates as the width of such templates is fluid. However, with a few simple tricks, you can easily create a unique, clickable header for your blog which will look great no matter how wide (or narrow) the browser viewing your blog.
I’m going to use the Minima Stretch template, though I
will also include notes applicable to the Denim Stretch template too.
The best way to use a custom header for a stretch template…
…is to create a logo or header image with a block background color !
This ensures that your header will appear normally in any size of browser window, whether this is a narrow monitor or widescreen laptop.
An effective method is to use a logo or badge, alongside your blogs’ title. If you ensure the width of the whole “banner ” is no wider than around 700px, you can be certain that the whole header will display properly in older browsers.
I used Photoshop to create the header for this demonstration, though you could just as easily use GiMP, CorelDraw or your favorite image editing program10.
Firstly I created a background which is 700 pixels wide and 100px tall.
You can make your own header banner taller than this if you prefer.
Then, I filled the background with a dark red color (hex value: #333333).
Ensure you have the hex value of your background color as you will need to use this value later on in this tutorial.
Secondly, I added the blog title in white text11 with a little shading to ensure this stands out from the background (there are loads of excellent free fonts available from DaFont12).
I aligned this title to the right of the image, leaving space to the left so I can add a logo afterwards.
Here is what the header banner looks like at this stage:
Now
Now I’d like to add a contrasting logo to the left of the header title, which will add some personality to the head section of the design. If you already have your own logo, you can simply paste this beside your header. However, for this template I’m going to use a badge style logo created using the free service from FreshBadge.com13. I created a badge using variants of red, and changed the size to 70pixels in height. Then I pasted this badge into my header banner, to the left of the title text, and saved the completed banner in GIF format:
Upload your image to Blogger To use this banner as the header, we will upload this to Blogger using the in-built image upload feature. Simply go to Template>Page Elements in your Blogger dashboards and click on the “edit” link in the header widget.
Choose to upload a new image from your computer and browse to the location where you have saved your custom banner design.
Upload this to Blogger, and check the radio box which says “Use instead of title and description”.
This ensures that your blog’s name will still appear in the top right of your browser, but nothing will interfere with the appearance of your new header banner. After uploading my header to Blogger, the template appears like this:
Blend the banner with the background of the header So far, the header banner doesn’t blend with the background of the header at all. We need to add a background color to the header section which is the same value as the background of our banner, which ensures it blends seamlessly.
To do this, go to Template>Edit HTML in your blogger dashboard, and find the following section of code near the beginning of the section: #header -wrapper { margin:0 2% 10px;
border:1px solid $bordercolor; } Here we will add a background color with the same hex value as the background of the banner (in my example, this is #333333). So add the line highlighted in red to this section of code, substituting the hex value for that of your own banner background color: #header -wrapper { margin:0 2% 10px; background: #333333; border:1px solid $bordercolor; } Now, my demonstration template looks like this:
Now this is looking better, wht say........................................
I’m going to use the Minima Stretch template, though I
will also include notes applicable to the Denim Stretch template too.
The best way to use a custom header for a stretch template…
…is to create a logo or header image with a block background color !
This ensures that your header will appear normally in any size of browser window, whether this is a narrow monitor or widescreen laptop.
An effective method is to use a logo or badge, alongside your blogs’ title. If you ensure the width of the whole “banner ” is no wider than around 700px, you can be certain that the whole header will display properly in older browsers.
I used Photoshop to create the header for this demonstration, though you could just as easily use GiMP, CorelDraw or your favorite image editing program10.
Firstly I created a background which is 700 pixels wide and 100px tall.
You can make your own header banner taller than this if you prefer.
Then, I filled the background with a dark red color (hex value: #333333).
Ensure you have the hex value of your background color as you will need to use this value later on in this tutorial.
Secondly, I added the blog title in white text11 with a little shading to ensure this stands out from the background (there are loads of excellent free fonts available from DaFont12).
I aligned this title to the right of the image, leaving space to the left so I can add a logo afterwards.
Here is what the header banner looks like at this stage:
Now
Now I’d like to add a contrasting logo to the left of the header title, which will add some personality to the head section of the design. If you already have your own logo, you can simply paste this beside your header. However, for this template I’m going to use a badge style logo created using the free service from FreshBadge.com13. I created a badge using variants of red, and changed the size to 70pixels in height. Then I pasted this badge into my header banner, to the left of the title text, and saved the completed banner in GIF format:
Upload your image to Blogger To use this banner as the header, we will upload this to Blogger using the in-built image upload feature. Simply go to Template>Page Elements in your Blogger dashboards and click on the “edit” link in the header widget.Choose to upload a new image from your computer and browse to the location where you have saved your custom banner design.
Upload this to Blogger, and check the radio box which says “Use instead of title and description”.
This ensures that your blog’s name will still appear in the top right of your browser, but nothing will interfere with the appearance of your new header banner. After uploading my header to Blogger, the template appears like this:
Blend the banner with the background of the header So far, the header banner doesn’t blend with the background of the header at all. We need to add a background color to the header section which is the same value as the background of our banner, which ensures it blends seamlessly.To do this, go to Template>Edit HTML in your blogger dashboard, and find the following section of code near the beginning of the
border:1px solid $bordercolor; } Here we will add a background color with the same hex value as the background of the banner (in my example, this is #333333). So add the line highlighted in red to this section of code, substituting the hex value for that of your own banner background color: #header -wrapper { margin:0 2% 10px; background: #333333; border:1px solid $bordercolor; } Now, my demonstration template looks like this:
Now this is looking better, wht say........................................
Posts
