Monday, December 18, 2006

Blogger Beta Banner problems resolved

As some of you noticed, I got my blogger beta template problems resolved this weekend. Thanks to helpful comments from Propter Doc and Skookumchick. I used skookumchick's code to put the picture in as the background, e.g.,

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

But the picture still didn't show up. Turns out that blogger wouldn't show pictures posted in blogger beta (for some idiotic reason). So I had to open a flickr account to post the picture elsewhere on the web and then link to that. This was really the only part that I figured out on my own.

Then, since I had text on my banner image, I wanted to get rid of the text generated by the widget in page elements. But I couldn't completely delete it or my title wouldn't show up in bloglines. So I made it as small as possible (using the edit colors and fonts page) and an innoccuous color (thanks to the tip provided by propter doc). I left the description blank and figured out how to remove the border under #header using the edit html.

Finally, I widened the columns to fit the prenatal ticker and the width of my banner. I couldn't figure out how to the get the ticker where it used to be, so I just pre-dated a post and stuck it there.

These obviously aren't the most elegant solutions, but I hope they help anyone who wants to do something similar.

Oh, and please tell me if you find something hard to read, not showing up properly, or too wide for your screen. I'll do my best to resolve those issues.


Miss Smarties said...

Hello there!
If you're still interested to know other ways to solve your problem with blogger beta, here are some tips:

1) To add picture as header - Click "Template" ++ "Page Elements" ++ "Add Page Element". Then, click add to blog "Picture". A box with 'Picture' as the title will show up under the "Add a Page Element". Drag this box to the same place where your want to add your header.

2) To delete the title/page header - There must be a box with your blog's title on it. Click "Edit" and then click "Remove Page Element".

3) To add ticker/HTML & JavaScript Element - Click "Add a Page Element" ++ HTML/JavaScript - Add to Blog. Paste the code and after that, drag the box/widget to the place where you want the ticker to be displayed.

Well, I hope this help.
By the way, I like our blog a lot! :)

Sonnjea B said...

Add Page Element wouldn't let me put my ticker immediately below the header banner either. I tried posting my solution here, but the comment section didn't like the html code in my comment, so I emailed it to you.

skookumchick said...

Yay! Glad the code helped. Looks lovely.

Sue said...

Thank you so much for mentioning that pictures saved on the new Blogger can't be used in banners!! I spent hours yesterday trying to get a picture into my blog, after starting to use the new layout system. I went round in circles, following all kinds of suggestions I found online, and getting nowhere. Of course I had done what I always did before, and saved the picture I wanted to use in a draft blogger post.

Finally I found your page, and then it was easy - I just edited the html as I used to with the old blogger, with the address of the picture, no longer in blogger. I didn't bother with any of the scripting or layout suggestions.