Fresh#_Mobile 스킨 가이드

PreviousFresh#_PC 스킨 가이드 Next모먼트(Moment)

Last updated 12 months ago

Was this helpful?

Fresh#_Mobile 스킨 가이드

공통

포인트 컬러 일괄 변경하기

컬러코드값 확인 Fresh# 스킨에 적용되어 있는 기본 컬러 코드 #8eb111을 확인합니다.

디자인 스킨 리스트 접속 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트

스타일시트/CSS 변경 | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #8eb111를 검색하여 원하는 포인트 컬러 코드로 변경합니다. proc.css (총 6개)
list_09.css (총 3개) list_01.css (총 4개) list_11.css (총 7개) list_06.css (총 4개) list_02.css (총 4개) list_04.css (총 4개) list_07.css (총 5개) goods.css (총 10개) mypage.css (총 10개) main.css (총 3개) order.css (총 12개) gd_common.css (총 4개) gd_layout.css (총 3개) gd_button.css (총 155개) gd_plus_reivew.css (총 7개)

푸터 변경하기

1. 푸터 TOP버튼 영역의 height(높이), border-bottom(선), color(색상), background(배경), font-size(크기), fone-weight(굵기) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 143줄

#footer footer .ft_btn_top a {
    display: inline-block;
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #dddddd;
    text-align: center;
    color: #585858;
    background: #f2f2f2;
    line-height: 42px;
    font-size: 13px;
    font-weight: bold;
}

2. 고객센터 버튼의 background(배경), color(색상), font-size(크기) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 135줄

#footer footer .ft_button_box ul li a {
    display: block;
    padding: 10px 0;
    background: #dddddd;
    color: #444444;
    font-size: 13px;
}

3. 고객센터 버튼의 font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 139줄

#footer footer .ft_info2_box .ft_menu li a {
    display: block;
    padding: 18px 0 18px 0;
    font-size: 12px;
    color: #585858;
    text-align: center;
    letter-spacing: -1px;
}

4. 푸터 컨텐츠 정보 영역의 font-size(크기), color(색상) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 141줄

#footer footer .ft_info2_box .ft_address {
    padding: 0 50px 0 50px;
    text-align: center;
    font-size: 12px;
    color: #585858;
    word-break: keep-all;
}

5. 카피라잇 폰트의 color(색상), font-size(크기) 값을 변경해줍니다.

스타일시트 > gd_layout.css | css/gd_layout.css 150줄

#footer footer .ft_copy {
    padding: 15px 0 23px 0;
    color: #999999;
    font-size: 12px;
    text-align: center;
    font-style: normal;
}

슬라이드 메뉴 폰트 변경하기

1. 사용자 이름 폰트의 font-size(크기), color(색상) 값을 변경합니다.

스타일시트 > gd_layout.css | css/gd_layout.css 90줄

.nav_banner .login_txt p.name strong {
    overflow: hidden;
    display: inline-block;
    max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    vertical-align: middle;
    color: #8eb111;
}

2. 안내 폰트의 font-size(크기) 값을 변경합니다.

스타일시트 > gd_layout.css | css/gd_layout.css 88줄

.nav_banner .login_txt {
    padding: 0 0 8px 2px;
    font-size: 16px;
    text-align: left;
    line-height: 20px;
    box-sizing: border-box;
}

3. 마이페이지 폰트의 font-size(크기), color(색상) 값을 변경합니다.

스타일시트 > gd_layout.css | css/gd_layout.css 84줄

.nav_banner .nav_login ul li a {
    display: inline-block;
    font-size: 14px;
    color: #222222;
}

4. Q&A폰트의 font-size(크기) 값을 변경합니다.

스타일시트 > gd_layout.css | css/gd_layout.css 95줄

.nav_link ul li a {
    display: block;
    padding: 41px 0 0 0;
    font-size: 13px;
    color: #333333;
}

5. BRAND 폰트의 font-size(크기), color(색상), font-weight(굵기), background(배경) 값을 변경합니다.

스타일시트 > gd_layout.css | css/gd_layout.css 109줄

.nav_tabmenu_box .nav_tab_list .nav_tabmenu_tit {
    display: block;
    margin: 4px 10px 0 10px;
    padding: 0 0 20px 0;
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    background: url(../img/icon/icon_left_tit_arrow.png) no-repeat right 8px;
    background-size: 15px 9px;
}

6. FRUIT 폰트의 font-size(크기), color(색상) 값을 변경합니다.

proc> proc.css | css/proc/proc.css 7줄

.category_side > li a {
    position: relative;
    display: block;
    padding: 10px 0 10px 0;
    font-size: 16px;
    color: #262626;
}

7. FRUIT 폰트의 color(색상), border-bottom(선) 값을 변경합니다.

proc> proc.css | css/proc/proc.css 12줄

.category_side > li > a.on {
    color: #8eb111;
    border-bottom: 1px solid #666666;
}

슬라이드 메뉴 영역 변경하기

1. 메뉴 영역 박스의 background(배경) 값을 변경합니다.

스타일시트 > gd_layout.css | css/gd_layout.css 93줄

.nav_link ul {
    display: table;
    width: 100%;
    background: #f7f8f8;
    padding: 10px 0 10px 0;
}

2. 1댑스 메뉴 하단의 background(배경) 값을 변경합니다.

스타일시트 > gd_layout.css | css/gd_layout.css 110줄

.nav_tabmenu_box .nav_tab_list .nav_tabmenu_tit.on {
    padding: 0 0 10px 0;
    background: url(../img/icon/icon_left_tit_arrow_on.png) no-repeat right 8px;
    background-size: 15px 9px;
    border-bottom: 1px solid #666666;
}

3. 2댑스 메뉴 하단의 border-bottom(선) 값을 변경합니다.

proc> proc.css | css/proc/proc.css 110줄

.category_side > li > a.on {
    color: #8eb111;
    border-bottom: 1px solid #666666;
}

메인

상단 메뉴영역 변경하기 (폰트/컬러)

1. 상단 메뉴 영역 폰트의 font-size(크기), color(색상) 값을 변경합니다.

main > main.css | css/main/main.css 31줄

.main .main_top_menu li a {
    display: block;
    padding: 13px 0 13px 0;
    font-size: 15px;
    color: #ffffff;
    font-weight: normal;
}

2. 상단 메뉴 영역 폰트의 color(색상), background(배경), font-size(크기) 값을 변경합니다.

main > main.css | css/main/main.css 25줄

#header_wrap header .header_box .cart_count {
    position: absolute;
    top: 8px;
    right: 0;
    display: block;
    padding: 3px 6px 1px 6px;
    line-height: 15px;
    border-radius: 100%;
    color: #fff;
    background: #8eb111;
    vertical-align: middle;
    font-size: 12px;
}

3. 상단 메뉴 영역 하단의 border-bottom(선) 값을 변경합니다.

main > main.css | css/main/main.css 29줄

.main .main_top_menu {
    display: table;
    width: 96%;
    border-bottom: 1px solid #ffffff;
}

진열타입 탭형 변경하기 (폰트/컬러)

1. 타이틀 폰트의 font-size(크기), color(색상), font-weight(굵기) 값을 변경합니다.

proc > proc.css | css/proc/proc.css 48줄

._goods_display_main h3 {
    position: relative;
    display: block;
    padding: 8px 0 8px 10px;
    font-size: 16px;
    color: #181818;
    text-align: center;
    font-weight: bold;
}

2. 선택된 탭영역의 background(배경), color(색상) 값을 변경합니다.

list > list_07.css | css/goods/list/list_07.css 12줄

.goods_prd_item7 .tab_box .tab li.on a {
    background: #8eb111;
    color: #ffffff;
}

3. 비활성화 탭영역의 font-size(크기), border(선), background(배경), color(색상) 값을 변경합니다.

list > list_07.css | css/goods/list/list_07.css 9줄

.goods_prd_item7 .tab_box .tab li a {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    padding: 10px 10px 10px 10px;
    font-size: 12px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
    word-wrap: normal;
    border: 1px solid #e5e5e5;
    border-left: none;
    background: none;
    color: #999999;
}

4. 브랜드 폰트의 font-weight(굵기), color(색상) 값을 변경합니다.

list > list_07.css | css/goods/list/list_07.css 27줄

.goods_prd_item7 .goods_prd_content .goods_info_list li.brand_name {
    font-weight: bold;
    color: #999999;
}

5. 상품명 폰트의 color(색상), font-size(크기) 값을 변경합니다.

list > list_07.css | css/goods/list/list_07.css 25줄

.goods_prd_item7 .goods_prd_content .goods_info_list li {
    padding: 1px 0 1px 0;
    word-break: break-all;
    color: #3e3d3c;
    font-size: 14px;
}

6. 기존가격 폰트의 text-decoration(글자꾸밈) 값을 변경합니다.

list > list_07.css | css/goods/list/list_07.css 34줄

.goods_prd_item7 .goods_prd_content .goods_info_list li.fixed_price {
    text-decoration: line-through;
}

7. 상품가격 폰트의 color(색상) 값을 변경합니다.

list > list_07.css | css/goods/list/list_07.css 38줄

.goods_prd_item7 .goods_prd_content .goods_info_list li.price .c_price {
    color: #8eb111;
}

스크롤 상단 고정메뉴 변경하기

1. 장바구니 담긴상품 수량의 background(배경) 값을 변경합니다.

main > main.css | css/main/main.css 14줄

##header_wrap header.on .header_box .cart_count {
    background: #333333;
}

2. 스크롤시 상단 메뉴 영역의 background(배경), opacity(투명도) 값을 변경합니다.

main > main.css | css/main/main.css 13줄

#header_wrap header.on {
    background: #8eb111;
    opacity: 0.9;
}

고객센터/게시판 변경하기 (폰트/배경)

1. 고객센터 번호 폰트의 font-size(크기), color(색상) 값을 변경합니다.

main > main.css | css/main/main.css 76줄

.main .main_info dl dd p.phone a {
    font-size: 22px;
    color: #8eb111;
    font-weight: bold;
}

2. 고객센터 운영시간 폰트의 font-size(크기), color(색상) 값을 변경합니다.

main > main.css | css/main/main.css 77줄

.main .main_info dl dd p.business_hours {
    font-size: 11px;
    color: #666;
}

3. NOTICE 폰트의 font-size(크기), font-weight(굵기), color(색상) 값을 변경합니다.

main > main.css | css/main/main.css 33줄

.main .main_notice .tit {
    display: table-cell;
    width: 70px;
    font-size: 13px;
    font-weight: bold;
    color: #282828;
    text-align: left;
}

4. 공지사항 내용 폰트의 color(색상) 값을 변경합니다.

main > main.css | css/main/main.css 36줄

.main .main_notice ul li a {
    display: block;
    width: 100%;
    color: #5d5d5d;
}

5. 공지사항 등록 날짜 폰트의 font-size(크기), color(색상) 값을 변경합니다.

main > main.css | css/main/main.css 37줄

.main .main_notice ul li a em {
    float: right;
    font-style: normal;
    font-size: 11px;
    color: #999999;
    letter-spacing: 0px;
}

상품상세

타임세일 상세 변경하기

1. 타임세일 상단영역의 background(배경) 값을 변경합니다.

goods > goods.css | css/goods/goods.css 277줄

.goods_view .time_sale_box {
    background: #606e89;
}

2. 타임세일 할인율 영역의 background(배경), font-size(크기), color(색상), font-weight(굵기) 값을 변경합니다.

goods > goods.css | css/goods/goods.css 280줄

.goods_view .time_sale_box .event .time_count .sale_percent {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    background: #8092b6;
    font-size: 15px;
    color: #ffffff;
    border-radius: 15px;
    font-weight: bold;
}

3. 타임세일 남은 시간 폰트의 color(색상), font-size(크기) 값을 변경합니다.

goods > goods.css | css/goods/goods.css 295줄

.goods_view .time_sale_box .event .time_count .time_sale_date_box .timesaledate span {
    color: #fff;
    font-size: 24px;
}

4. 타임세일 남은 재고 수량 폰트의 font-size(크기), color(색상) 값을 변경합니다.

goods > goods.css | css/goods/goods.css 300줄

.goods_view .time_sale_box .event .time_count .sale_order_count {
    font-size: 16px;
    color: #fff;
}

상품상세 상품문의 변경하기

1. 스크롤시 상단 메뉴 폰트의 color(색상) 값을 변경합니다.

layout > layout.css | css/layout/layout.css 232줄

.body-main .headerFix #header .gnb .depth0 > li > a {
    color: #333;
}

주문결제

장바구니 변경하기

1. 쿠폰적용 버튼의 background(배경), border(선), color(색상), font-weight(굵기) 값을 변경합니다.

스타일시트 > button.css | css/button.css 222줄

.cart_coupon_apply {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    text-align: center;
    background: #8eb111;
    border: 1px solid #8eb111;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
}

2. 상품가격 숫자 폰트의 font-size(크기), color(색상), font-weight(굵기) 값을 변경합니다.

ordert > order.css | css/order/order.css 54줄

.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .prc {
    display: block;
    padding: 10px 0 0 0;
    font-size: 15px;
    color: #8eb111;
    font-weight: bold;
}

3. 옵션변경 버튼의 background(배경), border(선), color(색상), font-weight(굵기) 값을 변경합니다.

스타일시트 > button.css | css/button.css 225줄

.cart_option_modify {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
}

4. 총 합계금액 숫자 폰트의 color(색상), font-size(크기) 값을 변경합니다.

ordert > order.css | css/order/order.css 88줄

.cart .my_buy dl.total dd {
    color: #8eb111;
    font-size: 17px;
}

5. 선택상품 삭제 버튼의 background(배경), border(선), color(색상), font-weight(굵기), font-size(크기) 값을 변경합니다.

스타일시트 > button.css | css/button.css 227줄

.cart_select_del_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 14px;
}

6. 전체주문 버튼의 background(배경), border(선), color(색상), font-weight(굵기), font-size(크기) 값을 변경합니다.

스타일시트 > button.css | css/button.css 229줄

.cart_all_order_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    background: #8eb111;
    border: 1px solid #8eb111;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 14px;
}

주문서 작성 변경하기

1. 배송정보탭의 background(배경) 값을 변경합니다.

order > order.css | css/layout/order.css 136줄

.order .order_box .delivery_box .tab_menu ul li.active {
    background: #8eb111;
}

2. 우편번호 버튼의 background(배경), border(선), color(색상), font-weight(굵기) 값을 변경합니다.

스타일시트 > button.css | css/gd_button.css 235줄

.zipcode_btn1 {
    display: inline-block;
    width: 100%;
    padding: 5px 0 6px 0;
    text-align: center;
    background: #8eb111;
    border: 1px solid #8eb111;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}

3. 쿠폰 조회 및 적용 버튼의 background(배경), border(선), color(색상), font-weight(굵기) 값을 변경합니다.

스타일시트 > button.css | css/gd_button.css 239줄

.coupon_search_apply_btn {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    text-align: center;
    background: #8eb111;
    border: 1px solid #8eb111;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}

4. 마일리지 숫자 폰트의 color(색상) 값을 변경합니다.

스타일시트 > order.css | css/order.css 161줄

.order .order_box .table_box .point_view p span {
    color: #8eb111;
}

5. 최종 결제금액 숫자 폰트의 color(색상) 값을 변경합니다.

order > order.css | css/gd_common.css 4줄

.c_red, .c-red, .c_point {
    color: #8eb111;
}

주문완료 변경하기

1. 주문번호 숫자 폰트의 font-size(크기), color(색상) 값을 변경합니다.

order > order.css | css/order/order.css 232줄

.order_end .order_end_box h2 {
    padding: 0 0 10px 0;
    font-size: 13px;
    color: #333333;
}

2. 주문금액 숫자 폰트의 color(색상), font-weight(굵기) 값을 변경합니다.

order > order.css | css/order/order.css 225줄

.order_end .order_end_box .tx ul li .prc {
    font-size: 14px;
    color: #8eb111;
    font-weight: bold;
}

3. 주문금액 숫자 폰트의 color(색상), font-weight(굵기) 값을 변경합니다.

order > order.css | css/order/order.css 229줄

.order_end .tx2 strong {
    color: #8eb111;
}

4. 홈으로 가기 버튼의 font-size(크기), background(배경), border(선), color(색상), font-weight(굵기), font-size(크기) 값을 변경합니다.

스타일시트 > gd_button.css | css/gd_button.css 243줄

.order_home_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 14px;
    text-align: center;
    background: #8eb111;
    border: 1px solid #8eb111;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 15px;
}

PreviousFresh#_PC 스킨 가이드 Next모먼트(Moment)

Last updated 12 months ago

Was this helpful?