🖥️Storyg_PC 스킨 가이드

1. 스토리지 스킨에 현재 적용되어 있는 포인트 컬러 코드 #3e3d3c를 확인하세요.

1. 관리자페이지 > 디자인 메뉴에 접속합니다.

1. 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 표시된 스타일시트 파일을 엽니다.

1. 아래 스타일시트 파일에서 Ctrl + F를 누르고 #3e3d3c검색하여 원하는 포인트 컬러 코드로 변경하세요.

1. 마우스 오버시 컬러 #4f4e4d 도 검색하여 원하는 포인트 컬러 코드로 변경하세요.

#4f4e4d -> # 컬러 코드

• 상단 메뉴 배경컬러 수정은 background-color 값을 변경해줍니다.

css > gd_layout.css 21줄

21 #top.header .navi { 22 position:absolute; 23 top:0; 24 left:0; 25 width:100%; 26 height:32px; 27 border-bottom:1px solid #eaeaea; 28 background-color: #f9f9f9;}

• 브랜드 메뉴 폰트 수정은 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

css > gd_layout.css 288줄

288 #top.header .top-service .link > li > a { 289 color:#444; 290 font-size:14px; 291 font-weight:bold;}

• 전체 카테고리 영역 수정은 background(배경), color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

css > gd_layout.css 166줄

166 #top.header .top-service .all-category { 167 position:relative; 168 float:left; 169 width:180px; 170 height:49px; 171 margin:0; 172 padding:0; 173 background:#3e3d3c url('../img/header/ico-all-category.png') no-repeat 13px 18px; 174} 175 #top.header .top-service .all-category > a { 176 display:block; 177 height:36px; 178 padding:13px 0 0 40px; 179 color:#fff; 180 font-size:14px; 181 font-weight:bold;

1. 좌측 메뉴 최상위 카테고리 텍스트/배경 컬러 수정은 color(색상), background(배경) 값을 변경해줍니다.

css > gd_layout.css 498줄

498 #side .lnb > .category.type-layer > li > a { 499 display:block; 500 padding:9px 10px 12px 24px; 501 color: #222222; 502 font-size:13px; 503 font-weight:bold; 504 } 505 #side .lnb > .category.type-layer > li > a:hover, 506 #side .lnb > .category.type-layer > li > a.has-sub { 507 position:relative; 508 top:0; 509 left:0; 510 z-index:10; 511 width:144px; 512 padding:9px 10px 12px 24px; 513 background:#f2f2f2; 514 color: #222222; 515 }

1. 좌측 메뉴 하위 카테고리 텍스트/배경 컬러 수정은 color(색상), background(배경) 값을 변경해줍니다.

css > gd_layout.css 570줄

570 #side .lnb > .category.type-layer > li > ul li a { 571 color: #222222; 572 text-indent:6px; 573 }

css > gd_layout.css 483줄

483 #side .lnb > .category.type-layer ul li:hover { 484 background: #f2f2f2; 485 } 486 #side .lnb > .category.type-layer ul li:hover > a { 487 background: none; 488 color: #fff; 489 }

1. 관리자 페이지 > 디자인 메뉴에 접속합니다.

1. 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 gd_reset.css를 오픈하세요.

1. gd_reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.

1. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요. (한글 폰트 파일명의 경우 " "입력)

스타일시트 > gd_reset.css | css/gd_reset.css 3줄, 13줄

2 @charset "UTF-8"; 3 @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); 4 /** 5 *html 리셋 css 입니다. 6 */ 7 *{ 8 margin:0; 9 padding:0; } body { 10 color:#714171; 11 font-family: Nanum Gothic, AppleGothic,Dotum,"돋움",sans-serif; 12 font-size:12px; 13 line-height:1.4; 14 }

※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.

1. 추천상품 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

css > gd_contents.css 50줄

50 .cg-main > h3 { 51 padding:32px 0 0; 52 color:#000; 53 font-size:18px; 54 text-align:center; 55 }

1. 박스 라인의 border(선), color(색상) 값을 변경해줍니다.

css > gd_contents.css 56줄

56 .cg-main .weekly-best { 57 margin:17px 0 0; 58 padding:30px 0 0; 59 border:2px solid #d7d7d7; 60 }

1. 상품가격 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

css > gd_contents.css 193줄

193 .item-display .list ul li .price .cost strong { 194 color:#333; 195 font-family:arial; 196 font-size:16px; 197 }

• 카테고리 라인컬러 수정은 color(색상) 값을 변경해줍니다.

css > gd_contents.css 76줄

76 .view .goods-list .align { 77 height:28px; 78 margin:12px 0 20px; 79 padding:9px 0 10px; 80 border-top:1px solid #717171; 81 border-bottom:1px solid #dadada; 82 clear:both; 83 }

1. 상품명 아래 라인의 border(선), font-color(색상) 값을 변경합니다.

스타일시트 > gd_goods_view.css | css/gd_goods_view.css 347줄

347 .goods-view .goods .info .item ul li:first-child { 348 display:block; 349 border-top:1px solid #707070; 350 margin-top:5px; 351 }

1. 리스트항목 아래 라인의 border(선) 값을 변경합니다.

스타일시트 > gd_contents.css | css/gd_contents.css 3773줄

3773 .order-goods { 3774 background:#f5f5f5; 3775 border-top:none; 3776 border-bottom:2px solid #3e3d3c; 3777 }

1. 장바구니 버튼의 border(선), font-color(색상) 값을 변경해줍니다.

css > gd_common.css 927줄

927 .skinbtn.point1 { 928 border:1px solid #3e3d3c; 929 color:#3e3d3c; 930 } 931 .skinbtn.point1:hover { 932 border: 1px solid #fa2828; 933 color:#4f4e4d; 934 }

1. 장바구니 버튼의 width(가로), height(세로), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

css > gd_contents.css 5478줄

5478 .skinbtn.point1.btn-add-cart, 5479 .skinbtn.point1.btn-add-wish { 5480 width:152px; 5481 height:61px; 5482 line-height:59px; 5483 font-size:16px; 5484 font-weight:bold; 5485 }

1. 바로 구매 버튼의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

css > gd_common.css 938줄

938 .skinbtn.point2 { 939 background:#3e3d3c; 940 border: 1px solid #3e3d3c; 941 color:#fff; 942 font-weight:bold; 943 } 944 .skinbtn.point2:hover { 945 background:#4f4e4d; 946 order:1px solid #4f4e4d; 947 }

1. 바로 구매 버튼의 width(가로), height(높이), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

css > gd_contents.css 5486줄

5486 .skinbtn.point2.btn-add-order { 5487 width:242px; 5488 height:61px; 5489 line-height:59px; 5490 font-size: 20px; 5491 font-weight:bold; 5492 }

1. 선택된 탭의 border(선), color(색상) 값을 변경합니다.

css > gd_goods_view.css 708줄

708 .multiple-topics .tab a.on { 709 position: relative; 710 border: 1px solid #707070; 711 border-bottom: 1px solid #fff; 712 color: #111; 713 font-weight: bold; 714 }

1. 비활성화 탭의 border(선), color(색상), font-size(사이즈) 값을 변경합니다.

css > gd_goods_view.css 688줄

688 .multiple-topics .tab a { 689 float: left; 690 width: 20%; 691 height: 54px; 692 padding: 16px 0 0; 693 margin: 0 0 0 -1px; 694 border: 1px solid #dfdfdf; 695 border-bottom: 1px solid #707070; 696 color: #787878; 697 font-size: 13px; 698 text-align: center; 699 -webkit-box-sizing: border-box; 700 -moz-box-sizing: border-box; 701 box-sizing: border-box; 702 }

1. 수량 표시의 font-color(색상) 값을 변경합니다.

스타일시트 > gd_goods_view.css | css/gd_goods_view.css 716줄

716 .multiple-topics .tab a strong { 717 color: #3e3d3c; 718 }

1. 상품명 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

css > gd_goods_view.css 304줄

304 .goods-view .goods .info .top .tit h2 { 305 color: #111; 306 font-size: 22px; 307 }

1. 판매가 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

css > gd_goods_view.css 420줄

420 .goods-view .goods .info .item ul li.price > div strong { 421 color: #3e3d3c; 422 font-family: arial; 423 font-size: 20px; 424 }

1. 장바구니 최종 결제금액의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

css > gd_contents.css 1319줄

1319 .order-page .price-box > div p .total { 1320 color:#fa2828; 1321 font-size: 20px; 1322 font-weight:bold; 1323 }

1. 선택상품주문 버튼은 마우스 오버 전(.skinbtn.point1) 과 오버 시(.skinbtn.point1:hover)의 border(선), font-size(사이즈), color(색상) 값으로 각각 변경해줍니다.

css > gd_common.css 927줄

927 .skinbtn.point1 { 928 border: 1px solid #fa2828; 929 color:#fa2828; 930 } 931 .skinbtn.point1:hover { 932 border: 1px solid #fa2828; 933 color:#fa2828; 934 } 935 .skinbtn.point1.cart-orderselect { 936 font-size:14px; 937 }

1. 전체상품주문 버튼은 마우스 오버 전(.skinbtn.point2) 과 오버 시(.skinbtn.point2:hover) 의 background(배경) 컬러, border(선), color(색상), font-size(사이즈) 값으로 각각 변경해줍니다.

css > gd_common.css 938줄

938 .skinbtn.point2 { 939 background:#fa2828; 940 border: 1px solid #fa2828; 941 color:#fff; font-weight:bold; 942 } 943 .skinbtn.point2:hover { 944 background:#fa2828; 945 border:1px solid #fa2828; 946 } 947 .skinbtn.point2.cart-orderall { 948 font-size:14px; 949 }

최종 결제금액의 color(색상) 값을 변경해줍니다.

css > gd_contents.css 2141줄

2141 .table1 > table > tbody > tr >td { 2142 border-bottom: 1px solid #dbdbdb; 2143 color: #fa2828; 2144 }

1. 원하는 배경색상의 background(배경) 컬러 값으로 변경해줍니다.

css > gd_contents.css 1546줄

1546 .order-page .how-to-pay .method .receipt .selection { 1547 padding:15px 0; 1548 background: #fa2828; 1549 }

1. 최종 결제금액의 font-size(사이즈) 값을 변경하고 color(색상) 값을 추가해줍니다.

css > gd_contents.css 1599줄

1599 .order-page .how-to-pay .buy .final-settlement span strong { 1600 position:relative; 1601 top:5px; 1602 font-size: 30px; 1603 color : #fa2828; 1604 }

1. 박스라인의 border(선) 컬러 값을 변경해줍니다.

css > gd_contents.css 1584줄

1584 .order-page .how-to-pay .buy .final-settlement { 1585 padding:13px 46px 20px 0; 1586 border:2px solid #d6d6d6; 1587 text-align:right; 1588 }

1. 결제하기 버튼의 color(색상), font-size(사이즈) 값을 변경해줍니다.

css > gd_common.css 938줄

938 .skinbtn.point2 { 939 background:#3e3d3c; 940 border: 1px solid #3e3d3c; 941 color:#fff; 942 font-weight:bold; 943 }