从自定义转换主题Drupal中删除多余的背景

Question

I converted a theme from freecsstemplates.org into a drupal theme and am trying to limit how much of the background i see on the sides of the main content area I would also like to shrink the sidebar on the left by about half. Ps. I know pretty much nothing about CSS

you can see the theme at ccg121.it.cx

the style.css file:

/*
Design by Free CSS Templates
www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
 margin: 30px 0px 0px 0px;
 padding: 0;
 background: #7E776F url(images/img01.jpg) repeat left top;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #3E3B36;
}

h1, h2, h3 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 color: #F0E9E9;
}

h1 {
 font-size: 2em;
}

h2 {
 font-size: 2.8em;
}

h3 {
 font-size: 1.6em;
}

p, ul, ol {
 margin-top: 0;
 line-height: 180%;
}

ul, ol {
}

a {
 text-decoration: none;
 color:#;
}

a:hover {
}

#wrapper {
 margin: 0 auto;
 padding: 0;
}

/* Header */

#header-wrapper {
 height: 100px;
 background: #3C3230;
 border-bottom: 10px solid #4F4440;
}

#header {
 width: 950px;
 margin: 0 auto;
 padding: 0px 0px 0px 30px;
}

/* Logo */

#logo {
 width: 250px;
 height: 140px;
 margin: 0;
 padding: 0;
 background: url(images/img07.jpg) no-repeat left top;
 color: #34312C;
}

#logo h1, #logo p {
 margin: 0;
 padding: 0;
 letter-spacing: -2px;
 text-align: center;
 text-transform: capitalize;
 font-family: Georgia, "Times New Roman", Times, serif;
}

#logo h1 {
 margin: 0px 0px -20px 0px;
 padding: 20px 0px 0px 0px;
 font-size: 37px;
 color: #4D8D99;
}

#logo h1 a {
 color: #F0E9E9;
}

#logo p {
 margin: 0px;
 padding: 0px;
 font-size: 26px;
} 

#logo a {
 border: none;
 background: none;
 text-decoration: none;
 color: #34312C;
}


/* Menu */

#menu {
 width: 250px;
 margin: 20px auto 20px auto;
 padding: 0;
}

#menu ul {
 margin: 0;
 padding: 50px 0px 0px 0px;
 list-style: none;
 line-height: normal;
}

#menu li {
 border-bottom: 1px dashed #191918;
}

#menu a {
 display: block;
 width: 250px;
 height: 27px;
 margin: 4px 0px;
 padding: 8px 0px 0px 20px;
 text-decoration: none;
 text-transform: capitalize;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: normal;
 color: #FFF;
}

#menu a:hover, #menu .current_page_item a {
 background: url(images/img06.jpg) no-repeat left top; 
 text-decoration: none;
}

#menu .current_page_item a {
}

/* Page */

#page {
 width: 1000px;
 margin: 0 auto;
 background: url(images/img04.jpg) repeat-y left top;
}

#page-bgtop {
 background: url(images/img02.jpg) no-repeat left top;
}

#page-bgbtm {
 overflow: hidden;
 width: 920px;
 padding: 20px 40px 20px 40px;
 background: url(images/img03.jpg) no-repeat left bottom;
}
/* Content */

#primary {
 background:gray;
}

#primary a{
 color:white;
}

#content {
 float: right;
 width: 550px;
 padding: 50px 20px 0px 20px;
}

/* Sidebar */

#sidebar {
 float: left;
 width: 250px;
 margin: 0px;
 padding: 0px 0px 80px 10px;
 color: #787878;
}

#sidebar ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#sidebar li {
 margin: 0;
 padding: 0;
}

#sidebar li ul {
 margin: 0px 0px 0px 20px;
 padding-bottom: 30px;
}

#sidebar li li {
 line-height: 35px;
 border-bottom: 1px dashed #191918;
 border-left: none;
}

#sidebar li li span {
 display: block;
 margin-top: -20px;
 padding: 0;
 font-size: 11px;
 font-style: italic;
}

#sidebar li li a {
 color: #787878;
}

#sidebar li li a:hover {
 color: #F0E9E9;
}

#sidebar h2 {
 height: 38px;
 letter-spacing: -.5px;
 font-size: 1.8em;
}

#sidebar p {
 margin: 0 0px;
 padding: 0px 20px 20px 20px;
}

#sidebar a {
 border: none;
}

#sidebar a:hover {
}


/* Footer */

#footer {
 width: 920px;
 height: 80px;
 margin: 0 auto;
 padding: 0px 0 15px 310px;
 font-family: Arial, Helvetica, sans-serif;
}

#footer p {
 margin: 0;
 padding-top: 20px;
 line-height: normal;
 font-size: 9px;
 text-transform: uppercase;
 text-align: center;
 color: #69635E;
}

#footer a {
 color: #474440;
}

Answer 1

If you are a noob with CSS, I would suggest installing Firebug, and getting to know it very well. It is invaluable for working with CSS as well as other debugging.

From what I can see, you are not going to be able to limit the sides for the main content area or shrink the sidebar without making changes to the following image, http://ccg121.it.cx/images/img03.jpg.

If your background wasn't an image, you could shrink the main content area by adjusting width in,

#page-bgbtm {
  background:url("images/img03.jpg") no-repeat scroll left bottom transparent;
  overflow:hidden;
  padding:20px 40px;
  width:920px;
}

the sidebar could shrink by adjusting the width in

#sidebar {
  color:#787878;
  float:left;
  margin:0;
  padding:0 0 80px 10px;
  width:250px;
}

You can change the width in the CSS all you want, but that's not going to change how the background looks until the image is updated. I would suggest removing the image all together and using CSS background color, but you will lose the texture in the black left sidebar.