CSS Driving Me Crazy - Super Talented Warrior Required

by Kevin Phillips

Posted: 14 years ago 11 replies

PROGRAMMING

Hi Guys

Hope someone can help here. I am trying to get a background color or image on a wordpress theme. Most themes make this simple with the background color or image already in the css stylesheet but the theme i am using does not (wp Article Directory Theme by Dimox)

my site: elitearticledirectory.com

Does anyone know the code i need to insert into the css to be able to achieve a background color or image.

Any help would be much appreciated

All the best

Kevin

#crazy #css #driving #required #super #talented #warrior #wordpress #wp theme #wp theme help needed

Kevin Phillips 14 years ago

Just to show anyone looking at this thread what happens when i change background color using this code in the body:

background-color:#b0c4de;

Pic below is result ....

Hope this helps and someone can give me an answer

All The best

Kevin
- Thanks
Signature

Enjoy Golf!? then check out my website at kpgolfpro.com
{{ DiscussionBoard.errors[2591701].message }}
RichardHK 14 years ago

background: url(../images/bg.jpg) repeat;

Kevin,

Put the above in your body statements area. Change the ../images/bg.jpg image name and location to suit, of course.

That bg color is being inherited by the content area. Put a background: #fff; or whatever inside content to put white (in this case) on top of body background.
- [ 1 ] Thanks
- 1 reply
Signature

Richard, Hong Kong
Business Consulting
{{ DiscussionBoard.errors[2591713].message }}
- Kevin Phillips 14 years ago
  
  Richard
  
  Thanks for that ... It was exactly what i was looking for.
  
  I think though that the theme is gonna take a lot of work because each sidebar, header, content needs to be #FFF background and then i am coming up against padding issues as the text is against the content wall etc.
  
  May be a bit much for me at the moment but i will plod away.
  
  Thanks once again
  
  Kevin
  
  Thanks
  
  Signature
  
  Enjoy Golf!? then check out my website at kpgolfpro.com
  
  {{ DiscussionBoard.errors[2591948].message }}
RichardHK 14 years ago

Kevin,

You have a <div id="wrapper> just inside your <body> and around all those components (header, sidebars, container and footer) so simply put the background: color into the CSS #wrapper like this:

#wrapper {
width:990px;
margin:0 auto;
border-top:5px solid #EEE;
background: #fff; <-- or whatever colour you want
}
PS. As you are from Scotland I am using the proper spelling of colour.
- [ 1 ] Thanks
- 1 reply
Signature

Richard, Hong Kong
Business Consulting
{{ DiscussionBoard.errors[2592056].message }}
- Kevin Phillips 14 years ago
  
  Thanks once again, will go and give this a shot.
  
  Sorry i can't reciprocate with the correct spelling of colour, color - for your location
  
  Be in touch when i get a chance to do this
  
  All The best
  
  Kevin
  
  Thanks
  
  Signature
  
  Enjoy Golf!? then check out my website at kpgolfpro.com
  
  {{ DiscussionBoard.errors[2592080].message }}
Kevin Phillips 14 years ago

Hi Richard

Thanks for teaching me some basic CSS.

I have gone ahead and done the latest advice and its done the job. (not sure about the background, a bit rushed!) anyway i digress..

If you could take a quick look at the site you will see what i meant by padding required for the sides of the site where the content is too close.

This is how the site turned out - Not balanced

Can you work your magic and aid me one more time?

Either way thanks once again

Kevin
- Thanks
Signature

Enjoy Golf!? then check out my website at kpgolfpro.com
{{ DiscussionBoard.errors[2592128].message }}
RichardHK 14 years ago

Good news Kevin. I see what you mean by the background image. Errr.. a good start.

Well past my bedtime now and just popping in to see if you fixed the backgrounds. Will take another look in the morning (Hong Kong time) for the margins and selection box problems. Another Warrior may step in before me though - no problem guys!

I'm from the UK orginally, Merrie England, so like to spell correctly. But have to concede to the mighty US when working with computers.
- Thanks
Signature

Richard, Hong Kong
Business Consulting
{{ DiscussionBoard.errors[2592682].message }}
RichardHK 14 years ago

Hi Kevin,

Your content padding needs adjusting to move it away from left-hand side margin. But in adding pixels here, you then need to reduce width to make room for it.

#content {
width:540px; <-- HERE
float:left;
padding:0 10px 20px 0; <-- and HERE
overflow:hidden;
}

So for making left padding 10px, reduce width to 530px like this:

#content {
width:530px; <-- HERE
float:left;
padding:0 10px 20px 10px; <-- and HERE
overflow:hidden;
}

You can do same margin-left fix for your header if you want to shift that to right.

#header {
height:137px;
border-bottom:3px solid #EAEAEA;
margin-bottom:28px; <--- MODIFY this
position:relative;
}

#header {
height:137px;
border-bottom:3px solid #EAEAEA;
margin:0 0 28px 10px; <--- to this
position:relative;
}

For your top right-side menu, just add some room, now zero:

#top-nav{
position:absolute;
top:20px;
right: 10px; <-- HERE (originally 0)
list-style:none;
}

Not sure what is up with your right-hand side drop down boxes yet. Your system has generated a real rats-nest of commands. I prefer to see CSS as I have written above.

Will try and find some time to look again soon.

Richard
- [ 1 ] Thanks
Signature

Richard, Hong Kong
Business Consulting
{{ DiscussionBoard.errors[2595359].message }}
Kevin Phillips 14 years ago

Richard

Your help is more than appreciated

Thanks

kevin
- Thanks
- 1 reply
Signature

Enjoy Golf!? then check out my website at kpgolfpro.com
{{ DiscussionBoard.errors[2595642].message }}
- RichardHK 14 years ago
  
  No sweat Kevin, literally. I am sure you know how to do this stuff now.
  
  Seems your site is working quite well and centred Ok. Must have swatted more than enough css buggies with these changes.
  
  Tons of articles on your site. Have bookmarked to return and may as well send you some of my future stuff.
  
  Best regards,
  Richard
  
  Thanks
  
  Signature
  
  Richard, Hong Kong
  Business Consulting
  
  {{ DiscussionBoard.errors[2596514].message }}
Kevin Phillips 14 years ago

Hi Neal

Yes Richard helped me out thanks.

Oh Richard ... No swatting anywhere else you gave me great instructions and i just followed them.

And because of that i know a little bit more now

Thanks once again

All the best

Kevin
- Thanks
Signature

Enjoy Golf!? then check out my website at kpgolfpro.com
{{ DiscussionBoard.errors[2601450].message }}