🖥️Happy Kids_PC 스킨 가이드
Last updated
Last updated
공통
컬러코드값 확인 Happy Kids 스킨에 적용되어 있는 기본 컬러 코드 #f0bc0c을 확인합니다.
관리자 > 디자인 메뉴 접속
스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.
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개)
마우스 오버시 컬러 #e6b307도 검색하여 원하는 포인트 컬러 코드로 변경합니다.
로그인메뉴 영역의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;}
All카테고리 메뉴의img src(이미지) 값을 변경해줍니다.
해당 영역은 이미지 형태로 제작되었습니다. 경로를 찾아서 이미지를 변경해주세요.
<img src="/data/skin/front/스킨명/img/common/btn/btn_allmenu_open.png" alt="전체메뉴보기">
메뉴 텍스트의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;}
검색 영역의 밑줄border-bottom의 색상(#ffdc5e) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 77줄
77 #header .top_search .top_text_cont { border-bottom: 2px solid #ffdc5e; background: #ffffff;}
소메뉴의 오버 시, background(배경색=#f0bc0c) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 213줄 *221, 220, 216, 215줄 동일
213 #header .gnb .depth1 li a.active { background: #f0bc0c; color: #ffffff;}
소메뉴의 텍스트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:추가컬러값;}
공지사항 텍스트의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;}
장바구니 상품수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;}
퀵메뉴 영역의 텍스트color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 415줄
415 .foot_list ul li a { color: #cccccc;}
고객센터 번호의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;}
고객센터 상세내용의 텍스트color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 387줄
387 .content_info .cs_center p { color: #aba9a9;}
무통장입금 번호의 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;}
무통장입금 번호의 상세내용 color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 391줄
391 .content_info .bank_info p { color: #aba9a9;}
하단정보 텍스트의 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:원하는색상;}
하단영역의 타이틀 텍스트의color(색상) 값을 추가해줍니다.
변경 위치 css > layout > layout.css 383줄
383 .content_info h3 { padding: 0 0 5px 0; margin-top: -7px; color: #ffdc5e; font-size: 14px;}
상품명의 텍스트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;}
금액 텍스트의color(색상) 값을 변경해줍니다.
변경 위치 css > layout > layout.css 459줄
459 .scroll_right_cont .src_box strong { display: block; color: #f0bc0c;}
메인
설정된 리스트형태에서 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% 투명도라고 해도 약간의 차이는 있다.
상품명과 상품금액의 색상을 변경하기 위해서 아래 소스를 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;}
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>
기본셋팅되어 있는 노란색 테두리의 색상은border(테두리의 #ffdc5)변경해줍니다.
변경 위치 css > main > main.css 27줄
27 .main_content .best_prd .goods_list_cont { border: 1px solid #ffdc5e;}
관리자모드에서 프로모션-인스고위젯관리 를 설정해줍니다.
인스고 위젯 관리에서 치한코드 복사로 복사합니다.
디자인페이지 수정에서 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>
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;}
상품상세
상품명의 font-size(폰트사이즈) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 44줄
44 .item_detail_tit h3 { width: 405px; font-size: 18px;}
정가의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 52줄
52 .item_detail_list del { color: #333333;}
판매가의 font-size(폰트사이즈) 값을 변경해줍니다. color 색상을 추가할 수도 있습니다.
변경 위치 css > goods > goods.css 54줄
54 .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold;}
총합계금액의 color(색상) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 92줄
92 .item_tatal_box .total_amount dd { color: #f0bc0c; font-weight: bold;}
주문결제
장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 14줄
14 .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222;}
현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다.
변경 위치 css > order > order.css 17줄
17 .order_wrap .order_tit .page_on { color: #f0bc0c; font-weight: bold;}
다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 16줄
16 .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1;}
장바구니 타이틀 폰트 하단의 border-bottom(선) 값을 변경해줍니다.
변경 위치 css > order > order.css 13줄
13 .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb;}
금액에 관련된 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;}
원 텍스트에 관련된 color(색상), font-size(크기) 값을 변경해줍니다.
변경 위치 css > order > order.css 137줄
137 .price_sum_cont .price_sum_list dd { color: #f0bc0c;}
최종결제 금액 폰트의 color(색상) 값을 변경해줍니다.
변경 위치 css > order > order.css 323줄
323 .payment_final_total dd { display: inline-block; font-size: 30px; color: #f0bc0c;}
결제하기 버튼의 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;}
Happy Kids 스킨을 다운로드 하였을 때, 진열타입은 기본형태로 설정되어있습니다. (모든스킨동일) 샘플사이트처럼 진열형태를 변경하고 싶다면 별도의 설정이 필요합니다. 리스트 상세설정은 상품 > 상품 노출형태관리 > 테마관리에서 변경하기 바랍니다.
Happy Kids 스킨을 다운로드 하였을 때, 추천테마 관련상품의 진열 타입은 기본형태로 설정되어있습니다. (모든스킨동일) 샘플사이트처럼 진열 형태를 변경하고 싶다면 별도의 설정이 필요합니다. 리스트 상세설정은 상품 > 메인페이지 상품진열 > 해당치환코드 {=includeWidget('goods/_goods_display_main.html','sno','2')}가 있는 부분에서 아래와 같이 수정하기 바랍니다. 해당 부분의 상품리스트 영역이 좁아 반드시 상품 영역은 가로 3개로 설정하는 것을 권장드립니다.
