Blogger Template TB20090321

Sunday, August 30, 2009

template_tb20090321_v1.1

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 template 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 template ... a version 1.1.

You can download it here: 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:#333 url(http://yoururl/yourimage.jpg) center center no-repeat;
-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #666;
height:200px;}

new:

#header-inner {padding:0 10px;margin:10px 0;background:#333 url(http://yoururl/yourimage.jpg) center center no-repeat;
-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #666;
height:200px;}

Monday, March 23, 2009

template_tb20090321_v1.0

Hi and Welcome!

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

If you want it, here it is, come and get it.

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

Who knows I will offer some support as well, if needed.

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.

Sunday, March 22, 2009

Some notes on this template

Template Variables:

Page Background Color
Box Background Color
Box Border Color
Blockquote Background Color
Sidebar Title Background Color
Sidebar Title Border Color
Sidebar Title Text Color
Text Color
Blog Title Color
Post Title Color
Link Color
Text Font
Heading Font

CSS3 border-radius feature:

The Boxes and the Header Image are defined -moz-border-radius: 10px; (Mozilla) and -webkit-border-radius: 10px; (Safari). The Sidebar Titles (h3) are given a 5px radius, the (Entry) Image Borders a 3px radius and the Blog Title 8px!

Mind you: not all browsers are supporting these Rounded Corners! So everything looks pretty cool in Firefox, Safari and Chrome ... but the corners are simply denied by MIE and Opera.

Adding your Header Image:

Look in the template for

#header-inner {padding:10px;margin:10px 0;background:#333 url(http://yoururl/yourimage.jpg) center center no-repeat;-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #666;height:200px;}

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

Be sure to make this image (at least) width:950px and height:200px.

Blog Title transparent background:

Look in the template for

h1.title {padding:10px;background:transparent url(http://yoururl/titlebg50.png) repeat 0 0;font-size:3em;font-weight:normal;color:$blogtitlecolor;-moz-border-radius:8px;-webkit-border-radius:8px;}.

That file can be downloaded here: titlebg50.png. Right-Click and 'Save Link As ...'.

Store that image somewhere and replace yoururl with your own address.

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;}

And to follow ... 2 links (click the images) to a dark and a light variant:

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.