# Happy Kids\_PC 스킨 가이드

> #### 공통

<details>

<summary>포인트 컬러 일괄 변경하기</summary>

1. 컬러코드값 확인\
   Happy Kids 스킨에 적용되어 있는 기본 컬러 코드 **#f0bc0c**을 확인합니다. \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Ff6fIGAc1D2VDarqnINQk%2Fimage.png?alt=media\&token=acc2ab16-77d4-4820-af35-a952f4e39526)\


2) **관리자 > 디자인 메뉴 접속** &#x20;

3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FQfFEdWceUK2kNOaBzdmf%2Fimage.png?alt=media\&token=09b9a601-8274-4611-9ea8-ee9f42112677)\


4) ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#f0bc0c**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
   \
   button.css (총 56개) \
   board.css (총 13개) \
   common.css (총 18개) \
   common/layer.css (총 16개)\
   event.css (총 6개) \
   goods/goods.css (총 13개) \
   goods/list.css (총 4개) \
   layout.css (총 22개) \
   member.css (총 18개) \
   mypage.css (총 11개) \
   order.css (총 7개) \
   service.css (총 7개)

5. 마우스 오버시 컬러 **#e6b307**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.&#x20;

</details>

<details>

<summary>[상단 메뉴형] 메뉴영역 변경하기 - 검색창 포함</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FxUIlYGwdA7zBU8InziaL%2Fimage.png?alt=media\&token=726674f2-323d-4e44-91ac-188aabfb8762)

1. 로그인메뉴 영역의**color(컬러)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **43줄**\
   &#x20; `43` .top\_member\_box > li a {    display: inline-block;    padding: 4px 0 4px 10px;    color: #636363;    font-size: 11px;}

2) All카테고리 메뉴의**img src(이미지)** 값을 변경해줍니다. \
   해당 영역은 이미지 형태로 제작되었습니다. 경로를 찾아서 이미지를 변경해주세요.\
   `<img src="/data/skin/front/스킨명/img/common/btn/btn_allmenu_open.png" alt="전체메뉴보기">`

3. 메뉴 텍스트의**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **209줄**\
   &#x20; `209` #header .gnb .depth0 > li > a {    display: inline-block;    padding: 0 30px 0 30px;    font-size: 14px;    font-weight: bold;    text-align: center;    line-height: 49px;    color: #666666;}

4) 검색 영역의 밑줄**border-bottom의 색상(#ffdc5e)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **77줄**\
   &#x20; `77` #header .top\_search .top\_text\_cont {    border-bottom: 2px solid #ffdc5e;    background: #ffffff;}

5. 소메뉴의 오버 시, **background(배경색=#f0bc0c)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **213줄 \*221, 220, 216, 215줄 동일**\
   &#x20; `213` #header .gnb .depth1 li a.active {    background: #f0bc0c;    color: #ffffff;}

6) 소메뉴의 텍스트**color(색상)** 값을 추가해줍니다. \
   `변경 위치`  css > layout > layout.css **223줄**\
   &#x20; `223`  #header .gnb .depth1 li a {    display: block;    /\* width: 100%; \*/    padding: 5px 10px 7px 19px;    font-size: 12px;    color:추가컬러값;}

7. 공지사항 텍스트의**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **231줄**\
   &#x20; `231` .notice\_rolling ul li a {    overflow: hidden;    display: block;    padding: 7px 5px 7px 13px;    color: #636363;    text-overflow: ellipsis;    white-space: nowrap;    word-wrap: break-word;    line-height: 1;    background: url(../../img/icon/etc/icon\_notice.png) no-repeat 0 center;}

8) 장바구니 상품수**background(배경색)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **46줄**\
   &#x20; `46` .top\_member\_box > li strong {    display: inline-block;    padding: 2px 5px 3px 5px;    border-radius: 10px;    color: #636363;    background: #ffdc5e;}

</details>

<details>

<summary>하단영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fyjn4ljQVrgCzycUvrUpz%2Fimage.png?alt=media\&token=9f462d7f-1126-40e4-9704-b9deb0b3d287)

1. 퀵메뉴 영역의 텍스트**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **415줄**\
   &#x20; `415` .foot\_list ul li a {    color: #cccccc;}

2) 고객센터 번호의**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **386줄**\
   &#x20; `386` .content\_info .cs\_center strong {    display: block;    padding: 8px 0 7px 0;    color: #cccccc;    font-size: 24px;    line-height: 26px;    font-weight: normal;}

3. 고객센터 상세내용의 텍스트**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **387줄**\
   &#x20; `387` .content\_info .cs\_center p {    color: #aba9a9;}

4) 무통장입금 번호의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **390줄**\
   &#x20; `390` .content\_info .bank\_info strong {    display: block;    padding: 8px 0 7px 0;    color: #cccccc;    font-size: 24px;    line-height: 26px;    font-weight: normal;}

5. 무통장입금 번호의 상세내용 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **391줄**\
   &#x20; `391` .content\_info .bank\_info p {    color: #aba9a9;}

6) 하단정보 텍스트의 **color(색상)** 값을 추가해줍니다. \
   `변경 위치`  css > layout > layout.css **421줄**\
   &#x20; `421` .foot\_cont .foot\_info {    overflow: hidden;    margin: 0 auto;    padding: 50px 0 0 0;    text-align: center;    line-height: 14px;    color:원하는색상;}

7. 하단영역의 타이틀 텍스트의**color(색상)** 값을 추가해줍니다. \
   `변경 위치`  css > layout > layout.css **383줄**\
   &#x20; `383` .content\_info h3 {    padding: 0 0 5px 0;    margin-top: -7px;    color: #ffdc5e;    font-size: 14px;}

</details>

<details>

<summary>오른쪽배너 투데이뷰 영역수정</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FAtMmIRR1wXRrr07wrZb5%2Fimage.png?alt=media\&token=f92b2083-d385-4fff-9283-423aa1673867)

1. 상품명의 텍스트**color(컬러)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **458줄**\
   &#x20; `458` .scroll\_right\_cont .src\_box em {    display: block;    overflow: hidden;    width: 115px;    height: 43px;    color: #939393;    word-break: break-all;}

2) 금액 텍스트의**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **459줄**\
   &#x20; `459` .scroll\_right\_cont .src\_box strong {    display: block;    color: #f0bc0c;}

</details>

&#x20;&#x20;

> #### 메인

<details>

<summary>인기TOP3 상품리스트 변경 (마우스 Over시 컬러변경)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FpPRBYYLBLdT0QJDc8dmb%2Fimage.png?alt=media\&token=3d0c607d-b6f3-413c-858d-229ad2333ba3)

1. Happy Kids 스킨을 다운로드 하였을 때, 진열타입은 기본형태로 설정되어있습니다. (모든스킨동일)\
   샘플사이트처럼 진열형태를 변경하고 싶다면 별도의 설정이 필요합니다.\
   리스트 상세설정은 **상품 > 상품 노출형태관리 > 테마관리**에서 변경하기 바랍니다.\
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FOcahlpZzJlRauhPg0Txw%2Fimage.png?alt=media\&token=82263abb-2415-4df4-98cc-e27bcd445df6)

2) 설정된 리스트형태에서 Over 했을때의 배경색**background-color(배경색상)**&#xC744; rgba를 아래와 같이 변경합니다.\
   기본설정으로 (background-color: rgba(0, 0, 0, 0.7);) 되어있는 영역이 있습니다. \
   `변경 위치`  css > goods > list.css **149줄**\
   &#x20; `149` .item\_simple\_type .item\_simple\_over{display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; /\* z-index:10;\*/    background:transparent;    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#90000000);  background-color: rgba(255, 220, 94, 0.7);    font-size:12px;}\
   \
   ⚠️ IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다.    \
   컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값.    startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는 것.    \
   하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다.   &#x20;

3. 상품명과 상품금액의 색상을 변경하기 위해서 아래 소스를 **css시트에** 추가합니다. \
   `추가 위치`  css > main > main.css **29줄**\
   &#x20; `29` .hk01 .item\_name{font-size: 24px;color: #695f59;} .hk01 .item\_simple\_type .item\_cont span{font-size: 24px;color: #695f59;} .hk01 .item\_simple\_type .item\_cont del{color: #695f59;}

4) main/index.html 파일에 **hk01 이라는 클래스를** main\_goods\_cont 이라는 클래스 뒤에 아래와 같이 적어줍니다. \
   `추가 위치`  main > index.html **26줄**\
   &#x20; `26` \<div class=<mark style="background-color:orange;">"main\_goods\_cont hk01"</mark>>        \<!-- 메인 상품 노출 -->{=includeWidget(<mark style="background-color:orange;">'goods/\_goods\_display\_main.html', 'sno', '1'</mark>)}\<!-- 메인 상품 노출 -->    \</div>

</details>

<details>

<summary>추천테마 관련 상품 설정</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FeyhtIcpwmPfXC5fcDCqp%2Fimage.png?alt=media\&token=7201692d-748e-4681-b62f-e895700d27b3)

1. Happy Kids 스킨을 다운로드 하였을 때, 추천테마 관련상품의 진열 타입은 기본형태로 설정되어있습니다. (모든스킨동일)\
   샘플사이트처럼 진열 형태를 변경하고 싶다면 별도의 설정이 필요합니다.\
   리스트 상세설정은 **상품 > 메인페이지 상품진열 > 해당치환코드 {=includeWidget('goods/\_goods\_display\_main.html','sno','2')}**&#xAC00; 있는 부분에서 아래와 같이 수정하기 바랍니다.\
   해당 부분의 상품리스트 영역이 좁아 반드시 상품  영역은 가로 3개로 설정하는 것을 권장드립니다. \
   &#x20;![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FxMxFHs2K57y1K3dOjtRd%2Fimage.png?alt=media\&token=bec59a4e-58d5-4965-bcd2-371612675da0)

2) 기본셋팅되어 있는 노란색 테두리의 색상은**border(테두리의 #ffdc5)**&#xBCC0;경해줍니다.\
   `변경 위치`  css > main > main.css **27줄**\
   &#x20; `27` .main\_content .best\_prd .goods\_list\_cont {    border: 1px solid #ffdc5e;}

</details>

<details>

<summary>인스타그램 기능 사용하기</summary>

1. 관리자모드에서 **프로모션-인스고위젯관리** 를 설정해줍니다.&#x20;

2) 인스고 위젯 관리에서 **치한코드 복사**로 복사합니다.&#x20;

3. 디자인페이지 수정에서 **main/index.html** 에 붙여 넣습니다. \
   코드는 현재의 소스와 동일하게 넣어주시면 샘플샵처럼 배경을 설정할 수 있습니다.\
   `변경 위치`  main > index.html **72줄**\
   &#x20; `72` \<div class="insgo">\<div style="margin:0 0 10px 0; color:#356d8e; text-align:center;">\<div class="ins\_box">\<div class="ins\_tit">해피키즈 인스타그램\</div>{=includeWidget('proc/\_insgo.html', 'sno', '1')}\</div>\</div>\</div>
4. CSS를 **main > main.css** 에 붙여 넣습니다.\
   코드는 현재의 소스와 동일하게 넣어주시면 샘플샵처럼 배경을 설정할 수 있습니다.\
   `변경 위치`  css > main > main.css **72줄**\
   &#x20; `72` .insgo {    overflow: hidden;    padding: 60px 0 80px 0;    background: #eefbfe;}.ins\_box{position: relative;    width: 1200px;    margin: 0 auto;}.ins\_tit{ padding-bottom:20px;}

</details>

> #### 상품상세

<details>

<summary>상품 상세 변경하기</summary>

<img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FcMPqDZ5Iy5yQx04ND6LX%2Fimage.png?alt=media&#x26;token=a9102eb3-6597-4d46-a719-dcf554d4075e" alt="" data-size="original">

1. 상품명의 **font-size(폰트사이즈)** 값을 변경해줍니다. \
   `변경 위치`  css > goods > goods.css **44줄**\
   &#x20; `44` .item\_detail\_tit h3 {    width: 405px;    font-size: 18px;}

2) 정가의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > goods > goods.css **52줄**\
   &#x20; `52` .item\_detail\_list del {    color: #333333;}

3. 판매가의 **font-size(폰트사이즈)** 값을 변경해줍니다. color 색상을 추가할 수도 있습니다. \
   `변경 위치`  css > goods > goods.css **54줄**\
   &#x20; `54` .item\_price dd {    margin: -2px 0 0 0;    font-size: 16px;    font-weight: bold;}

4) 총합계금액의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > goods > goods.css **92줄**\
   &#x20; `92` .item\_tatal\_box .total\_amount dd {    color: #f0bc0c;    font-weight: bold;}

</details>

> #### 주문결제

<details>

<summary>장바구니 타이틀 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Ft7MXvNAric0VVTHChsxw%2Fimage.png?alt=media\&token=f0f03573-31dd-4ef6-a4cf-07cd06cd0ffb)

1. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **14줄**\
   &#x20; `14` .order\_wrap .order\_tit h2 {    float: left;    font-size: 28px;    color: #222222;}

2) 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **17줄**\
   &#x20; `17` .order\_wrap .order\_tit .page\_on {    color: #f0bc0c;    font-weight: bold;}

3. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다.\
   `변경 위치`  css > order > order.css **16줄**\
   &#x20; `16`  .order\_wrap .order\_tit ol li {    float: left;    font-size: 14px;    color: #d1d1d1;}

4) 장바구니 타이틀 폰트 하단의  **border-bottom(선)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **13줄**\
   &#x20; `13` .order\_wrap .order\_tit {    overflow: hidden;    border-bottom: 1px solid #dbdbdb;}

</details>

<details>

<summary>주문서 금액 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fv3h6yErOKXyzz5UDSQr0%2Fimage.png?alt=media\&token=f870f303-038d-4dee-8c13-b790441c3cd0)

1. 금액에 관련된 **color(색상), font-size(크기)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **138줄**\
   &#x20; `138` .price\_sum\_cont .price\_sum\_list dd strong {    font-weight: 700;    font-size: 18px;    color: #f0bc0c;}

2) 원 텍스트에 관련된 **color(색상), font-size(크기)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **137줄**\
   &#x20; `137` .price\_sum\_cont .price\_sum\_list dd {    color: #f0bc0c;}

</details>

<details>

<summary>최종금액, 결제하기버튼 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F5ajCQvsiSOgCjDoaQMHt%2Fimage.png?alt=media\&token=36c9a811-39cf-4ad8-8378-2a8e0eb44f84)

1. 최종결제 금액 폰트의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **323줄**\
   &#x20; `323` .payment\_final\_total dd {    display: inline-block;    font-size: 30px;    color: #f0bc0c;}

2) 결제하기 버튼의 **background(배경색), border(#f0bc0c - 테두리색상)** 값을 변경해줍니다.\
   `변경 위치`  css > order > order.css **137줄**\
   &#x20; `137`  .btn\_order\_buy {    display: inline-block;    width: 300px;    height: 61px;    line-height: 59px;    color: #fff;    font-size: 20px;    border: 1px solid #f0bc0c;    background: #f0bc0c;    text-align: center;}

</details>
