🖥️Happy Kids_PC 스킨 가이드

공통

포인트 컬러 일괄 변경하기

1. 컬러코드값 확인 Happy Kids 스킨에 적용되어 있는 기본 컬러 코드 #f0bc0c을 확인합니다.

1. 관리자 > 디자인 메뉴 접속

1. 스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

1. ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #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개)

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

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

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

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

1. 메뉴 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 209줄 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;}

1. 검색 영역의 밑줄border-bottom의 색상(#ffdc5e) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 77줄 77 #header .top_search .top_text_cont { border-bottom: 2px solid #ffdc5e; background: #ffffff;}

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

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

1. 공지사항 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 231줄 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;}

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

하단영역 변경하기

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

1. 고객센터 번호의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 386줄 386 .content_info .cs_center strong { display: block; padding: 8px 0 7px 0; color: #cccccc; font-size: 24px; line-height: 26px; font-weight: normal;}

1. 고객센터 상세내용의 텍스트color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 387줄 387 .content_info .cs_center p { color: #aba9a9;}

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

1. 무통장입금 번호의 상세내용 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 391줄 391 .content_info .bank_info p { color: #aba9a9;}

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

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

오른쪽배너 투데이뷰 영역수정

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

1. 금액 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 459줄 459 .scroll_right_cont .src_box strong { display: block; color: #f0bc0c;}

메인

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

1. Happy Kids 스킨을 다운로드 하였을 때, 진열타입은 기본형태로 설정되어있습니다. (모든스킨동일) 샘플사이트처럼 진열형태를 변경하고 싶다면 별도의 설정이 필요합니다. 리스트 상세설정은 상품 > 상품 노출형태관리 > 테마관리에서 변경하기 바랍니다.

1. 설정된 리스트형태에서 Over 했을때의 배경색background-color(배경색상)을 rgba를 아래와 같이 변경합니다. 기본설정으로 (background-color: rgba(0, 0, 0, 0.7);) 되어있는 영역이 있습니다. 변경 위치 css > goods > list.css 149줄 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% 투명도라고 해도 약간의 차이는 있다.

1. 상품명과 상품금액의 색상을 변경하기 위해서 아래 소스를 css시트에 추가합니다. 추가 위치 css > main > main.css 29줄 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;}

1. main/index.html 파일에 hk01 이라는 클래스를 main_goods_cont 이라는 클래스 뒤에 아래와 같이 적어줍니다. 추가 위치 main > index.html 26줄 26 <div class="main_goods_cont hk01"> <!-- 메인 상품 노출 -->{=includeWidget('goods/_goods_display_main.html', 'sno', '1')}<!-- 메인 상품 노출 --> </div>

추천테마 관련 상품 설정

1. Happy Kids 스킨을 다운로드 하였을 때, 추천테마 관련상품의 진열 타입은 기본형태로 설정되어있습니다. (모든스킨동일) 샘플사이트처럼 진열 형태를 변경하고 싶다면 별도의 설정이 필요합니다. 리스트 상세설정은 상품 > 메인페이지 상품진열 > 해당치환코드 {=includeWidget('goods/_goods_display_main.html','sno','2')}가 있는 부분에서 아래와 같이 수정하기 바랍니다. 해당 부분의 상품리스트 영역이 좁아 반드시 상품 영역은 가로 3개로 설정하는 것을 권장드립니다.

1. 기본셋팅되어 있는 노란색 테두리의 색상은border(테두리의 #ffdc5)변경해줍니다. 변경 위치 css > main > main.css 27줄 27 .main_content .best_prd .goods_list_cont { border: 1px solid #ffdc5e;}

인스타그램 기능 사용하기

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

1. 인스고 위젯 관리에서 치한코드 복사로 복사합니다.

1. 디자인페이지 수정에서 main/index.html 에 붙여 넣습니다. 코드는 현재의 소스와 동일하게 넣어주시면 샘플샵처럼 배경을 설정할 수 있습니다. 변경 위치 main > index.html 72줄 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>

2. CSS를 main > main.css 에 붙여 넣습니다. 코드는 현재의 소스와 동일하게 넣어주시면 샘플샵처럼 배경을 설정할 수 있습니다. 변경 위치 css > main > main.css 72줄 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;}

상품상세

상품 상세 변경하기

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

1. 정가의 color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 52줄 52 .item_detail_list del { color: #333333;}

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

1. 총합계금액의 color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 92줄 92 .item_tatal_box .total_amount dd { color: #f0bc0c; font-weight: bold;}

주문결제

장바구니 타이틀 영역 변경하기

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

1. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > order > order.css 17줄 17 .order_wrap .order_tit .page_on { color: #f0bc0c; font-weight: bold;}

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

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

주문서 금액 변경하기

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

1. 원 텍스트에 관련된 color(색상), font-size(크기) 값을 변경해줍니다. 변경 위치 css > order > order.css 137줄 137 .price_sum_cont .price_sum_list dd { color: #f0bc0c;}

최종금액, 결제하기버튼 변경하기

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

1. 결제하기 버튼의 background(배경색), border(#f0bc0c - 테두리색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 137줄 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;}