Supprimer l'arrière-plan en excès de thème personnalisé Drupal

Question

J'ai converti un thème de freecsstemplates.org en un thème Drupal et j'essaie de limiter la quantité d'arrière-plan que je vois sur les côtés de la zone de contenu principal Je voudrais aussi réduire la sidebar sur la gauche d'environ la moitié. Ps. Je sais à peu près rien CSS

vous pouvez voir le thème à ccg121.it.cx

le fichier 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

Si vous êtes un noob avec CSS, je suggère d'installer Firebug et apprendre à le connaître très bien. Il est inestimable pour travailler avec CSS ainsi que d'autres déboguages. D'après ce que je peux voir, vous ne serez pas en mesure de limiter les côtés de la zone de contenu principal ou de réduire la barre latérale sans apporter de modifications à l'image suivante, http://ccg121.it.cx/images/img03.jpg.

Si votre arrière-plan n'était pas une image, vous pouvez réduire la principale zone de contenu en ajustant largeur,

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

la barre latérale pourrait se rétrécir en ajustant la largeur

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

Vous pouvez changer la largeur dans le CSS tout ce que vous voulez, mais cela ne va pas changer la façon dont l'arrière-plan regarde jusqu'à ce que l'image est mise à jour. Je suggère de supprimer l'image tous ensemble et en utilisant la couleur de fond CSS, mais vous perdrez la texture dans la barre latérale gauche noire.