Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I was looking at various websites. I really liked the edge to edge look: see woothemes.com (the blue background). I did a little research and learned about classes, id's, and the rest. I tried to implement it in the Wordpress Twenty Twelve theme. I had trouble but finally "figured it out". Can you tell me if this is the "right way" to do this?

My CSS:

/* Home page styles (classes and id's) */
#welcome-home {
background-color: #000000;
color: #FFFFFF;
margin-left: -5000px;
margin-right: -250px;
padding-top: 20px;
padding-left: 5000px;
padding-right: 315px;
position: absolute;
}

Also, the responsiveness messes with the look. Other sites like this are not responsive. Can you tell me how to fix this (remove responsiveness) in Twenty Twelve.

Thank you all in advance for your support!

share|improve this question
add comment

closed as off topic by Wyck, Michael, Johannes Pille, Rarst Jun 13 '13 at 16:06

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

3 Answers

up vote 0 down vote accepted

I figured it out on my own. Thanks all for your help. I realized that my previous CSS was too complicated. I wanted to achieve a sort of section look (like I said - woothemes.com - the first section that is blue). My updated and working code:

/* Home page styles (classes and id's) */
#welcome-home {
    background-color: #2B98CF;
    color: #FFFFFF;
    margin-left: -3000px;
/* Sets the color far to the left */
    padding-left: 3000px;
/* Pushes the text back from the left */
    margin-right: -3000px;
/* Sets color far to the right */
    padding-right: 3000px;
/* Pushes the text back from the right */
    padding-top: 20px;
    padding-bottom: 20px;
/* Creates some breathing room */
}
share|improve this answer
add comment

If you need to set a background for the entire page, just set it to the body.

body {
    background: #000000;
}
share|improve this answer
    
Thanks for the response. I don't want the entire page, but just a section (the blue background on the first part of the home page on woothemes.com). I want to know if my code is the "correct" way of doing this. It works, but it may not be the most efficient way of doing this. –  Shaan Singh Jun 13 '13 at 13:45
add comment

You could make this a class and then change the body tag in your header.php file to be <body class="welcome-home">. A CSS class looks like this: .welcome-home with a period instead of a pound sign. Or you may want to define it as body.welcome-home.

share|improve this answer
    
Thanks for the response. I don't want the entire page, but just a section (the blue background on the first part of the home page on woothemes.com). I want to know if my code is the "correct" way of doing this. It works, but it may not be the most efficient way of doing this. –  Shaan Singh Jun 13 '13 at 13:45
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.