Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Splitting the background color into 2?
Old 10-20-2007, 04:50 PM Splitting the background color into 2?
MrBrownThumb's Avatar
Extreme Talker

Posts: 194
Location: Chicago, IL
Trades: 0
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.
__________________

Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
MrBrownThumb is offline
Reply With Quote
View Public Profile Visit MrBrownThumb's homepage!
 
 
Register now for full access!
Old 10-20-2007, 08:51 PM Re: Splitting the background color into 2?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-20-2007, 11:32 PM Re: Splitting the background color into 2?
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
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.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 10-21-2007, 01:07 AM Re: Splitting the background color into 2?
MrBrownThumb's Avatar
Extreme Talker

Posts: 194
Location: Chicago, IL
Trades: 0
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.
__________________

Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
MrBrownThumb is offline
Reply With Quote
View Public Profile Visit MrBrownThumb's homepage!
 
Old 10-21-2007, 07:10 PM Re: Splitting the background color into 2?
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
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.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

Last edited by vangogh; 10-23-2007 at 10:37 PM..
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 10-23-2007, 01:44 AM Re: Splitting the background color into 2?
MrBrownThumb's Avatar
Extreme Talker

Posts: 194
Location: Chicago, IL
Trades: 0
Thanks for the tips Vangogh.
__________________

Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
MrBrownThumb is offline
Reply With Quote
View Public Profile Visit MrBrownThumb's homepage!
 
Old 10-23-2007, 11:07 AM Re: Splitting the background color into 2?
Average Talker

Posts: 16
Name: Michelle
Location: Virginia
Trades: 0
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.
michelle1908 is offline
Reply With Quote
View Public Profile Visit michelle1908's homepage!
 
Old 10-23-2007, 08:57 PM Re: Splitting the background color into 2?
MrBrownThumb's Avatar
Extreme Talker

Posts: 194
Location: Chicago, IL
Trades: 0
Quote:
Originally Posted by michelle1908 View Post
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.
__________________

Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
MrBrownThumb is offline
Reply With Quote
View Public Profile Visit MrBrownThumb's homepage!
 
Old 10-23-2007, 10:40 PM Re: Splitting the background color into 2?
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
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.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 10-24-2007, 01:33 AM Re: Splitting the background color into 2?
MrBrownThumb's Avatar
Extreme Talker

Posts: 194
Location: Chicago, IL
Trades: 0
Quote:
Originally Posted by vangogh View Post
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.
__________________

Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
Please login or register to view this content. Registration is FREE
.
MrBrownThumb is offline
Reply With Quote
View Public Profile Visit MrBrownThumb's homepage!
 
Reply     « Reply to Splitting the background color into 2?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.30804 seconds with 12 queries