How do I add color to the sides of the template? Thanks.
Cutline Theme Support Forums » Cutline Theme Support Forums
How do I add a background color (around the main blog)?
(28 posts)- Started 4 years ago by startuphustle
- Latest reply from couchmouse
- This topic is
not resolved
-
Posted 4 years ago #
-
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 sidebarWorks 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.
Posted 4 years ago # -
couchmouse,
That worked in IE7 but not FF. It also changed the entire background color. I just wanted the border to change. Any ideas? Thanks.
Posted 4 years ago # -
same problem here.
Posted 4 years ago # -
#content_box{padding:30px 0 0 0; width:900px; background:#fff; text-align:left; float:left; clear:both}
#footer{background:#f2f2f2; display:block; clear:both; width:900px; padding:0px 0px 10px 0px; text-align:left !important; font-size:11px; line-height:23px}
background:#xxxxxx color has to be added fff white and I use f2f2f2 for my footer color
I only use firefox, this works with firefox and It is tested with safari, IE6&7
Go download my css http://www.couchmouse.net/wp-content/themes/Cutline/style.css if you want use what you need and as you can see at http://couchmouse.net it works.
Posted 4 years ago # -
works! Thanks i owe you a coffee.
Posted 4 years ago # -
Which template is this on? I cant seem to find it.
Posted 4 years ago # -
one more thing the posts are pulled close to the edge the content box. your has a nicelittel padding moving the psot text to the right a little. Can you lead me to that code line to change?
entry area maybe?
Can i wrap a boarder around teh blog liek you did an leep the white are between the header graphic an the tilte area up top?
Posted 4 years ago # -
At startuphustle: we are not talking about a template file we are talking about your stlye.css file.
At jeff010501:
You were only supposed to add the code for the background:#xxxxxx to the #content_box and #footer not all the padding I have in my code. That has to do with modifications I have made in other places in my css such as borders and width changes I have made.
If you are using 2 column theme yours should probably look like this with the background:#xxxxxx added.#content_box { width: 800px; text-align: left; background:#fff; float: left; clear: both; }
#footer { width: 800px; padding: 1.2em 0 0 0; background:#fff; border-top: 2px solid #ccc; float: left; clear: both; }
And it would be easier if you listed your site so I can see your CSS file like I can see startuphustles CSS file
Posted 4 years ago # -
couchmouse i didnt use ur css i just added the content code ,but i was wondering how you added the border all the way around and see when i change the backgorund color in the default template the space above an below the header graphic turns the back ground color so if back ground is blue above an below the graphice is a blue area ,wanted to leave that white.again thanks for everything
Posted 4 years ago # -
jeff010501
Thanks for providing website addy. I see now you are not using a masthead image. I looked at your source code and style.css file. Try this and see if it fixes your problem.save your current style.css somewhere safe as backup and change the following line..
#container { width: 770px; margin: 15px auto 0 auto; } to this#container { background:#fff; width: 770px; margin: 15px auto 0 auto; }
Posted 4 years ago # -
Couchmouse i thank for your time.
Few more questions and ill leave you alone and will help others with these issues.were would i change or box in color above header graphic an below header graphic its blue currently " front page /rss"
And how would i pad the context title "home" and the content post down and away from the left of context box?
Ur giving me a school in css and verymuch loveit. thank you.
Posted 4 years ago # -
Ok i figure out how to padd teh text in teh content box. almost have the powers!ha
Posted 4 years ago # -
I just cant fig out how to get rid of the space under the graphic header and above were the rss an front pag nav is between the title. or change that space white to match
hmm
aand wonmderinghow to wrap a boarder around the whole thing
Posted 4 years ago # -
Try this. Put this in your custom.css file
.custom #container{width:770px; height:auto; background:#FFFFFF; margin:15px auto 0 auto;}BTW I like your new background color a lot better than the blue.
Posted 4 years ago # -
Hi Couchmouse-
Thanks for the great CSS code and help. I'm trying to apply a border around my container, but I'm running into problems. I started by adding a wrapper to the CSS and header code, and I've also tried adding a full border to the container (sans wrapper), the latter of which I pulled from your page's code. While both methods have an effect, the problem is that they are only applying to the masthead. My site currently has the border code from your site, and you can see what I mean: www.sustainablescoop.com
I have had the same problem as the above folks, where if I change my background color, it changes in every section of the site, not just the background. How did you change your site's CSS so the container is a self-contained unit, rather than just floating on the background as it seems to for the rest of us? Thanks!
Posted 4 years ago # -
at kerryrobb I sent you and email
Posted 4 years ago # -
Couchmouse, I am wanting to do the same thing, add a border around my whole container? Like you have done on your site. I am using the 3 column split, but am modifying the width. Thanks!
Posted 4 years ago # -
At JustBeachy:
Looks like you figured it out and got it done. Looks nice. You did a good job on the required padding.Posted 4 years ago # -
JustBeachy
"add a border around my whole container? Like you have done on your site. I am using the 3 column split, but am modifying the width."
Could you please show me how you did that? My theme is the 3 column split. I might need step by step help. Please do not assume that I know anything. lol I am such a newbie. Though if I am given the code and am told where to place it. I may be able to accomplish the task.
BTW The color you have chosen compliments your header beautifully!! :D Such a pleasant soothing color scheme. Just lovely.
Posted 4 years ago # -
I'd also like to know you did that justbeachy.
Posted 4 years ago # -
Can someone post a tutorial on how to add a background image with padding and the border? Thank you.
Posted 4 years ago # -
Hey guys I am so sorry... I figured it out by accident and didn't come back here. I will try to help, but honestly I fiddled with it so much that I'm not sure what exactly did it. Here is the section of code that deals with the body and the content for my site: the border is in the container, mine is 3px solid and #888. Couchmouse may want to pop in and tell about the padding? I may have changed it but like I said, I was determined, so I fiddled with it for quite a while before it worked. Look at your stylesheet and look for things like container, column etc and adjust the padding until it works for you. Fiddle with it, which is what I recommend. Save a copy of your original style.css file for safekeeping and to reload if you really mess something up. Then PLAY with it....load it...see how it looks...Play some more.... email me re my site if you need more help. JB.
body {
width: 900px;
margin: 20px auto;
font: .7em Verdana, Georgia, Sans-Serif;
text-align: center;
background: #fff;
color: #808080;
line-height: 17px;
background-color: #999999;
}#container {
width: 900px;
color: #000000;
background: #fff;
float: left;
text-align: left;
border: 3px solid #888;
}RE: Startuphustle... in your stylesheet (style.css)
under body add this to background:
background:#color url(images/imagename.jpg)
change out the /imagename.jpg with one of your own jpg or gif.
you will also have to alter whether you want it to repeat or not depending on the size of your image.
So either no-repeat, repeat-x or repeat-y
also padding is just:
padding: 0.4em 0 0.1em 0; added as a line in your css. the numbers are top, right, bottom, left. so: 0.4em is the top, 0 is the right, 0.1em is bottom, and 0 is left. Change the numbers to suit your situation. you can use em(s) or px, your choice.
Hope that makes sense?
Posted 4 years ago # -
Padding is added to the #content to space your post contents away from the left side of the #content_box/#container and provide a spacing between the right side of your post and the sidebar.
If your #container is 900px you can have say a width of 550px for your #content and 290px for your #sidebar which leaves you 60px to play with for your L&R spacings. Like so...
#content{width:550px; padding:0 30px 0px 30px; float:left}
#sidebar{width:290px; float:left}You can adjust all the above any way you like so long as the sum total of #content + #sidebar + all padding doesn't EXCEED the width of your #content_box and #container.
I prefer using px instead of em.
Posted 4 years ago # -
Ok I seemed to have cracked this by following the thread and adding the background colour of choice to the body class and then playing about with the 'core layout elements' mainly the 'content_box' 'content' and sidebar' adding a white background and playing about with the padding and widths.
I was then left with the bcakground colour showing through the navigation bar so I added a white background to that also. However, my site looks fine in firefox but not in IE which shows the header as seprated from the main body. please check at http://www.lotto4pros.com
Any suggestions appreciated. Also, I know this is a different topic but I can't seem to change the font on my site. I tried changing the font family in the body class but this doesn't show in FF or IE. Does anyone have a quick fix or should I start a new thread?
-- Lee
Posted 4 years ago # -
#header_img { display: none; position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #000; float: left; clear: both; }
In margin: 0 0 3.0em 0; you are adding a 3.0em margin to the bottom of your logo. Try changing it to margin: 0 0 0 0;
Your site looks ok in IE7 and FF problem is just IE6
Posted 4 years ago # -
Thx couchmouse. Didn't work I'm afraid. The font issue has resolved itself but why it took so long and after numerous saves and refreshes I don't know. is IE6 worth worrying about or alternatively does the site look that bad in IE6? -- Lee
Posted 4 years ago # -
Always save a good copy before making changes.
Add this, height:auto; background:#FFFFFF; to your #container so it looks like this..
#container { width: 770px; height:auto; background:#FFFFFF; margin: 15px auto 0 auto; }Then add this, background:#FFFFFF; to your #content_box so it looks like this..
#content_box { width: 770px; background:#fff; text-align: left; float: left; clear: both; }If you use FF get the colorpic plugin. One of its features is it allow you to see the DOM elements on a site.
Posted 4 years ago #
Reply
You must log in to post.