2010-12-15 5 views
0

freecsstemplates.org에서 테마를 drupal 테마로 변환하고 주 컨텐트 영역의 측면에서 볼 수있는 부분을 제한하려고합니다. 사이드 바를 왼쪽으로 약 절반 정도. 시. 당신은 CSS와 멍청한 놈 경우사용자 정의 배경에서 초과 배경을 제거하십시오. 변환 된 테마 Drupal

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

답변

2

, 내가 Firebug를 설치 제안 : 당신이 ccg121.it.cx

있는 style.css 파일에서 테마를 볼 수 있습니다 CSS

에 대해 거의 아무것도 몰라 , 그리고 그것을 아주 잘 알기. 다른 디버깅뿐만 아니라 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 배경색을 사용하는 것이 좋지만 검은 색 왼쪽 세로 막대에서 텍스처가 손실됩니다.

관련 문제