Удалить лишний фон из пользовательской конвертированной темы Drupal

Question

Я преобразовал тему из freecsstemplates.org в тему drupal и пытаюсь ограничить объем фона, который я вижу по сторонам основной области содержимого. Я также хотел бы уменьшить боковую панель слева примерно наполовину.Ps.Я почти ничего не знаю о CSS

. Вы можете увидеть тему по адресу ccg121.it.cx

файл style.css :

/*
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

Если вы новичок с CSS, я бы предложил установить Firebug и узнать его очень хорошо.Это неоценимо для работы с CSS, а также для другой отладки.

Из того, что я вижу, вы не сможете ограничить стороны основной области содержимого или сжать боковую панель, не внося изменений в следующее изображение, http://ccg121.it.cx/images/img03.jpg.

Если ваш фон не был изображением, вы можете уменьшить основную область содержимого, отрегулировав ширину, в

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

боковую панель можно уменьшить, отрегулировав ширину в

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

Вы можете изменять ширину в CSS сколько угодно, но это не изменит внешний вид фона, пока изображение не будет обновлено.Я бы предложил удалить все изображение вместе и использовать цвет фона CSS, но вы потеряете текстуру в черной левой боковой панели.