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