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: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.
#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%;
}
I'm already thinking about what to tackle next!
Update: see Blogger Beta - adding a header
Labels:
Blogger Beta,
Design,
Graphics,
Hacks,
Header
12 Comments:
Hi Annie, good to see a fellow-blogger exploring this unknown territory. I guess your approach to replacing your title is quite good. It looks good at your testblog, so it works like it should.
I have a few suggestions for the coding:
You could remove the border-statement from your header-wrapper, instead of setting it to 0px;
If there are no other calls to the $bordercolor-variable, you can remove this variable from the css; this will remove it from the fonts&colors layout editor as well.
You have made the title invisible by setting its color to white and its size to 0 (is that correct?).
You could instead insert the code
display: none; in the css-part of header h1.
Hope it helps.
Suggestions for your next move: 2 sidebars to the left and a main area to the right. I have made a tutorial about adding a second sidebar here.
It is easy to implement, and you can add your html-code snippets, your blogrolls, and so on, to the sidebars using the page elements editor. So easy to maintain as well.
Hope it helps,
Hans
Hans, great suggestions. I am off to give them a try now.
Hi,
I am interested in toggle comments. How can I use them to a list of blogs I read as it occupies a lot space in the sidebar
priya, I think this post may be what you want to do.
Hide/Show, Expand/Collapse - Navigation Element
Hi there
Thanks for the amazing tips! I was somewhat perturbed to find out that the code looked so different in BETA considering how long it has taken me to figure out in regular Blogger.
Anyways, I have followed your excellent steps in my new blog, but I just can't persuade the banner to appear - I am SO CLOSE, I can feel it - I wonder if you wouldn't mind taking a quick look for me to see if you can spot any elementary mistakes?
Thanks very much, and keep up the excellent blog!!
http://eastendist.blogspot.com
@Eastendist, I'm getting ready to go to work, but when I get a chance I will be happy to look your blog/template over. Hang in there!
@Eastendist, I have looked over your blog template and the only thing I see that could possibly prevent your header image from displaying is in this part of your template code:
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;
}
The max width is 700px, but your image is 860px. So, change one or the other. If that doesn't work, copy and send me your template. (For some reason in blogger beta, I can't copy the source into the template and save it anymore to work on other templates...unless they send me the code from the 'edit HTML' section.)
Annie - thanks for your kind response and offer.
I spent the better part of this afternoon staring at code, and after a while ditched the template and attempted a fresh start - it worked! I evn managed to get a random banner hack going, as well.
One thing that I would really like to get going but have been unable to do so far is a random quote generator that appears just under the banner.
I had this going on my old non-beta blog http://larph.blogspot.com
but have been unable to beta-blogger-ise it.
Any ideas?
It might make for an interesting hack tutorial...
thanks once again!
@eastendist, I figured out how to add your quotes to blogger beta. I am going to write a tutorial right now!
thankyou for such easy coding :)
This is driving me insane and I still can't get it to work- but I did want to say thanks for putting it so simply!!!!
@polka dot bride, It is good to hear that you think my instructions are simple. I don't always use the 'correct' terminology, but I try to get my point across.
just to correct something imp, you can actually erase pictures, now if you select erase post there will be the option to erase the pictures too or to leave them be.