🖥️Roastrive_PC 스킨 가이드

공통

포인트 컬러 일괄 변경하기

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

2. 관리자 > 디자인 메뉴 접속

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

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

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

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

메뉴 변경하기

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

css/layout/layout.css

.top_member_box > li a {
	display: inline-block;
	padding-left: 40px;
	color: var(--neutrals-dark);
	font-size: 16px;
}

1. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경합니다. (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)

css/layout/layout.css

.top_member_box > li strong { 
    color:var(--primary-default);
}

1. 상단 메뉴 배경색상의 background(배경) 값을 변경합니다.

css/main/main.css

#header {
	background: rgba(244, 240, 233, 0.6);
}

css/layout/layout.css

#header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
	background: rgba(fff,fff,fff, 0.6);
	backdrop-filter: blur(30px);
}

1. 전체보기 메뉴의 background(배경) 값을 변경합니다.

css/layout/layout.css

body.is-menu-fixed::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100%;
	background: rgba(248, 245, 240, 0.6);
	backdrop-filter: blur(30px);
}

1. 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경합니다.

css/layout/layout.css

.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
	font-size: 32px;
	font-weight: 300;
	display: inline-block;
	text-align: left;
	max-width: calc(100% - 30px);
	position: relative;
}

1. 선택한 메뉴의 폰트 color(색상)값을 변경합니다.

css/layout/layout.css

.header_gnb .gnb_allmenu_box li.is-open > button {
	color: var(--secondary-default);
}

검색창 변경하기

1. 검색창 인풋박스 사이즈를 변경하려면 width(너비), height(높이) 값을 변경합니다.

css/layout/layout.css

.top_search .top_text_cont .top_srarch_text {
	display: block;
	width: 358px;
	height: 40px;
	background: none;
	box-sizing: border-box;
	-moz-transition: all 0.35s;
	-webkit-transition: all 0.35s;
}

2. 최근검색어 폰트의 font-size(크기) , font-weight(굵기) 값을 변경합니다. css/layout/layout.css

.recent_box dt {
	font-size: 13px;
	margin-bottom: 10px;
	font-weight: var(--font-bold);
}

3. 추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경합니다.

css/layout/layout.css

.recom_box dt {
	width: 100%;
	font-size: 13px;
	font-weight: var(--font-bold);
	line-height: 19px;
	text-align: center;
	margin-bottom: 10px;
}

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

1. 하단 우측 메뉴 폰트의 font-size(크기) 값을 변경합니다.

css/layout/layout.css

.content_list h3 {
	font-size: var(--font-size);
	margin-bottom: 12px;
}

.content_list ul li a {
	font-size: 12px;
	line-height: 20px;
}

1. 하단 쇼핑몰 회사정보의 font-size(크기), font-weight(굵기), line-height(행간) 값을 변경합니다.

css/layout/layout.css

.foot_cont_wrap .foot_info {
	font-size: 12px;
	font-style: normal;
	font-weight: var(--font-regular);
	line-height: 20px;
}

1. Information 영역의 font-size(크기), background(구분선색상)값을 변경합니다.

css/layout/layout.css

.foot_top h3 {
	display: inline-block;
	font-size: var(--font-size);
}

.foot_top h3::after,
.foot_top ul li::after {
	display: inline-block;
	content: '';
	width: 1px;
	background: #000;
	height: 12px;
	position: relative;
	left: 12px;
}

웹폰트 적용하기

1. 관리자 페이지 > 디자인 메뉴에 접속합니다.

2. 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 reset.css를 오픈하세요.

3. reset.css 스타일시트의 6번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.

스타일시트 > reset.css | css/reset.css

@@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css');
@import url('외부 스타일시트 경로');

4. font-family 값을 변경할 폰트로 수정 또는 추가하여 적용해주세요. (한글 폰트 파일명의 경우 " "입력)

스타일시트 > reset.css | css/reset.css

body,
th,
td,
input,
select,
textarea,
button {
	font-size: var(--font-size);
	line-height: 1.5;
	font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, Dotum, '돋움', sans-serif;
	color: #333;
} 

※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.

메인

[우측 스크롤 영역] 최근 본 상품 변경하기

1. 최근 본 상품 영역의 background(배경) 값을 변경합니다.

css/layout/layout.css

.scroll_right_cont {
	float: left;
	width: 76px;
	padding: 6px 9px 9px 9px;
	background: none;
	color: #fff;
	background: var(--primary-default);
}

2. 타이틀 폰트의 color(색상), text-align(정렬) 값을 변경합니다.

css/layout/layout.css

.scroll_right_cont h4 {
	font-size: var(--font-size);
	font-style: normal;
	font-weight: var(--font-regular);
	line-height: 16px;
	text-transform: uppercase;
}

3. 최근 본 상품 오버시 border(선), background(배경) 값을 변경합니다.

css/layout/layout.css

.scroll_right_cont .src_box {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 210px;
	height: 51px;
	padding: 5px 5px 0 7px;
	border: 1px solid #999999;
	background: #fff;
	text-align: left;
	z-index: 10;
	box-sizing: content-box;
}

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

css/layout/layout.css

.scroll_right_cont .src_box strong {
    display: block;
    color: var(--primary-default);
}

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

1. 타이틀 폰트의font-size(크기) 값을 변경합니다.

css/goods/list.css

.goods_list_tit h3 {
	font-size: 40px;
	font-weight: var(--font-regular);
}

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

css/goods/list.css

.btn_goods_more .btn_goods_view_more {
	color: var(--primary-default);
	font-size: 18px;
	font-weight: var(--font-regular);
}

상품 리스트 변경하기

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

css/goods/list.css

.item_tit_box .item_name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	padding: 0;
	font-size: 16px;
	text-overflow: ellipsis;
	font-weight: normal;
	overflow: hidden;
	line-height: 22px;
}

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

css/goods/list.css

.item_money_box .item_price {
	/*display:block;*/
	padding: 0px;
	font-size: 16px;
	color: var(--neutrals-dark);
	font-weight: var(--font-bold);
}

3. 할인율 폰트의 font-size(크기), color(색상) 값을 변경합니다.

css/goods/list.css

.item_number_box {
	color: var(--secondary-default);
	line-height: 18px;
}

상품상세

상품 상세 상단 변경하기(폰트)

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

css/goods/goods.css

.item_detail_tit h3 {
	width: 405px;
	font-size: 18px;
	word-break: break-all;
}

2. 상품 정보 타이틀 폰트의 color(색상), font-weight(굵기) 값을 변경합니다.

css/goods/goods.css

.item_detail_list dt {
	float: left;
	width: 80px;
	margin: 0 10px 0 0;
	color: #888888;
	font-weight: normal;
	word-wrap: break-word;
}

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

css/goods/goods.css

.item_price dd {
	margin: -2px 0 0 0;
	font-size: 16px;
	font-weight: var(--font-bold);
}

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

css/goods/goods.css

.item_tatal_box .total_amount dt {
	font-size: 16px;
	font-weight: var(--font-bold);
}

5. 총 합계금액 가격 폰트의 color(색상), font-weight(굵기) 값을 변경합니다.

css/goods/goods.css

.item_tatal_box .total_amount dd {
	color: var(--primary-default);
	font-weight: var(--font-bold);
}

6. 총 합계금액 가격 폰트의 font-size(크기) 값을 변경합니다.

css/goods/goods.css

.item_tatal_box .total_amount dd strong {
    font-size: 20px;
}

상품 상세 상단 변경하기(버튼)

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

css/button.css

.btn_add_cart,
.btn_add_wish {
	display: inline-block;
	width: 152px;
	height: 52px;
	margin: 0 0 0 6px;
	padding: 0 10px 0 10px;
	color: #3e3d3c;
	font-size: 16px;
	border: 1px solid #cccccc;
	background: #ffffff;
	text-align: center;
}

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

css/button.css

.btn_add_order,
.btn_add_order_related,
.btn_add_cart_related {
	display: inline-block;
	width: 230px;
	height: 52px;
	margin: 0 0 0 6px;
	padding: 0 10px 0 10px;
	color: #ffffff;
	font-size: 16px;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	text-align: center;
}

상품 상세 상단 변경하기(라인)

1. 상품명 아래 border-bottom(선) 값을 변경합니다.

css/goods/goods.css

.item_detail_tit {
	position: relative;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #dbdbdb;
}

1. 선택한 옵션 영역의 border-bottom(선) 값을 변경합니다.

css/layout/layout.css

.item_detail_list + .item_choice_list table {
	width: 100%;
	border-bottom: 1px solid #999999;
}

1. 선택한 옵션영역의 background(배경) 값을 변경합니다.

css/layout/layout.css

.item_choice_list table {
	width: 100%;
	background: #f5f5f5;
}

1. 총 합계금액 구분 영역의 border-top(선) 값을 변경합니다.

css/goods/goods.css

.item_tatal_box .total_amount {
	margin: 15px 0 0 0;
	padding-top: 10px;
	border-top: 1px solid #dbdbdb;
}

상품 상세 탭 변경하기

1. 상품 상세 탭 color(색상), font-weight(굵기), border(선) 값을 변경합니다.

css/goods/goods.css

.item_goods_tab li a {
	display: block;
	margin: 0 0 0 -1px;
	padding: 10px 0 12px 0;
	color: #999999;
	font-size: var(--font-size);
	border: solid #dadada;
	border-width: 1px 1px 0;
	background: #ffffff;
}

1. 상품 상세 선택된 탭 color(색상), font-weight(굵기), border(선) 값을 변경합니다.

css/goods/goods.css

.item_goods_tab li.on a {
	padding-top: 18px;
	margin-top: 8px;
	color: #333333;
	font-weight: var(--font-bold);
	border-bottom: 2px solid #ffffff;
}

3. 상품 상세 상품문의, 상품후기 수량 폰트의 color(색상) 값을 변경합니다.

css/goods/goods.css

.item_goods_tab li a strong {
	color: var(--primary-default);
}

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

1. 탭 하단영역 타이틀 폰트의 font-size(크기) 값을 변경합니다.

css/goods/goods.css

.item_goods_sec h3 {
    padding: 45px 0 10px 0;
    font-size: 18px;
}

2. 상품문의 전체보기, 상품후기 전체보기 버튼의 color(색상), border(선), background(배경), text-align(정렬) 값을 변경합니다.

css/button.css

.btn_reviews_more,
.btn_qna_more {
	display: inline-block;
	min-width: 120px;
	padding: 10px 10px 10px 10px;
	color: #3e3d3c;
	border: 1px solid #cccccc;
	background: #ffffff;
	text-align: center;
}

3. 상품후기 글쓰기, 상품문의 글쓰기 버튼의 color(색상), border(선), background(배경), text-align(정렬) 값을 변경합니다.

css/button.css

.btn_reviews_write,
.btn_qna_write {
	display: inline-block;
	min-width: 120px;
	padding: 10px;
	color: #ffffff;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	text-align: center;
}

4. 페이징 선택된 버튼의 color(색상), font-weight(굵기) 값을 변경합니다.

css/common/common.css

.pagination .on {
	color: #333;
	font-weight: var(--font-bold);
}

상품 상세 상품문의, 상품후기 영역-리스트 내용 영역 변경하기

1. 상품후기 내용 펼침 영역의 background(배경) 값을 변경합니다.

css/goods/goods.css

.reviews_new_box {
	text-align: left;
	background: #f8f8f8;
}

1. 상품문의 내용 펼침 영역의 background(배경) 값을 변경합니다.

css/goods/goods.css

.qna_new_box {
	text-align: left;
	background: #f8f8f8;
}

주문결제

타이틀 영역 변경하기 (장바구니 / 주문서작성/결제 / 주문완료 )

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

css/order/order.css

.order_wrap .order_tit h2 {
	float: left;
	font-size: 28px;
	color: #222222;
}

2. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경합니다.

css/order/order.css

.order_wrap .order_tit .page_on {
	color: var(--neutrals-dark);
	font-weight: var(--font-bold);
}

3. 다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경합니다.

css/order/order.css

.order_wrap .order_tit ol li {
	float: left;
	font-size: var(--font-size);
	color: #d1d1d1;
}

4. 타이틀 영역 하단의 border-bottom(선) 값을 변경합니다.

css/order/order.css

.order_wrap .order_tit {
	overflow: hidden;
	border-bottom: 1px solid #dbdbdb;
}

장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)

1. 장바구니 상품금액/배송비/최종 결제금액의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경합니다.

css/order/order.css

.price_sum_cont .price_sum_list dd {
    color: var(--neutrals-dark);
}

.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color: var(--neutrals-dark);
}

2. 선택상품주문 버튼은 마우스 오버 전과 오버 시의 border(선), font-size(사이즈), color(색상) 값으로 각각 변경합니다.

css/button.css

.btn_order_choice_buy {
	min-width: 190px;
	height: 55px;
	padding: 0 20px 0 20px;
	color: #3e3d3c;
	font-weight: bold;
	font-size: 14px;
	border: 1px solid #cccccc;
	background: #fff;
	cursor: pointer;
}

.btn_order_choice_buy:hover {
	color: #333333;
	border: 1px solid #bbbbbb;
}

3. 전체상품주문 버튼은 마우스 오버 전과 오버 시의 background(배경) 컬러, border(선), color(색상), font-size(사이즈) 값으로 각각 변경합니다.

css/button.css

.btn_order_whole_buy {
	min-width: 190px;
	height: 55px;
	padding: 0 20px 0 20px;
	color: #ffffff;
	font-size: 14px;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	cursor: pointer;
	font-weight: bold;
}

.btn_order_whole_buy:hover {
	border: 1px solid var(--primary-hover);
	background: var(--primary-hover);
}

주문서 작성/결제 화면 변경하기

주문서 금액 변경하기

- 총 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경합니다.

css/order/order.css

.price_sum_cont .price_sum_list dd {
	color: var(--neutrals-dark);
}

.price_sum_cont .price_sum_list dd strong {
	font-weight: var(--font-bold);
	font-size: 18px;
	color: var(--neutrals-dark);
}

최종결제금액, 결제하기 버튼 변경하기

1. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경합니다.

css/order/order.css

.payment_final_total dd {
	display: inline-block;
	font-size: 30px;
	color: var(--primary-default);
}

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

css/button.css

.btn_order_buy {
	display: inline-block;
	width: 300px;
	height: 61px;
	line-height: 59px;
	color: #fff;
	font-size: 20px;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	text-align: center;
}