📱Happy Kids_Mobile 스킨 가이드
Last updated
Last updated
공통
컬러코드값 확인 Happy Kids 스킨에 적용되어 있는 기본 컬러 코드 #f0bc0c을 확인합니다.
디자인 스킨 리스트 접속 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트
스타일시트/CSS 변경 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.
ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #f0bc0c를 검색하여 원하는 포인트 컬러 코드로 변경합니다. gd_button.css (총 154개) gd_common.css (총 5개) gd_layout.css (총 1개) gd_plus_review.css (총 7개) goods/goods.css (총 1개) goods/list/list_01.css (총 4개) goods/list/list_02.css (총 4) goods/list/list_04.css (총 4개) goods/list/list_06.css (총 4개) goods/list/list_07.css (총 4개) goods/list/list_09.css (총 3개) goods/list/list_11.css (총 7개) mypage/mypage.css (총 10개) order/order.css (총 12개) proc/proc.css (총 2개)
로고가 있는 가장 상단의background(배경색) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 15, 16줄
15 #header_wrap header .header_box { background: #aedcf8; height: 61px;}
16 .h_logo { padding: 20px 0 40px 0; margin: 0 auto; line-height: 0; text-align: center; background: #aedcf8; z-index: 300;}
장바구니의 갯수가 노출되는background(배경색) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 36줄
36 #header_wrap header .header_box .cart_count { position: absolute; top: 8px; left: 20px; display: block; padding: 3px 6px 1px 6px; line-height: 15px; border-radius: 100%; color: #636363; background: #fff2c2; vertical-align: middle; font-size: 12px;}
상단 메뉴의 텍스트font-size(폰트사이즈), color(색상) 값을 변경해줍니다.
변경 위치 main > main.css 15줄
15 .main .main_top_menu li a { display: block; padding: 13px 0 13px 0; font-size: 14px; color: #333333;}
슬라이드메뉴 영역의background(배경색) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 72줄
72 #wrap nav .nav_bg_box .nav_box { position: fixed; top: 0; left: 0; width: 290px; height: 100%; margin: 0 0 0 -290px; background: #ffe999; z-index: 1001;}
로그인, 회원가입 텍스트의background(배경색) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 87줄
87 .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #666666;}
브랜드. 카테고리. 커뮤니티 텍스트의color(색상)값을 변경해줍니다.
변경 위치 css > gd_layout.css 108줄
108 .nav_tabmenu_box .nav_tab_list .nav_tabmenu_tit { display: block; margin: 0 25px; padding: 9px 0; font-size: 17px; color: #666666; font-weight: bold; background: url(../img/icon/icon_left_arrow.png) no-repeat right center; background-size: 12px 7px; border-top: 1px solid #e0cf8f;}
카테고리 텍스트의color(색상) 값을 변경해줍니다.
변경 위치 css > proc.css 7줄
7 .category_side > li a { position: relative; display: block; padding: 4px 0 4px 0; font-size: 19px; color: #666666;}
카테고리On일때엔 font-weight(폰트굵기) 값을 변경해줍니다.
변경 위치 css > proc.css 11줄
11 .category_side > li > a.on { font-weight: bold;}
실선의border-top(선 컬러 - #e0cf8f) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 111줄
111 .category_side > li ul { display: none; border-top: 1px solid #e0cf8f;}
변경 위치 css > proc.css 6줄
6 .nav_tabmenu_box .nav_tab_list > * { padding: 17px 0; margin: 0 25px; border-top: 1px solid #e0cf8f;}
하단영역의 배경색인background(배경색) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 155줄,161줄,131줄,137줄
155 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold; }
161 #footer .main_info_box { padding: 0 10px; background: #6b6867;}
131 #footer footer .ft_button_box { padding: 0 25px; background: #6b6867;}
137 #footer footer .ft_info2_box { background: #6b6867;}
top텍스트의color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 155줄
155 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold;}
top버튼과 아래영역의 구분선인border-bottom에 #787878 색상 값을 변경해줍니다.
변경 위치 css > gd_layout.css 155줄
155 #footer footer .ft_btn_top a { display: inline-block; width: 100%; height: 46px; border-top: 1px solid #505050; border-bottom: 1px solid #787878; text-align: center; color: #ffffff; background: #6b6867; line-height: 46px; font-size: 13px; font-weight: bold;}
고객센터,무통장입금 텍스트의 노란색은color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 164줄
164 #footer .main_info_box .main_info dl dt { font-size: 13px; margin: 0 5px; font-weight: bold; color: #ffdc5e;}
고객센터 번호의color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 169줄
169 #footer .main_info dl dd p.phone a { font-size: 22px; color: #cccccc;}
고객센터 상세내용의color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 170줄
170 #footer .main_info dl dd p.business_hours { font-size: 14px; color: #b5b4b3;}
무통장입금 번호의color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 175줄
175 #footer .main_info dl dd .account_num { font-size: 22px; color: #cccccc;}
무통장입금 정보의color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 176줄
176 #footer .main_info dl dd .account_bank { font-size: 14px; color: #b5b4b3; padding: 11px 0 0;}
174 #footer .main_info dl dd .account_holder { font-size: 14px; color: #b5b4b3;}
회사소개,이용약관,개인정보처리방침,이용안내 폰트color(색상) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 151줄
151 #footer footer .ft_copy { padding-bottom: 23px; color: #e0e0e0; font-size: 12px; text-align: center; font-style: normal;}
쇼핑몰정보들의color(색상), font-size(폰트크기) 값을 변경해줍니다.
변경 위치 css > gd_layout.css 142줄
142 #footer footer .ft_info2_box .ft_address { padding: 0 50px 0 50px; text-align: center; font-size: 12px; color: #e0e0e0; word-break: keep-all;}
메인
✔️ Happy Kids 모바일 스킨은 추천 테마에 노란색 테두리가 설정되어 있습니다.
테두리를 변경하기 위해서border(테두리)의 색상:#fee99e, 테두리굵기:10px의 값을 변경해줍니다.
변경 위치 css > main > main.css 27줄
27 .recommend_prd { position: relative; padding: 97px 5px 0; border: #fee99e 10px solid;}
관리자모드에서 모바일샵 → 모바일샵 디자인 관리 → 메인폴더 → 쇼핑몰메인본문 경로를 찾습니다.
복사한 소스를 아래 영역처럼 main/index.html에 붙여넣습니다.(코드값은 아래와 다를수 있음)
복사 위치 main > index.html 48줄
<div style="padding:30px 20px; background: #eefbfe;">
<div style="color:#695f59; font-size:17px; text-align:center; font-weight:bold; padding-bottom:10px;">해피키즈 인스타그램</div>
{=includeWidget('proc/_insgo.html', 'sno', '2')}
</div>
상품상세
상품명 텍스트color(색상),font-size(폰트크기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 339줄
339 .goods_view .detail_info h3 { font-size: 18px; color: #333333;}
판매가격 텍스트color(색상),font-size(폰트크기) 값을 변경해줍니다.
변경 위치 css > goods > goods.css 346줄
346 .goods_view .detail_info .detail_info_top .price_box .price { font-size: 24px; color: #333333; }
장바구니 버튼background(배경색), color(색상),font-size(폰트크기), border(테두리색상:#9f9f9f;) 값을 변경해줍니다.
변경 위치 css > gd_button.css 166줄
166 .detail_cart_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: #ffffff; border: 1px solid #9f9f9f; color: #494949; font-weight: bold; box-sizing: border-box;}
바로구매 버튼background(배경색), color(색상),font-size(폰트크기), border(테두리색상:#9f9f9f;) 값을 변경해줍니다.
변경 위치 css > gd_button.css 168줄
168 .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: #f0bc0c; border: 1px solid #f0bc0c; color: #ffffff; font-weight: bold; box-sizing: border-box;} box-sizing: border-box;}
주문결제
상품명의font-weight(글씨굵음), font-size(폰트크기) 값을 변경합니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 52줄
52 .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.name { padding: 0 0 3px 0; font-weight: bold; color: #333;}
주문수량의color(색상), font-size(폰트크기) 값을 변경합니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 51줄
51 .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p { font-size: 12px; line-height: 16px; color: #9d9d9d;}
상품금액의color(색상), font-size(폰트크기), font-weight(폰트굵기) 값을 변경합니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 54줄
54 .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .prc { display: block; padding: 10px 0 0 0; font-size: 15px; color: #f0bc0c; font-weight: bold;}
상품금액, 배송비의color(색상), font-size(폰트크기) 값을 변경합니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 86줄
86 .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e;}
총 합계금액의color(색상), font-size(폰트크기) 값을 변경합니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 88줄
88 .cart .my_buy dl.total dd { color: #f0bc0c; font-size: 17px;}
항목 텍스트의color(색상), font-size(폰트크기) 값을 변경합니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 85줄
85 .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e;}
주문번호의color(색상) 값을 변경해줍니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 220줄
220 .order_end .order_end_box h2 { padding: 0 0 10px 0; font-size: 13px; color: #333333;}
주문번호의color(색상) 값을 변경해줍니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 224줄
224 .order_end .order_end_box .tx ul li { text-align: left; color: #5e5e5e;}
주문완료 영역의background(배경색), border(#e1e1e1 - 컬러) 값을 변경해줍니다.
color값을 추가하여 색상을 변경할 수 있습니다.
변경 위치 css > order > order.css 218줄
218 .order_end .order_end_box { position: relative; margin: 15px 15px 5px 15px; padding: 20px 0 20px 0; background: #f3f3f3; border: 1px solid #e1e1e1; border-radius: 2px; text-align: center;}
관리자모드에서프로모션 -> 인스고위젯관리를 모바일 기준에 맞춰 설정해줍니다(아래 이미지 참고)
