Hi,

I'm trying to modify a Blogger template and I'm wondering if someone can give me some advice.

I use a simple template that uses no images and has a solid background color. But I'd like to modify it so that the background color changes into a second color below the content of the posts.

Essentially it would look like this

Header
Content
-------<-new color starts
Footer

You can see an example of what I mean on a working Blogger blog:

theicasblog.blogspot.com

See how the top 2/3 of his blog are grey but the bottom 1/3 is black? I've looked at his source code and I don't see that it's an tile image or how he achieved the effect with CSS. If you have a few moments and can take a look at that blog and the source code and point me in the right direction I'd be very appreciative. BTW if it means anything to you I'll be using a Minima or Simple II template that has no images in it.

I know how to make the header, sidebars and footer a different color than the background-but I can't figure out to to split up the background color into two colors.

On that blog, he has a div in there called #bottom-content with the background color set to black. Then all that bottom content falls inside that #bottom-content area.

I'll basically echo what LadynRed said.

All that's really going on in that site is the footer section has a background color set that's different from the background color set on the body. In this case I guess it's called #bottom-content instead of footer.

I'm not really familiar with editing code on blogger, but the problem might be that the theme you're using uses a different layout. You might need to adjust the html layout in order to be able to achieve the look you want.

Thanks for the replies.

Vangogh,

I think you may be right. I'm pretty sure he did his template from scratch. Would it help any if I showed you and LadynRed a template I was trying to achieve that two color background in?

http://browntestingspot.blogspot.com/

I just put up that template so you can see the one I'd have to edit. I set a BG color to the sidebar and footer wrapper just to give you an idea of what is where. I'd like for the second color to start below the "subscribe to" line and before the footer. I don't suppose it is as simple as inserting something like background color to the wrapper of the sidebars.

Anyway, thanks for your help thus far.

It does look like you'll need to make structural changes to the html in order to get the look you want. There's a div with a class of feed-links where the subscribe text is contained that will have to be moved into your footer.

There's also an empty div below that with an id of blog1 and a classes of widget and blog applied. I think you'll want to move that too since it looks like it's controlling the spacing around div.feed-links.

You'll want to take both (or at least div.feed-links) out of the containing div#main-wrapper and place them in your footer. If you can make those structural changes you should be able to achieve the look you want, but playing around with the background colors.

Hope that helps and hope you're allowed to make those changes in blogger.

Thanks for the tips Vangogh.

I'm trying to do the same thing, but I think I'm having difficulty with the footer container. I'll be checking back to see the solution.

Originally Posted by michelle1908

I'm trying to do the same thing, but I think I'm having difficulty with the footer container. I'll be checking back to see the solution.

Are you trying to do it in Blogger also?

I really have no idea what I'm doing here or even how to follow VG's suggestion. I did try to copy the code from the example above but all it has given me is a bar at the bottom and only because I placed it outside the wrapper.

A few moments ago I discovered if I moved the footer below the outter wrapper and expanded its width I got the look I was after-but I'm not sure how that will look in different browsers and screen resolutions.

If you're looking to also do this in a Blogger template let me know because I'm going to go ask in one more place and see if someone has already done this or if there is a tutorial to follow along that shows how to do it. If I find anything I'll let you know.

Are you still working on this. It looks like the blog now has only one background color. What you described in your post above is a little different than what I was suggesting, but I think it will work.

Originally Posted by vangogh

Are you still working on this. It looks like the blog now has only one background color. What you described in your post above is a little different than what I was suggesting, but I think it will work.

Yeah,

I put it on the back burner and worked on another design with the same template for another of my blogs. One of these days I'll have to sit down and learn the languages to do these modifications because I have tons of ideas I abandon once I get to something more complicated than my abilities.

Thanks for the help though.