🖥️Macaroom_PC 스킨 가이드
공통
컬러 코드 변경하기
Macaroom 스킨에 적용되어 있는 기본 컬러 코드는 #ff5f57이다.
[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다.
스타일시트/CSS 변경
좌측 하단 폴더 트리 내 [스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다.
common.css를 더블 클릭하여 common/common.css 파일을 연다.
화면 최상단에서
--primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다.
:root {
--primary-default: #ff5f57; /* 포인트 컬러 */
--primary-hover: #ff8680; /* 포인트 컬러 hover */
--secondary-default: #ffae44; /* 서브 컬러 */
--gray-dark: #e2dede;
--gray: #ededed;
--black: #272727;
--font-size: 14px; /* 기본 폰트 사이즈 */
--font-family: "Pretendard Variable"; /* 기본 폰트 명 */
--second-font-family: "Afacad";
--font-regular: 400;
--font-medium: 500;
--font-bold: 700;
--min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */
--max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */
}GNB(상단 공통) 스타일 변경하기
파일명 : css/layout/layout.css
상단 메뉴 텍스트의 스타일을 변경할 수 있다.
.top_member_box > li a {
display: inline-block;
color: #4F4F4F;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;
text-transform: uppercase;
}장바구니 담긴상품 수량 스타일을 변경할 수 있다.
.cart-count {
width: 20px;
height: 20px;
background-color: var(--primary-default);
color: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transform: translate(2px, -3px);
}상단 메뉴의 배경색을 변경할 수 있다.
#header .header_top {
background-color: #fff;
max-width: var(--max-width);
min-width: calc(var(--max-width) - 20px);
margin-inline: auto;
}카테고리 전체보기 메뉴 패널의 스타일을 변경할 수 있다.
.gnb_allmenu_wrap {
display: none;
position: fixed;
top: 80px;
left: 0;
width: 100%;
background: #fff;
z-index: 999;
border-top: 2px solid #272727;
border-bottom: 2px solid #272727;
max-height: 672px;
min-height: 396px;
}카테고리 메뉴의 스타일을 변경할 수 있다.
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
color: var(--black);
font-size: 24px;
font-weight: 400;
height: 64px;
line-height: 64px;
width: 100%;
text-align: left;
display: block;
}검색창의 스타일을 변경할 수 있다. 6-1) 검색 아이콘을 변경할 수 있다.
.top-search-btn {
position: absolute;
top: 1px;
right: 1px;
border-radius: 8px;
width: 32px;
height: 32px;
background: #fff url(../../img/common/btn/btn_top_search.svg) no-repeat right;
text-indent: -9999em;
}6-2) 검색 인풋창의 스타일을 변경할 수 있다.
#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
width: 34px;
height: 34px;
border-radius: 8px;
box-sizing: border-box;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
border: 1px solid transparent;
}6-3) 최근 검색어 레이아웃의 스타일을 변경할 수 있다.
.recent_box {
float: left;
width: 333px;
min-height: 65px;
font-size: 12px;
text-align: center;
border-right: none 0;
vertical-align: top;
}6-4) 추천상품 레이아웃의 스타일을 변경할 수 있다.
.recom_box {
display: inline-block;
width: 148px;
min-height: 218px;
padding: 12px 15px 10px;
font-size: 10px;
}푸터(하단 공통) 스타일 변경하기
파일명 : css/layout/layout.css
푸터 메뉴의 스타일을 변경할 수 있다.
.foot_list ul li a {
padding: 0 16px;
font-weight: 700;
}
.foot_list ul .divider {
display: inline-block;
width: 1px;
background-color: #fff;
height: 12px;
}푸터 정보 영역의 스타일을 변경할 수 있다.
.foot_cont .foot_info {
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
color: #fff;
font-family: 'Pretendard Variable';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}메인
메인 우측 - 최근 본 상품 변경하기
파일명 : css/layout/layout.css
최근 본 상품 영역의 스타일을 지정할 수 있다.
/* 최근 본 상품 목록 영역 */
.scroll_right_cont {
min-width: 72px;
padding: 0px;
background: none;
color: #333;
}
/* 타이틀 (예: TODAY VIEW) */
.scroll_right_cont h4 {
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 12px;
text-transform: uppercase;
}
/* 상품 마우스 오버 시 노출되는 영역 */
.scroll_right_cont .src_box {
position: absolute;
top: -1px;
right: -1px;
width: 191px;
height: 72px;
padding: 5px 0 0 7px;
border: 1px solid #999999;
background: #ffffff;
text-align: left;
z-index: 10;
}
/* 가격 스타일 */
.scroll_right_cont .src_box strong {
display: block;
color: var(--primary-default);
}
상품 상세
상품 상세 페이지 - 상단 영역 변경하기
파일명 : css/goods/goods.css
상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.
[공유], [조건별배송] 버튼의 스타일을 지정할 수 있다.
총 합계 금액의 스타일을 지정할 수 있다.
[장바구니], [찜하기], [바로 구매] 버튼의 스타일을 지정할 수 있다.
주문결제
Last updated
Was this helpful?