Saturday 2 September 2006

Blogger Beta - First experience with editing HTML

I decided to create a practice blog to...well...practice on. Turns out to be one of my better moves. Initially I thought I would be clever and simply paste my old template into the new 'Edit HTML' area. Turns out not to be one of my better moves. The red error messages flew at me fast and furious. Not to be defeated, I changed my strategy. I retreated back to their template, Minima.

I found the new template code to be different and contained things I have no idea what they are or do. Even after reading the instruction manual. *sigh* I'm sure an understanding will come at some point in time. At least I hope so. Until then I will do what I can which relies heavily on trial and error. The good part about my method, is I learn as I go. My new plan was to take this template and make it look like my orginal one with the added widgets and labels that I want to incorporate into my blog. The best of two worlds. Plan of attack...start at the top and work my way down. The header it was.

I wanted to replace the header with mine as I have it in my orginal blog. So, without further ado, this is what I did:
Change:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

To:
#header {
width:660px;
height:161px;
margin:0 auto 10px;
background: #fff url
(http://YOUR HEADER IMAGE URL HERE) no-repeat;
}

----------

Change:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

To:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

----------

Change:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

To:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
color: white;
font-size:0%;
}
Victory was mine! I was able to replace the header with my own, remove the border and make the Blogger title 'invisible'. Now, I'm not claiming my method is proper coding. I realize that those of you with much more knowledge in these areas will look at what I have done and shudder. But, it worked for me.
I'm already thinking about what to tackle next!

Update: see Blogger Beta - adding a header

post signature

No comments:

Post a Comment