🖥️Storyg_PC 스킨 가이드
공통
포인트 컬러 일괄 변경하기
스토리지 스킨에 현재 적용되어 있는 포인트 컬러 코드 #3e3d3c를 확인하세요.
관리자페이지 > 디자인 메뉴에 접속합니다.
좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 표시된 스타일시트 파일을 엽니다.
아래 스타일시트 파일에서 Ctrl + F를 누르고 #3e3d3c검색하여 원하는 포인트 컬러 코드로 변경하세요.
마우스 오버시 컬러 #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;
좌측 메뉴 변경하기(배경/폰트/컬러)
좌측 메뉴 최상위 카테고리 텍스트/배경 컬러 수정은 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 }
좌측 메뉴 하위 카테고리 텍스트/배경 컬러 수정은 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 }
웹폰트 적용하기
관리자 페이지 > 디자인 메뉴에 접속합니다.
좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 gd_reset.css를 오픈하세요.
gd_reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.
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 }
※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.
상품상세
카테고리 스타일 변경하기(폰트/컬러/보더)
추천상품 폰트의 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 }
박스 라인의 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 }
상품가격 폰트의 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 }
상품상세 상단 라인 컬러 변경하기(컬러/사이즈/폰트)
상품명 아래 라인의 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 }
리스트항목 아래 라인의 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 }
상품상세 상단 버튼 스타일 변경하기(컬러/사이즈/폰트)
장바구니 버튼의 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 }
장바구니 버튼의 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 }
바로 구매 버튼의 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 }
바로 구매 버튼의 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 }
상품상세 탭스타일 변경하기
선택된 탭의 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 }
비활성화 탭의 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 }
수량 표시의 font-color(색상) 값을 변경합니다.
스타일시트 > gd_goods_view.css | css/gd_goods_view.css 716줄
716 .multiple-topics .tab a strong {
717 color: #3e3d3c;
718 }
상품상세 리스트 항목 폰트 변경하기(컬러/사이즈/굵기)
상품명 폰트의 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 }
판매가 폰트의 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 }
주문결제
장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
장바구니 최종 결제금액의 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 }
선택상품주문 버튼은 마우스 오버 전(.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 }
전체상품주문 버튼은 마우스 오버 전(.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 }
결제금액 스타일 변경하기(컬러/사이즈/굵기)
원하는 배경색상의 background(배경) 컬러 값으로 변경해줍니다.
css > gd_contents.css 1546줄
1546 .order-page .how-to-pay .method .receipt .selection {
1547 padding:15px 0;
1548 background: #fa2828;
1549 }
최종 결제금액의 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 }
박스라인의 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 }
결제하기 버튼의 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 }
Last updated
