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背景颜色，但是你会丢失黑色左侧边栏中的纹理。

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

1 个答案: