📱Storyg_Mobile 스킨 가이드
공통
푸터 영역 변경하기(배경/컬러/사이즈)
1. 로그인 버튼의 background(배경), border(선), radius(라운드), font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 161줄
.ft_menu a {
display: block;
background: #363636;
border: 1px solid #494949;
border-radius: 2px;
font-size: 13px;
color: #777;
line-height: 32px;
}2. 제목 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 421줄
.ft_info dt {
float: left;
width: 73px;
font-size: 11px;
color: #545454;
letter-spacing: -1px;
display: table-cell;
vertical-align: top;
word-break: break-all;
}3. 내용 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 422줄
.ft_info dd {
overflow: hidden;
font-size: 11px;
color: #686868;
display: table-cell;
vertical-align: top;
padding-left: 5px;
max-width: 200px;
}상단 메뉴 영역 변경하기(배경/라인/컬러)
1. 상단 메뉴 background(배경), border(선) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 22줄
#header .head {
position: relative;
height: 50px;
line-height: 50px;
background: #fff;
text-align: center;
border-bottom: 1px solid #c3c3c3;
}2. 메뉴 폰트 수정은 color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 4607줄
.main-link-wrap span {
display: table-cell;
width: 25%;
text-align: center;
line-height: 38px;
height: 38px;
font-size: 14px;
font-weight: bold;
}스타일시트 > gd_contents.css | css/gd_contents.css 4608줄
.main-link-wrap span a {
color: #333;
}슬라이드 메뉴 영역 변경하기(배경/컬러/사이즈)
1. 로그인 버튼의 font-size(사이즈), background(배경), color(색상), height(높이) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 161줄
.slide_wrap .member-btns .member-btn-in a {
display: block;
font-size: 14px;
background: #3e3d3c;
color: #fff;
text-align: center;
height: 39px;
line-height: 39px;
}2. 회원가입 버튼의 background(배경) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 162줄
.slide_wrap .member-btns .subbtn a {
background: #676767;
}3. 마이페이지 버튼영역의 background(배경) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 174줄
.nav-member-info {
display: table;
width: 100%;
table-layout: fixed;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
border-collapse: collapse;
background: #f3f3f3;
}4. 메뉴 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 523줄
.hamburger-gnb .dep1 > li > a {
position: relative;
z-index: 5;
display: block;
background: #fff;
color: #888;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
font-weight: bold;
}아이콘(sprite icon) 이미지 변경하기
변경하고 싶은 이미지를 확인하고 개발자 도구를 사용하여 선택한 후 이미지 경로를 확인합니다.
2. 아래 해당 이미지 링크로 접속하여 변경할 아이콘 이미지를 다운받으세요.
(예시 이미지는 흰색 아이콘 확인을 위해 추가된 이미지로 수정 후 저장 하실 때에는 꼭 투명 배경의 png로 저장)
- sprite-icon.png 이미지 url 위치 : /data/skin/mobile/story_g/img/icon/sprite-icon.png - sprite-icon.png 이미지 관리자 위치 : skin/mobile/story_g/img/icon/sprite-icon.png
- sp.png 이미지 url 위치 : /data/skin/mobile/story_g/img/common/sp.png - sp.png 이미지 관리자 위치 : skin/mobile/story_g/img/common/sp.png
- sp_mono.png 이미지 url 위치 : /data/skin/mobile/story_g/img/common/sp_mono.png - sp_mono.png 이미지 관리자 위치 : skin/mobile/story_g/img/common/sp_mono.png
3. 이미지를 변경한 후 관리자 > 디자인 > Web FTP 메뉴를 클릭 팝업에 접속하여 수정한 파일을 업로드하면 됩니다.
(이미지의 위치 및 사이즈는 변경 불가)
메인
상품 리스트 폰트 변경하기(사이즈/컬러/굵기)
1. 상품명 폰트 수정은 font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 2027줄
.goods-nm {
font-size: 13px;
color: #222;
margin-bottom: 5px;
}2. 판매가 폰트 수정은 font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 2045줄
.goods-price {
font-size: 15px;
color: #555;
}상품 이미지 라인 변경하기(컬러)
1. 상품이미지 라인 수정은 color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 1974줄
.goods-list-img a,
.goods-gallery-img a,
.goods-simpleimg-img a {
border: 1px solid #e5e5e5;
display: block;
text-align: center;
position: relative;
}2. 더보기 버튼 수정은 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_layout.css | css/gd_layout.css 338줄
.bn_more {
display:block;
height:40px;
border:1px solid #ddd;
background:#ededed;
color:#888;
font-size:14px;
line-height:40px;
text-align:center;
width: 100%;
}타이틀 영역 변경하기(배경/컬러/사이즈)
- 타이틀영역 폰트 수정은 background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 200줄
my_tit {
padding: 0 10px;
border: 1px solid #ccc;
border-width: 1px 0 0 0;
background: #f2f3f3;
color: #333;
font-size: 14px;
line-height: 36px;
}
상품상세
레이어 폰트 스타일 변경하기(컬러/사이즈/굵기)
1. 쿠폰적용 버튼의 background(배경), color(색상), font-size(사이즈), radius(라운드) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 4239줄
.view-order-goods .check .btn-wrap button {
height: 21px;
margin: 0 0 0 5px;
padding: 0 6px;
background: #3e3d3c;
color: #fff;
font-size: 12px;
border-radius: 3px;
}2. 총 상품금액 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 4373줄
.view-end-price ul li strong {
float: right;
font-size: 15px;
}3. 총 합계금액 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 4382줄
.view-end-price ul li:last-child * {
/* color: #3e3d3c; */
}스타일시트 > gd_contents.css | css/gd_contents.css 4391줄
.view-end-price ul li:last-child strong {
font-size: 18px;
}탭 스타일 변경하기(컬러/사이즈/굵기)
1. 글 수의 color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 1324줄
.detail_sub_lst>li>a {
height: 41px;
font-size: 14px;
color: #222;
font-weight: bold;
position: relative;
vertical-align: middle;
}2. 탭 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 1326줄
.detail_sub_lst>li .itemnum {
margin-left: 2px;
font-size: 15px;
color: #fa2828;
}3. 현재 위치 탭 표시 라인의 height(높이), color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 1327줄
.detail_sub_lst li.selected:after {
content: '';
width: 80%;
height: 3px;
background: #3e3d3c;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
}상품상세 버튼 스타일 변경하기(컬러/사이즈/굵기)
1. 장바구니 버튼의 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 988줄
.ly_buy_dn li a {
display: block;
height: 50px;
font-size: 16px;
color: #fff;
font-weight: bold;
line-height: 51px;
text-align: center;
background: #3e3d3c;
color: #fff;
border: 1px solid #3e3d3c;
}스타일시트 > gd_contents.css | css/gd_contents.css 989줄
.ly_buy_dn .basket {
border: 1px solid #3e3d3c;
background: #fff;
color: #3e3d3c;
}2. 바로구매 버튼의 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 988줄
.ly_buy_dn li a {
display: block;
height: 50px;
font-size: 16px;
color: #fff;
font-weight: bold;
line-height: 51px;
text-align: center;
background: #3e3d3c;
color: #fff;
border: 1px solid #3e3d3c;
}리스트 항목 폰트 변경하기(컬러/사이즈/굵기)
1. 상품명 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 703줄
.detail_info h2 {
padding-bottom:3px;
font-size:22px;
color:#222;
line-height:26px;
}2. 판매가 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 705줄
.detail_info .price {
margin-left:3px;
font-size:17px;
color:#222;
}3. 리스트 항목 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 716줄
.detail_info dl {
overflow:hidden;
margin-top:25px;
line-height:16px;
font-size:13px;
border-bottom: 1px solid #999999;
padding-bottom: 10px;
}스타일시트 > gd_contents.css | css/gd_contents.css 718줄
.detail_info dt {
float:left;
width:70px;
color:#222;
}4. 리스트 내용 폰트의 color(색상) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 722줄
.detail_info dd {
overflow:hidden;
color:#888;
}
주문결제
장바구니 버튼 변경하기(컬러/사이즈/굵기)
1. 쿠폰적용 버튼의 border(선), font-size(사이즈), color(색상) 값을 각각 변경해줍니다.
스타일시트 > gd_reset.css | css/gd_reset.css 159줄
.btn.btn_p3 {
border: 1px solid #3e3d3c;
background: #3e3d3c;
border-radius: 2px;
color: #fff;
height: 33px;
line-height: 33px;
font-size: 13px;
box-sizing: border-box;
}2. 옵션변경 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.
스타일시트 > gd_reset.css | css/gd_reset.css 129줄
.btn.btn_gr {
height: 33px;
border: 1px solid #919191;
border-radius: 3px;
background: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f0f0f0));
color: #5e5e5e;
font-size: 13px;
line-height: 32px;
}3. 선택상품 삭제버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값으로 각각 변경해줍니다.
스타일시트 > gd_reset.css | css/gd_reset.css 136줄
.btn.btn_w {
background: #fff;
border-color: #9f9f9f;
color: #494949;
font-size: 15px;
}4. 전체주문 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.
스타일시트 > gd_reset.css | css/gd_reset.css 102줄
.btn {
overflow: hidden;
display: block;
width: 100%;
height: 42px;
background: #3e3d3c;
border: 1px solid #3e3d3c;
box-sizing: border-box;
-webkit-box-sizing: border-box;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 36px;
}스타일시트 > gd_contents.css | css/gd_contents.css 3548줄
.btn-order-all {
margin-top: 5px;
font-size: 15px;
}장바구니 폰트 변경하기(컬러/사이즈/굵기)
1. 상품금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 282줄
.my_goods .info .prc {
display: block;
margin: 10px 4px 0 0;
color: #606060;
font-size: 15px;
text-align: right;
}2. 총 합계금액 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 396줄
.my_buy li {
margin-bottom: 17px;
color: #5e5e5e;
font-size: 13px;
}스타일시트 > gd_contents.css | css/gd_contents.css 398줄
.my_buy li.total {
border-top: 1px solid #C3C3C3;
padding-top: 20px;
font-weight: bold;
}3. 총 합계금액 가격 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.
스타일시트 > gd_contents.css | css/gd_contents.css 399줄
.my_buy li.total strong {
font-size: 17px;
color: #fa2828;
text-align: right;
}Last updated
