Blogger Template TB20090402 v1.1 (2 x)

Today I noticed the Configure Header Widget ability to add a Header Image (as a CSS background-image value) to a blog. Never seen it before.
Of course I was very curious if this gimmick would work on my templates too.
Yes it does, with a small glitch though! A 10px padding above and below the image ... which looks a bit silly.
So I made a (very very small) change to the templates ... a version 1.1.

You can download them here ...

The White Grail: v1.1!
The 2th White Grail: v1.1!

Or you can still use the v1.0, and add one property to the existing CSS code:

Change the #header-inner padding from 'padding:10px;' to 'padding:0 10px;'

old:

#header-inner {padding:10px;margin:10px 0;background:$hbgcolor url(http://yoururl/yourimage.jpg) center center no-repeat;border:1px solid $hbocolor;}

new:

#header-inner {padding:0 10px;margin:10px 0;background:$hbgcolor url(http://yoururl/yourimage.jpg) center center no-repeat;border:1px solid $hbocolor;}

template_tb20090402_thewhitegrail

Hi and Welcome!

This is the HomePage of my new Blogger Template: blogger_template_tb20090402_v1.0.
Everything I could think of is explained (more or less) in the entries below.

This oldie comes in two flavours:

First the original true Grail: Sidebar - Content - Sidebar ...

The White Grail: if you want it, here it is, come and get it.

Right-Click and choose 'Save Link As...'!

Secondly the 'modern' Grail: Content - Sidebar/Sidebar ...

The 2th White Grail: if you want it, here it is, come and get it.

Right-Click and choose 'Save Link As...'!

Ohh yeah, and I would really appreciate it if you keep the reference to my name in the Footer Box 'as is' ... .

Kind regards,

Thur Broeders.

Some notes on this template

Template Variables:

• Page Background Color
• Header Background Color
• Header Border Color
  
• Box Background Color
• Box Border Color
• Footer Background Color
• Footer Border Color
  
• Blockquote Background Color
• Sidebar Title Background Color
• Sidebar Title Border Color
• Sidebar Title Text Color
• Image Border Color
  
• Text Color
• Blog Title Color
• Post Title Color
• Link Color
• Post Footer Color
• Post Date Header Color
• Comments Text Color
  
• Text Font
• Heading Font
  

Adding your Header Image:

Look in the template for

#header-inner {padding:10px;margin:10px 0;background:$hbgcolor url(http://yoururl/yourimage.jpg) center center no-repeat;border:1px solid $hbocolor;}

and replace yoururl and yourimage.jpg with your own address and image.

If it must fill the whole box, make sure to make this image (at least) width:950px and height:???px.

Adding a Background Image:

Look in the template for

body {font:$bodyfont;line-height:1.5em;background:$bgcolor url(http://yoururl/yourimage.jpg) center top fixed no-repeat;color:$textcolor;}

and replace yoururl and yourimage.jpg with your own address and image.

Adding your favicon:

Look in the template for

<link href='http://***/favicon.ico' rel='icon'/>

and replace *** with your own address (presuming you do have your own icon uploaded somewhere, of course).

Hiding the Navbar:

Look in the template for

/* (Hide Navbar) */
/* #navbar-iframe {height:0px;visibility:hidden;display:none;} */

and delete the /* */ in the second line. Like this:

/* (Hide Navbar) */
#navbar-iframe {height:0px;visibility:hidden;display:none;}

Post 1 (formatting)

Here are all attributes:

This is largest text.

This is large text.

This is normaltext.

This is small text.

This is smallest text.

This is Bold text.

This is Italic text.

This text is left aligned: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae metus ac libero mattis gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eu mauris. Nam sit amet eros. Aenean auctor vehicula est. Nam turpis mauris, semper ac, pharetra at, euismod quis, nisl. In turpis.

This text is center aligned: Cras ante quam, molestie eu, consequat sed, volutpat nec, mi. Etiam diam sapien, mollis sit amet, imperdiet vel, accumsan ut, tortor. In tempor, tortor ut dignissim tempus, tellus leo egestas leo, eu posuere sem sem nec odio. Nulla facilisi. In hac habitasse platea dictumst.

This text is right aligned: Suspendisse potenti. Vivamus at augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur consequat ipsum eget turpis. Vestibulum gravida, quam sed sodales commodo, urna eros lobortis nisi, sed iaculis mi nunc sit amet felis.

This text is fully justified: Nam aliquam dapibus orci. Donec laoreet enim. Phasellus lobortis erat at massa lobortis facilisis. Aliquam facilisis luctus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis blandit nisi et dui. Vestibulum convallis, tortor et luctus posuere, tellus justo mattis magna, eget aliquet augue augue a nunc.

Let's end with a Blockquote: estibulum turpis. Sed venenatis ante a augue. Aliquam hendrerit metus et tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas consectetur tempus eros. Quisque justo. Aliquam sapien nisi, consequat a, dapibus in, sagittis ut, est. Mauris diam purus, pharetra non, venenatis nec, auctor a, libero. Maecenas ut ante vel mi gravida dignissim. Nullam sed erat ac dui dictum laoreet.

Post 2 (lists)

Here you have a numbered list:

1. item number 1;
2. item number 2;
3. item number 3.

Here you have a bulleted list:

• bullet number 1;
• bullet number 2;
• bullet number 3.

Post 3 (media)