Add Header to Dots Template. ~ The Blog Doctor.
Loading...

Add Header to Dots Template.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The Dots Template is the only one of two in the Blogger Collection which does not have a header at the top. It has a header placed at the top of the sidebar. The other one is the Simple II Template which is the last in the choices list. Here I have added a header at the top and removed the original one at the top of the sidebar.......

First login to Dashboard and click on Layouts. This will open the Page Elements tab. Click on the Pick New Template subtab at the top. The template choices page opens and select the Dots template. See the picture below where I have shown the various divisions in the template :
Click on Image to enlarge it

From the image you can see that there is no header at the top. There are only two columns - the sidebar and the posts column. The header "Money for Blogs" is located at the top of the sidebar.


To add a header at the top go to Template---->Edit Html---->First Backup the template using the Download Full Template link. Then scroll down in Edit Template text box till you come to :

#header-wrapper {
display: none;
}

Delete this code as it is responsible for the no header. Save Template. In the same place add this code :

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
background:#ffffff;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Save Template. It may give error message about variable definitions being declared. In that case add the below code in the Variable Definition section at the top of the template :

<Variable name="bordercolor" description="Text Color" type="color"
default="#333" value="#333333">

<Variable name="textcolora" description="Text Color" type="color"
default="#333" value="#333333">

Save Template. Now to add the header widget code in the body of the template scroll down in Edit Template text box till you coe to this code line :

<div id='outer-wrapper'><div id='wrap2'>

Add the following code immediately after the above line :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'
showaddelement='yes'>
<b:widget id='Header1' locked='false' title='XXXXXXXXXXX (Header)'
type='Header'/>
</b:section></div>

Save Template.



If you want to delete the header at the top of the sidebar go to Edit Html subtab of Template tab and scroll down till you come to this code :

<b:widget id='Header1' locked='false' title='XXXXXXXX (Header)' type='Header'/>

Delete this code and save Template. See the new header in the picture below :



Technorati Tags:, , , ,

25 comments:

Dainty Dynamite said...

Hey,
I am a 'dummy' so bare with me. When I reach the:

Variable name="bordercolor" description="Text Color" type="color"
default="#333" value="#333333"

Variable name="textcolora" description="Text Color" type="color"
default="#333" value="#333333"

It still gives an error, saying a variable can't have the same color. Can't get past this point but would love to!!

vin said...

Dainty,
Just change one of the color values 333333 to some other.

Dainty Dynamite said...

Would you have a colour variable code I could try? I'm inventing new ones (as I have nothing to go on) & they don't work. THANK YOU-THANK YOU!!

vin said...

Take a look at :

http://www.asahi-net.or.jp/~FX6M-FJMY/java09e.html

Celtic Girl said...

I tried changing the colors like you suggested and I still keep getting the same error message...
"Invalid variable declaration in page skin: Two variables must not have the same description. Input: Text Color"
Do you have any other suggestions?
Thank you.

vin said...

Celtic Girl,
Just look for and delete one of the code lines with the "Text Color" word

evil one said...

hi,

i´m a newbie to html and template but is there a way for you to teach me how to do this but using the dark dots template_ i´ve been trying to change the values on the color but couldn´t get it right. thanks

vin said...

Evil One,

What is your blog url? Use my email address in left column for detailed help.

Eye! said...

Hello, I have the same trouble with the variables - keep having the same message: Invalid variable declaration in page skin: Two variables must not have the same description. Input: Text Color

I have tried taking one entry with Text Colour out which didn't work either.

Grateful for your help please.

vin said...

Eye,

Check in your CSS code where is the duplicate variable and delete both and also at the top in the 'Variable Definitions' section. Also see :

Error Messages in Blogger Templates

Icy said...

Vin!

Thank you for this post. I had to do some tweaking, but I was able to add a top header to the Dark Dots Template on Blogger! Very cool - I def would not have been able to figure it out without your help!!

Amor del Mono said...

I've tried all of the suggestions above and nothing seems to be working for me. Trying to change the colors doesn't work. Trying to delete one of the "Text Color" lines doesn't work. Any advice?

Vin said...

Amor del mono,

Did you clear cache after saving the settings/code changes?

Use Firefox browser.

lifeMac said...

How do you do this in the classic blogger template?

www.moremicro.blogspot.com

Help?

Vin said...

Lifemac,

Can you send me the template? My email address is in the middle column of this blog.

Michele said...

This is exactly what I need but I can't seem to make it work. I was able to add the first part but can't get the header widget in (what you said to put in after div id='outer-wrapper' div id='wrap2' ). When I paste that in, it tells me "More than one section was found with id: header. Section IDs should be unique.". And it won't let me save. Thoughts?

Vin said...

Michele,

First delete the original header in the sidebar. Follow the instructions in the above post after this sentence :

"If you want to delete the header at the top of the sidebar ....."

Michele said...

Well, now I can't get my comment to go after multiple tries. LOL Anyway, I had already removed that code and it still wouldn't work. I ended up searching on header and found another section in the sidebar wrapper. I changed the id to header4, changed locked to false, and then, after saving, deleted it from my template.
Thanks!

Anonymous said...

thanks for all the help. with a little tweaking it works great

Patricia Scarpin said...

Vin,

I have been meaning to change a few things on my blog forever, but was always too scared to do so. I have been testing a few things on a test blog and I managed to add the header to my dots template. I can't thank you enough!
I'll be testing a couple more things and then I'll add them to my actual blogs.
Thank you!

Kristina R. said...

Vin-
Thanks so much for posting this. I finally worked through all the error messages and loaded an image into the header.

Now my problem is that the image is not centered over the three columns.

Any ideas? If you want to check what I am talking about my blog is aboutabitofeverything.blogspot.com.

Any help would be appreciated since I am so close to getting this right.

Vin said...

Kristina R.,

Have a look at the header tip in 10 Quick Tips for Smart Bloggers.

Kristina R. said...

Vin-
Thank you! I got the header to work correctly, centered and the correct size.

So glad to finally have a header image.

yulia said...

hai Vin, my blog originally from the dots template. and I try to change it by myself. and the effects not quite good and I'm not satisfy
I still want to try to fix it
could you give me some clue. how can I place the right code for the body, the outer wrapper, header, main wrapper, side bar and footer
thankyou
http://puanworld.blogspot.com

Vin said...

yulia,

Create a test blog and load the dots template on it and follow the steps given in above post carefully.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.