📱Roastrive_Mobile 스킨 가이드

공통

포인트 컬러 일괄 변경하기

1. 컬러코드값 확인 roastrive 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 #772614 를 확인합니다.

관리자 > 디자인 메뉴 접속

스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd_common.css 스타일 시트를 오픈합니다.

ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #772614를 검색하여 원하는 포인트 컬러 코드로 변경합니다.

아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다. 원하는 값으로 변경하면 일괄 수정되어 적용됩니다.

:root {
	--primary-default: #772614;
	--primary-hover: #450000;
	--secondary-default: #c52323;
	--neutrals-default:#f4f0e9;
	--neutrals-dark: #000;
	--font-size: 12px;
	--font-family: 'Pretendard variable';
	--font-regular: 400;
	--font-medium: 500;
	--font-bold: 700;
}

상단 영역 변경하기

1. 상단 영역의 background(배경) 값을 변경합니다. css/main/main.css

#header_wrap header {
	backdrop-filter: blur(30px);
	background: rgba(244, 240, 233, 0.6);
}

css/gd_layout.css

#header_wrap header {
	width: 100%;
	min-width: 320px;
	z-index: 300;
	background: var(--neutrals-default);
}

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

css/gd_layout.css

#header_wrap header .header_box .cart_count {
	position: absolute;
	top: 8px;
	right: 0;
	display: block;
	padding: 0px 4px;
	line-height: 15px;
	border-radius: 100%;
	color: #fff;
	background: var(--primary-default);
	vertical-align: middle;
	font-size: 10px;
}

슬라이드 메뉴 변경하기

1. 상단배너 로그인, 회원가입의 font-size(크기), color(색상) 값을 변경합니다.

css/gd_layout.css

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

2. 아이콘 메뉴 영역 메뉴명의 font-size(크기), color(색상) 값을 변경합니다.

css/gd_layout.css

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

3. 탭버튼 활성화 시 background(배경), color(색상), font-weight(굵기) 값을 변경합니다.

css/gd_layout.css

.nav_tabmenu_box .nav_tabmenu li.on span {
	background: var(--neutrals-dark);
	color: #fff;
	font-weight: var(--font-bold);
}

4. 탭버튼 비활성화 시 background(배경), color(색상) 값을 변경합니다.

css/gd_layout.css

.nav_tabmenu_box .nav_tabmenu li span {
    display: block;
    padding: 10px 0 10px 0;
    background: #e8e8e8;
    color: #acacac;
}

5. 메뉴 텍스트 스타일 font-size(크기), color(색상), font-weight(굵기)값을 변경합니다.

css/proc/proc.css

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

.category_side > li > a {
	font-weight: var(--font-bold);
}

6. 메뉴 선택 시 color(색상), border-top(선) 값을 변경합니다.

css/proc/proc.css

.category_side > li > a.on {
    color: var(--primary-default);
}

.category_side > li ul {
    display: none;
    border-top: 1px solid var(--primary-default);
}

하단 영역 변경하기

1. 하단 메뉴버튼의 font-size(크기), text-align(정렬), font-weight(굵기)값을 변경합니다.

css/gd_layout.css

#footer footer .ft_info2_box .ft_menu li a {
	display: block;
	font-size: var(--font-size);
	text-align: left;
	font-weight: var(--font-bold);
}

2. 하단 회사정보 부분의 text-align(정렬), font-size(크기) 값을 변경합니다.

css/gd_layout.css

#footer footer .ft_info2_box .ft_address {
	padding: 0px;
	text-align: left;
	font-size: var(--font-size);
	word-break: keep-all;
}

4. 하단 카피라이터 영역의 font-size(크기), text-align(정렬) 값을 변경합니다.

css/gd_layout.css

#footer footer .ft_copy {
	margin: 24px 0;
	font-size: 10px;
	line-height: 15px;
	text-align: left;
	font-style: normal;
}

고객센터, PC화면 버튼의 background(배경), color(색상), font-size(크기) 값을 변경합니다.

css/gd_layout.css

#footer footer .ft_button_box ul li a {
	display: block;
	padding: 12px 0;
	background: #484848;
	color: #fff;
	font-size: 13px;
}

cs center 영역, bank info 영역의 제목 font-size(크기), font-weight(굵기), border-bottom(선) 값을 변경합니다.

css/gd_layout.css

#footer .main_info_box .main_info dl dt {
	font-size: 13px;
	margin: 0 5px;
	font-weight: var(--font-bold);
	border-bottom: 1px solid var(--neutrals-dark);
	padding-bottom: 5px;
}

cs center 영역 고객센터 번호 font-size(크기), color(색상) 값을 변경합니다.

css/gd_layout.css

#footer .main_info dl dd p.phone a {
	font-size: 14px;
	font-weight: var(--font-bold);
}

메인

메인 상품 진열 타이틀/버튼 영역 변경하기(폰트/컬러)

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

css/proc/proc.css

._goods_display_main h3 {
	position: relative;
	display: block;
	margin-top: 40px;
	margin-left: 16px;
	font-size: 24px;
	color: #181818;
	text-align: left;
	font-weight: var(--font-regular);
}

2. 상단 더보기 버튼의 font-size(크기), color(색상), font-weight(굵기) 값을 변경합니다.

css/gd_button.css

.main_more_btn2 {
	display: block;
	width: 70px;
	padding: 2px 8px;
	text-align: center;
	font-size: 14px;
	font-weight: 600; /* border: 1px solid #9f9f9f; */
	color: var(--primary-default);
	box-sizing: border-box;
}

3. 하단 더보기 버튼의 font-size(크기), color(색상), background(배경), text-align(정렬) 값을 변경합니다.

css/gd_button.css

.main_more_btn {
	display: block;
	width: calc(100%);
	padding: 12px 8px;
	margin: 0 auto;
	text-align: center;
	background: #000;
	font-size: 14px; /* border: 1px solid #9f9f9f; */
	color: #fff;
	box-sizing: border-box;
}

상품 리스트 변경하기

1. 상품리스트 이미지의 border(라인) 값을 변경합니다.

css/goods/list_01.css

.goods_prd_item2 .goods_prd_img .img_box .img img {
	width:100%; 
	border:1px solid #e5e5e5; 
	box-sizing:border-box;
}

2. 상품리스트 상품명 폰트의 font-weight(굵기), font-size(크기) 값을 변경합니다.

css/goods/goods.css

.prd_name {
	font-weight: var(--font-medium);
	line-height: 20px;
	font-size: calc(var(--font-size) + 2px);
}

3. 상품리스트 가격 폰트의 font-size(크기) 값을 변경합니다.

css/goods/goods.css

.fixed_price,
.origin-price,
.price,
.coupon_price1,
.dc_price {
	font-size: calc(var(--font-size) + 2px);
}

상품상세

info 레이어 폰트 변경하기

info 레이어 영역의 font-size(크기), color(색상), line-height(행간), font-weight(굵기) 값을 변경합니다.

css/goods/goods.css

.goods_view .detail_tab_info .ly_info li a {
	position: relative;
	display: block;
	width: 100%;
	height: 36px;
	font-size: 13px;
	color: #222222;
	line-height: 36px;
	font-weight: var(--font-bold);
}

상품 상세 상단 영역 변경하기

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

css/goods/goods.css

.goods_view .detail_info h3 {
	font-size: 18px;
	color: #333333;
	word-break: break-all;
}

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

css/goods/goods.css

.goods_view .detail_info .detail_info_top .price_box .price {
	font-size: 20px;
	color: #333333;
}

3. 상품 정가(취소선) 폰트의 color(색상) 값을 변경합니다.

css/goods/goods.css

.goods_view .detail_info .detail_info_top .price_box del {
	color: #999999;
}

4. 상품 상세 정보 제목의 font-size(크기), color(색상) 값을 변경합니다.

css/goods/goods.css

.goods_view .detail_info .detail_sub_info dl dt {
	display: table-cell;
	width: 25%;
	font-size: var(--font-size);
	color: #888888;
}

5. 상품 상세 정보 내용의 font-size(크기), color(색상) 값을 변경합니다.

css/goods/goods.css

.goods_view .detail_info .detail_sub_info dl dd {
	display: table-cell;
	width: 75%;
	font-size: var(--font-size);
	color: #333333;
}

6. 공유하기, 찜하기 버튼의 font-size(크기), text-align(정렬), color(색상), font-weight(굵기) 값을 변경합니다.

css/goods/goods.css

.goods_view .share_btn_box ul li button {
	display: block;
	margin: 0 auto;
	padding: 16px 0;
	font-size: 13px;
	text-align: center;
	background: none;
	border: none;
	color: #333333;
	font-weight: var(--font-bold);
}

상품 상세 버튼 변경하기

1. 장바구니 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

css/gd_button.css

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

2. 바로구매 버튼의 font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경해줍니다.

css/gd_button.css

.btn_add_cart_related,
.btn_add_order_related,
.detail_order_btn {
	display: block;
	width: 100%;
	padding: 10px 0 10px 0;
	font-size: 16px;
	text-align: center;
	background: var(--primary-default);
	border: 1px solid var(--primary-default);
	color: #ffffff;
	font-weight: var(--font-bold);
	box-sizing: border-box;
}

상품 옵션 레이어-셀렉트박스 변경하기

1. 옵션 레이어의 기본 옵션 폰트의 font-size(크기), color(색상), text-align(정렬), background(배경) 값을 변경합니다.

css/gd_common.css

.layer_option .ly_buy_info .ly_opt .bn_opt {
	display: block;
	position: relative;
	width: 100%;
	height: 33px;
	border: 1px solid #c7c7c7;
	font-size: 13px;
	color: #777;
	text-align: left;
	text-indent: 11px;
	z-index: 100;
	background: #fff url('../img/icon/icon_bg_select.png') no-repeat 100% 0;
	background-size: 400px 31px;
}

2. 옵션 레이어 활성화 시 border(선) 값을 변경합니다.

css/gd_common.css

.layer_option .ly_buy_info .ly_opt .bn_opt.selected {
	border: 1px solid #999;
}

3. 옵션 레이어 옵션 폰트의 border-bottom(선), font-weight(굵기), font-size(크기), color(색상) 값을 변경합니다.

css/gd_common.css

.layer_option .ly_buy_info .ly_opt li .optbx .optlst li {
	position: relative;
	min-height: 42px;
	border-bottom: 1px solid #c7c7c7;
	font-weight: var(--font-bold);
	font-size: 13px;
	color: #555;
	line-height: 1.5;
	vertical-align: middle;
	padding: 10px;
}

상품 옵션 레이어-항목 변경하기(폰트/버튼)

1. 옵션 레이어 쿠폰적용 버튼의 background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경합니다.

css/gd_button.css

.coupon_apply_btn {
    display: inline-block;
    height: 21px;
    margin: 0 0 0 5px;
    padding: 0 6px;
    background: #000;
    color: #ffffff;
    border-radius: 4px;
    border: 1px solid #000;
}

2. 선택한 상품(옵션) 가격 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경합니다.

css/gd_common.css

.view_order_goods dl dd .price_info .right .price {
    padding: 5px 0 0 0;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
}

3. 총 금액 제목 폰트의 font-size(크기), text-align(정렬) 값을 변경합니다.

css/gd_common.css

.total_price_box ul li dl dt {
	display: table-cell;
	width: 90px;
	font-size: 13px;
	text-align: left;
	vertical-align: middle;
}

4. 총 금액 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경합니다.

css/gd_common.css

.total_price_box ul li dl dd {
	display: table-cell;
	font-size: 15px;
	font-weight: var(--font-bold);
	text-align: right;
	vertical-align: middle;
}

상품 상세 탭 변경하기

1. 상품 상세페이지 탭 폰트의 color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬) 값을 변경합니다.

css/goods/goods.css

.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a {
	display: inline-block;
	width: 100%;
	color: var(--neutrals-dark);
	font-size: 13px;
	line-height: 13px;
	font-weight: var(--font-bold);
	text-align: center;
}

2. 상품후기, 상품문의 개수 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경합니다.

css/goods/goods.css

.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a span {
    display: block;
    padding: 2px 0 0 0;
    font-size: 11px;
    color: var(--primary-default);
    line-height: 11px;
}

3. 현재위치 탭표시 라인의 border-bottom(선) 값을 변경합니다.

css/goods/goods.css

.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li.selected {
	padding: 1px 0 0 0;
	height: 49px;
	border-bottom: 2px solid var(--neutrals-dark);
}

상품후기 변경하기

1. 상품후기 작성자 및 작성일의 font-size(크기), color(색)을 변경합니다.

css/goods/goods.css

.goods_board_review_list li .item_list_summary .board_left .author_box {
	font-size: var(--font-size);
	color: #a9a9a9;
}

2. 작성한 상품후기 제목의 font-size(크기), color(색상) 값을 변경합니다.

css/goods/goods.css

.goods_board_review_list li .item_list_summary .board_left .title a {
	font-size: 14px;
	color: #333333;
	line-height: 22px;
	word-break: break-all;
}

3. 작성한 상품후기 내용의 color(색상) 값을 변경합니다.

css/goods/goods.css

.goods_board_view .contents_holder {
	table-layout: fixed;
	color: #777777;
	word-break: break-all;
	word-wrap: break-word;
}

4. 후기작성 버튼의 text-align(정렬), color(색상), font-size(크기), font-weight(굵기), background(배경), border(선) 값을 변경합니다.

css/gd_button.css

.detail_write_btn {
	display: inline-block;
	width: 100%;
	padding: 10px 0 10px 0;
	text-align: center;
	color: var(--primary-default);
	font-size: 15px;
	font-weight: var(--font-bold);
	background: #ffffff;
	border: 1px solid var(--primary-default);
	box-sizing: border-box;
}

5. 상품후기 더보기 버튼의 text-align(정렬), color(색상), font-size(크기), background(배경) 값을 변경합니다.

css/gd_button.css

.detail_write_more_btn {
	display: inline-block;
	width: 25px;
	height: 25px;
	text-align: center;
	font-size: 0;
	border: none;
	background: url('../img/icon/icon_detail_board_arrow.png') no-repeat center;
	background-size: 14px 8px;
}

상품문의-리스트 변경하기

1. 상품문의 게시판 문의 상태표시 아이콘의 font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선) 값을 변경합니다.

css/goods/goods.css

.goods_board_qa_list li .item_list_summary .board_left .author_box .ico_ans1 {
	display: inline-block;
	padding: 5px 5px 3px 5px;
	font-size: 10px;
	line-height: 12px;
	background: #ffffff;
	color: var(--primary-default);
	border-radius: 15px;
	border: 1px solid var(--primary-default);
}

2. 문의 제목 폰트의 font-size(크기), color(색상), line-height(행간) 값을 변경합니다.

css/goods/goods.css

.goods_board_qa_list li .item_list_summary .board_left .title a {
	font-size: 14px;
	color: #333333;
	line-height: 22px;
	word-break: break-all;
}

상품문의-리스트 내용 변경하기(폰트/버튼)

1. 상품문의 내용 폰트의 color(색상) 값을 변경합니다.

css/goods/goods.css

.goods_board_view .contents_holder {
	table-layout: fixed;
	color: #777777;
	word-break: break-all;
	word-wrap: break-word;
}

2. 수정, 삭제 버튼의 color(색상), font-size(크기), border(선), background(배경), border-radius(둥근선) 값을 변경합니다.

css/gd_button.css

.d_comment_modify_btn {
	display: inline-block;
	padding: 2px 10px;
	color: #333333;
	font-size: 11px;
	border: 1px solid #c7c7c7;
	background: #ffffff;
	border-radius: 2px;
}

.d_comment_del_btn {
	display: inline-block;
	padding: 2px 10px;
	color: #333333;
	font-size: 11px;
	border: 1px solid #c7c7c7;
	background: #ffffff;
	border-radius: 2px;
}

주문결제

장바구니 페이지 변경하기

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

css/gd_button.css

.cart_coupon_apply {
	display: inline-block;
	padding: 4px 8px;
	text-align: center;
	background: var(--neutrals-dark);
	border: 1px solid var(--neutrals-dark);
	color: #ffffff;
	font-weight: normal;
	box-sizing: border-box;
	border-radius: 4px;
}

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

css/gd_button.css

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

3. 선택상품 삭제, 주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경합니다.

css/gd_button.css

.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: var(--font-bold);
	box-sizing: border-box;
	font-size: 14px;
}

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

4. 전체주문 버튼의 text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기) 값을 변경합니다.

css/gd_button.css

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

총 합계금액의 color(색), font-size(크기)를 변경합니다.

css/order/order.css

.cart .my_buy dl.total dd {
	color: var(--neutrals-dark);
	font-size: 17px;
}

주문페이지 변경하기

1. 주문 상품명의 font-weight(굵기), color(색상) 값을 변경합니다.

css/order/order.css

.order .pay .my_goods li .info .itembody p.name {
	padding: 0 0 3px 0;
	font-weight: var(--font-bold);
	color: #333;
}

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

css/order/order.css

.order .pay .my_goods li .info .itembody .prc {
	font-weight: var(--font-bold);
	color: var(--neutrals-dark);
}

3. 배송정보 활성화된 탭의 color(색상), font-weight(굵기) 값을 변경합니다.

css/order/order.css

.order .order_box .delivery_box .tab_menu ul li.active a {
	color: #fff;
	font-weight: var(--font-bold);
}

4. 배송정보 우편번호 버튼의 background(배경), color(색상), border(선) 값을 변경합니다.

css/gd_button.css

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

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

css/gd_button.css

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

6. 결제하기 버튼의 background(배경), color(색상), font-size(크기), border(선) 값을 변경합니다.

css/gd_button.css

.order_payment_btn {
	display: inline-block;
	width: 100%;
	padding: 10px 0 10px 0;
	font-size: 14px;
	text-align: center;
	background: var(--primary-default);
	border: 1px solid var(--primary-default);
	color: #ffffff;
	font-weight: var(--font-bold);
	box-sizing: border-box;
}

PreviousRoastrive_PC 스킨 가이드 Next띵(tting)

Last updated 6 months ago

Was this helpful?