📱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) 이미지 변경하기

1. 변경하고 싶은 이미지를 확인하고 개발자 도구를 사용하여 선택한 후 이미지 경로를 확인합니다.

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;
}