Langit Template Customizing Header Headings

Having a logo or customized image title in the header can make your blog a lot looks professional, however when you place your header logo or customized image title the headings displayed in front of the customized logo or image title.

On this post we will discuss how to replace your langit template headings with a customized header logo or image without displaying your blog title and description.

How to replace langit template header with customize heading

1)First you must make a customized header logo or heading, one good example is the heading of this blog How to Make Extra Money. The key when customizing is that the dimension should not exceed the heading dimension of langit template. However if you upload your customized header to blogger.com, it will resize the image just enough to fit on the header of langit template. For this blog I made a customized heading of publisher quest then upload it on blogger.com as image and the result is below.

2)Select the URL of the image, as an example for the How to Make Extra Money the image URL is look like below.

3)Copy the image url of your uploaded logo, then go to the html of your langit template and locate the code for the header background then replace the header background url highlighted by red color with the url of the image you uploaded, same below.

/*+++++++++++++++++++++++++ header +++++++++++++++++++++++++++++*/
#header{
float: left;
width: 925px;height:125px;
background:#000000;
margin:0px 0px 0px 1px;
padding:0;
}
#logo {
float:left;
Background-image:url(http://3.bp.blogspot.com/_iVNieSWmnso/SieFIReAijI/AAAAAAAACiA/
A4fj9hcbJto/s400/Publisher4.jpg);

4)After you replace the image background, select preview tab to see the preview of your blog, on the preview version of your blog you will notice that the heading and the description shows up in front of the customized header image. Now, that’s where you needed to hide the description and the heading so that the only display on the header is the customized header image.

5)Now to hide the heading and the description of your blog locate the following code.

#logo h1 {
display: block;
color:$titlecolor;
font:$blogtitlefont;
padding:60px 0px 0px 10px;
}
#logo h1 a {
display: block;
color:$titlecolor;
font:$blogtitlefont;
}
.description {
display: block;
padding: 70px 0px 0px 15px;
font:$descriptionfont;
color:$titlecolor;
}

Replace the highlighted red word “block” with the word “none” then select the preview tab to view the template.

6) When you satisfied with the preview, select save template tab to save your template.

Now, you have your header customized to the one you like that best suited your blog for Langit Template from eblogtemplates.com.