갤러리 스킨을 받아서 홈페이지에 적용하려고 하는데 배경색 바꾸는 방법 부탁 드립니다.

2017-05-26 (금) 12:35:56 3,626

갤러리 스캔을 다운 받았는데요

홈페이지 스킨으로 적용시켰는데 게시판 이미지와 목록 뒷부분만 검정색으로 나와서

어떻게 수정해야 할지 몰라서 부탁 드립니다.

전 흰색으로 수정하고 싶습니다.

초보라 내용은 잘모르고 간단하게 적용만 시키는 수준인데 아무리 찾아봐도 모르겠어서 부탁 드립니다.

dart님의 슬라이딩 갤러리 입니다.

https://sir.kr/g5_skin/9381?sfl=wr_subject%7C%7Cwr_content&stx=%EA%B0%A4%EB%9F%AC%EB%A6%AC&page=6 

|

답변 4개

2018-05-13 (일) 07:23:34

넵 감사합니다.

 .showcase-content-container
 {
  background-color: #000;
 } 

이부분을 변경 해보시기 바랍니다. 

2017-05-26 (금) 19:46:34

말씀하신대로 하나씩 전체 다 바꿔 봤는데 변화가 없습니다.

어딜 바꿔야 할까요?

/* Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;vertical-align:baseline}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}body{line-height:1}a img{border:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}table,td,th{vertical-align:middle}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}button::-moz-focus-inner{border:0}

body
{
 font-size: 12px;
 line-height: 1.5;
 margin-top: 20px;
 margin-bottom: 30px;
}

a
{
 color: #ff377c;
}

p
{
 margin-bottom: 10px;
}

h1
{
 font-size: 20px;
 margin-bottom: 5px;
 font-weight: bold;
}

h2
{
 font-size: 16px;
 margin-bottom: 5px;
 font-weight: bold;
}

.menu
{
 margin-bottom: 40px;
 text-align: center;
 color: #999;
}

 .menu a
 {
  color: #999;
 }
 
 .menu a.active
 {
  font-weight: bold;
 }


/* Showcase
-------------*/

#awOnePageButton .view-slide
{
 display: none;
}

/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load
{
 height: 470px; /* Same as showcase javascript option */
 overflow: hidden;
}

/* Container when content is shown as one page */
.showcase-onepage
{
 /**/
}

/* Container when content is shown in slider */
.showcase
{
 position: relative;
 margin: auto;
}

 .showcase-content-container
 {
  background-color: #000;
 }
 
 /* Navigation arrows */
 .showcase-arrow-previous, .showcase-arrow-next
 {
  position: absolute;
  background: url('../images/arrows.png');
  width: 33px;
  height: 33px;
  top: 220px;
  cursor: pointer;
 }
 
 .showcase-arrow-previous
 {
  left: -60px;
 }
 
 .showcase-arrow-previous:hover
 {
  background-position: 0px -34px;
 }
 
 .showcase-arrow-next
 {
  right: -56px;
  background-position: -34px 0;
 }
 
 .showcase-arrow-next:hover
 {
  background-position: -34px -34px;
 }
 
 /* Content */
 .showcase-content
 {
  background-color: #000;
  text-align: center;
 }
  
  .showcase-content-wrapper
  {
   text-align: center;
   height: 470px;
   width: 700px;
   display: table-cell;
   vertical-align: middle;
  }
  
  /* Styling the tooltips */
  .showcase-plus-anchor
  {
   background-image: url('../images/plus.png');
   background-repeat: no-repeat;
  }
  
  .showcase-plus-anchor:hover
  {
   background-position: -32px 0;
  }
  
  div.showcase-tooltip
  {
   background-color: #fff;
   color: #000;
   text-align: left;
   padding: 5px 8px;
   background-image: url(../images/white-opacity-80.png);
  }
  
  /* Styling the caption */
  .showcase-caption
  {
   color: #000;
   padding: 8px 15px;
   text-align: left;
   position: absolute;
   bottom: 10px; left: 10px; right: 10px;
   display: none;
   background-image: url(../images/white-opacity-80.png);
  }
  
 .showcase-onepage .showcase-content
 {
  margin-bottom: 10px;
 }
 
 /* Button Wrapper */
 .showcase-button-wrapper
 {
  clear: both;
  margin-top: 10px;
  text-align: center;
 }
 
  .showcase-button-wrapper span
  {
   margin-right: 3px;
   padding: 2px 5px 0px 5px;
   cursor: pointer;
   font-size: 12px;
   color: #444444;
  }
 
  .showcase-button-wrapper span.active
  {
   color: #fff;
  }
 
 /* Thumbnails */
 .showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
 {
  background-color: #000;
 }
 
 .showcase-thumbnail-wrapper
 {
  overflow: hidden;
 }
  
  .showcase-thumbnail
  {
   width: 120px;
   height: 90px;
   cursor: pointer;
   border: solid 1px #333;
   position: relative;
  }
  
   .showcase-thumbnail-caption
   {
    position: absolute;
    bottom: 2px;
    padding-left: 10px;
    padding-bottom: 5px;
   }
   
   .showcase-thumbnail-content
   {
    padding: 10px;
    text-align: center;
    padding-top: 25px;
   }
   
   .showcase-thumbnail-cover
   {
    background-image: url(../images/black-opacity-40.png);
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
   }
  
  .showcase-thumbnail:hover
  {
   border: solid 1px #999;
  }
  
   .showcase-thumbnail:hover .showcase-thumbnail-cover
   {
    display: none;
   }
  
  .showcase-thumbnail.active
  {
   border: solid 1px #999;
  }
  
   .showcase-thumbnail.active .showcase-thumbnail-cover
   {
    display: none;
   }
 
 .showcase-thumbnail-wrapper-horizontal
 {
  padding: 10px;
 }
 
  .showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
  {
   margin-right: 10px;
   width: 116px;
  }
 
 .showcase-thumbnail-wrapper-vertical
 {
  padding: 10px;
 }
 
  .showcase-thumbnail-wrapper-vertical .showcase-thumbnail
  {
   margin-bottom: 10px;
  }
  
 .showcase-thumbnail-button-backward,
 .showcase-thumbnail-button-forward
 {
  padding: 7px;
  cursor: pointer;
 }
 
 .showcase-thumbnail-button-backward
 {
  padding-bottom: 0px;
  padding-right: 0px;
 }
 
  .showcase-thumbnail-button-backward .showcase-thumbnail-vertical,
  .showcase-thumbnail-button-forward .showcase-thumbnail-vertical,
  .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal,
  .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
  {
   background-image: url(../images/arrows-small.png);
   background-repeat: no-repeat;
   display: block;
   width: 17px;
   height: 17px;
  }
  
  .showcase-thumbnail-button-backward .showcase-thumbnail-vertical
  {
   background-position: 0 -51px;
   margin-left: 55px;
  }
  .showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical
  {
   background-position: -17px -51px;
  }
  
  .showcase-thumbnail-button-forward .showcase-thumbnail-vertical
  {
   background-position: 0 -34px;
   margin-left: 55px;
  }
  .showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical
  {
   background-position: -17px -34px;
  }
  
  .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
  {
   background-position: 0 -17px;
   margin-top: 40px;
   margin-bottom: 40px;
  }
  .showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal
  {
   background-position: -17px -17px;
  }
  
  .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal
  {
   background-position: 0 0;
   margin-top: 40px;
   margin-bottom: 40px;
  }
  .showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal
  {
   background-position: -17px 0;
  }
  
  /* Hide button text */
  .showcase-thumbnail-button-forward span span,
  .showcase-thumbnail-button-backward span span
  {
   display: none;
  }
 


/* Clear (used for horizontal thumbnails)
-------------------------------------------*/

.clear
{
 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
 float: none;
}

style_show.css 에서  #000 를 하나씩 변경하면서 테스트 해보세요.

답변을 작성하려면 로그인이 필요합니다.