not resolvedHi,
I really like the Cutline theme but think the whitespace on the side is too plain. Is there any way I can add a background image to the whitespace while keeping the post body and sidebars white? (It is like putting an image under the post body and sidebars) Thank you very much!
OK I figured out how to add a background image, but how to leave the container white? I search the official blog and found this:
------------------------------------
Vince // Feb 9, 2007 at 4:29 pm
Love this theme & WP 2.1 :] but i got a question ;> is there an easy way to add a background image (only to the left & right of the blog..) i added a bg-image body tag but then i have to add a white bg to the header,footer,content,sidebar etc. and even then some parts aren’t covered
#
67 Chris // Feb 9, 2007 at 9:07 pm
Vince — The only way to accomplish this reliably is to wrap the <div class="container"> element with another <div>. You’d need to apply horizontal padding (say, 30px per side) to the new <div>, which would bring your overall layout width to 830px.
Once you’ve done that, you can apply a background image (or color, or whatever) to the body element, and you’ll start to see the results you’re after.
-----------------------
But I don't understand how to "wrap the <div class="container"> element with another <div>" parts. Am I going to add a <div class="container"></div> in style.css or index.php or elsewhere? And what should I put in between <div> and </div> to make the container background white? Would someone please teach me how to do it with codes? Thank you so much!
first line of style.css
body{background:#F2E1C5 url('images/body_bg.jpg') top left repeat-x; color:#333; font:62.5% Georgia,"Times New Roman",Times,serif; text-align:center}
This is where you can change background color ie. background:#F2E1C5
and also add a background image ie. url('images/body_bg.jpg') if you want
The above only changes body not the content or sidebar
Works FF, IE6(no one should still be using), IE7, Safari
I am using a somewhat modified 2 column cutline you have make the adjustments for your site.
that not working couchmosue. looking to change the sides an leave the main page white.
that just changes the page to a back ground color you pick. hmm
I know, I'm having the same problem. I've tried wrapping the container as well, as Chris recommends above, but the only part of my contents it applies to is the masthead. It seems as if all the page elements are floating on the background, rather than being a part of a larger table.
Couchmouse, how did you get your container to be a self-contained unit?
Same problem. I want to change both the body of the theme so theirs a background image/color on the sides of the container, but I also want to apply a background image to the container itself so the entire page has a paper texture to it.
I am having trouble, because it seems to me the way the code is set up is that everything is wrapped in the container div (starts in header, ends in footer) because that's how everything is centered (container div has margins left/right set to auto)
But when I try adding a background color to the container div, only the masthead is affected.... somebody help please, as this is essential to my design.
I also tried the above advice and created a container-wrap div I wrapped everything in with a background color, but it still only applies to the masthead... grrr, this makes no sense.
Thanks! (btw, website is not live yet)
OK, been fooling around, and I've realized this issue seems to be isolated to firefox. Now I am even more clueless, because I build pages with this basic format all the time (content wrapped in one color, body bg another) with no issues in either browser, and the coding looks the same as what I normally do...
I hope to god someone figures this out...
OK, like usual I ask questions and then figure things out... but here's the deal in case anybody else is trying to do the same thing:
The reason the container wrapper does not stretch to include anything other than the masthead (or any other wrappers you make to wrap it in) is because all the other columns, and main content sections have floats applied to them. Due to this they do not affect the size of the divs containing them... except for in IE, which as usual, does not do what it's supposed to do with css. In this rare instance, that actually creates a positive result of the container div stretching to fill the page. (but still negative IMO cuz this is not what is supposed to happen)
So one solution I came up with but haven't implemented:
Add a clear div in the container div after the footer..
Of course this is messy and clutters the markup, so I found this ingenious solution:
http://www.positioniseverything.net/easyclearing.html
Check it out people, I am sure this will help anybody who is also struggling with this.
OK OK , last post.. I also realized you can just set the footer divs float to none to achieve the same result, but I assume there's some reason I don't want to do this. If anyone figures out a good reason why I shouldn't set the footer's float to none, post it. I can't figure out a difference.
Hi,
I'm new here, so please forgive me if this has been answered somewhere else. I am using Cutline 1.1, 2 column and would also like to had a small 150px sq graphic to the background of my site but not in the content area. I came here for an answer, but can't find one. Has anyone worked this out?
All help, very, very much appreciated.
Further clarification on what I am trying to do. I want my graphic to repeat and be the background, not just stay in one place - but not inside of the content or sidebars. You can tell I am new and have a hard time explaining, but I would appreciate any help. Thanks!
Wow, I had the same problem until 30 seconds ago. Thirdeyetc, setting that footer div to float:none worked perfectly for me! Thanks for figuring this out. :) Like you said, I don't even see a reason to wrap everything in a new div as #container seems to already do that.
Honestly, floats confuse and befuddle me. I would have never figured this out on my own, so thanks again.
One thing that does help me is the Firefox CSSmate plugin, which lets you debug CSS on the fly. It doesn't display perfectly but it's very helpful. In fact, it doesn't display background images but I just set my body bg color to yellow and that's enough to debug a problem like this.
gerrym, you set a background image in the body tag of your CSS. It looks like this - background-image: url('yourimage.jpg'); It should repeat automatically.
Then find your #container tag further down in the CSS and add this - background: #ffffff; or whatever background color you want.
This doesn't work unless you also set your #footer to float: none. Don't ask me why.
Josh, Thank You! As info, this still didn't work to begin with because I was trying to make the changes in the custom.css. The image still only showed in the masthead area. When I made the changes in style.css - it worked! Wonder why?
If anyone figures out a good reason why I shouldn't set the footer's float to none, post it. I can't figure out a difference. Research Paper Thesis Assignment
If you set the float to none, you run the risk of it not looking the same in other formats or browsers. However, you can always just check everything manually, and hopefully keep the continuity you're looking for. personal injury lawyer Tampa
You must log in to post.