NHN커머스 메인
개발자센터

🖥️THE LIVING_PC 스킨 가이드

공통

포인트 컬러 일괄 변경하기

  1. 컬러코드값 확인 THE LIVING 스킨에 적용되어 있는 기본 컬러 코드 #dd3d42을 확인합니다.

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

  1. 스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

  1. ctrl+F 검색 후 수정하기 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 #dd3d42를 검색하여 원하는 포인트 컬러 코드로 변경합니다. button.css (총 11개) css/button.css (총 66개) css/board/board.css (총 13개) css/common/common.css (총 23개) css/common/layer/layer.css (총 19개) css/event/event.css (총 6개) css/goods/goods.css (총 12개) css/goods/list.css (총 4개) css/layout/layout.css (총 top:15개, left:13개) css/member/member.css(총 16개) css/mypage/mypage.css (총 9개) css/order/order.css (총 7개) css/service/service.css (총 6개)

  1. 마우스 오버시 컬러 #d2262b도 검색하여 원하는 포인트 컬러 코드로 변경합니다.

[상단 메뉴형] 메뉴 영역 변경하기 - 검색창 포함

  1. 상단배경컬러. 상단전체의background(배경색) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 8줄 8 #header { position: relative; background: #272727;}

  1. 로고이미지를 배경이 없는 PNG 파일로 변경해줍니다.

  2. 서치 영역의background(배경색) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 79줄 79 #header .top_search .top_text_cont .top_srarch_text { width: 100%; height: 38px; padding: 5px 45px 5px 15px; box-sizing: border-box; background: #3d3d3d; color: #fff;}

  1. 메뉴텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 42줄 42 .top_member_box > li a { display: inline-block; padding: 4px 0 4px 20px; color: #8a8a8a; font-size: 13px;}

  1. 메뉴텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 199줄 199 #header .gnb .depth0 > li > a { display: inline-block; padding: 0 40px; min-width: 70px; font-size: 15px; text-align: center; line-height: 50px; color: #fff; background: url(../../img/etc/blt_gnb_line.png) left center no-repeat;}

  1. 오버메뉴 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 202줄 202 #header .gnb .depth0 > li:hover > a { color: #dd3d42;}

  1. 소메뉴의 오버시background(배경색) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 213줄 *212줄, 208줄, 207줄 동일 213 #header .gnb .depth1 li a.active { background: #545454; color: #ffffff;}

  1. 소메뉴의 배경background(배경색) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 215줄 215 #header .gnb .depth1 { display: none; position: absolute; top: 50px; left: 0; width: 100%; background: rgba(0,0,0,.6); z-index: 100;}

  1. 공지사항 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 223줄 223 .notice_rolling ul li a { overflow: hidden; display: block; padding: 7px 5px 7px 5px; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; line-height: 1; color: #8a8a8a; font-size: 13px;}

  1. 장바구니 상품수color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 45줄 45 .top_member_box > li strong { color: #dd3d42;}

[좌측 메뉴형] 메뉴 영역 변경하기

  1. 카테고리 텍스트의 color(색상) 변경해줍니다. 변경 위치 css > layout > layout.css 79줄 79 .gnb .gnb_all strong { display: table-cell; width: 157px; height: 40px; padding: 0 0 0 3px; font-size: 14px; vertical-align: middle; color: #fff;}

  1. 메뉴 텍스트의 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 187줄 187 .sub_menu_box .sub_depth0 > li > a { display: block; padding: 10px 10px 10px 3px; font-size: 14px; font-weight: bold; text-align: left; color: #fff;}

  1. 메뉴 오버 시, 텍스트의 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 188줄 188 .sub_menu_box .sub_depth0 > li > a.active { background: url(../../img/common/btn/btn_gnb_list_over.png) no-repeat 174px center; color: #dd3d42;}

  1. 화살표아이콘의 background: url 을 변경해줍니다. 변경 위치 css > layout > layout.css 188줄 188 #header .gnb .depth0 > li > a { display: inline-block; padding: 0 40px; min-width: 70px; font-size: 15px; text-align: center; line-height: 50px; color: #fff; background: url(../../img/etc/blt_gnb_line.png) left center no-repeat;}

  1. 오버메뉴의 배경 background(배경색) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 202줄 *201줄, 197줄, 196줄 동일 202 .sub_menu_box .sub_depth1 li a.active { background: #545454; color: #ffffff;}

  1. 소메뉴의 배경 background(배경색) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 204줄 204 .sub_menu_box .sub_depth1 { display: none; position: absolute; top: 0px; left: 100%; min-width: 160px; background: rgba(0,0,0,.6); z-index: 100;}

  1. 검색배경 background(배경색) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 75줄 75 .top_search { position: relative; width: 180px; float: left; z-index: 110; background: #3d3d3d;}

  1. 상단 메뉴의 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 45줄 45 .top_member_box > li > a { color: #fff;}

  1. 장바구니 상품 수 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 48줄 48 .top_member_box > li strong { color: #dd3d42;}

상품진열 - 테두리 삭제하기 (갤러리형)

✔️더리빙스킨의 스킨을 설치시 테두리가 보이는 기본 갤러리형이 설치되어있습니다. 간단한 css수정으로 샘플샵과 같이 메인테두리를 삭제 할수 있습니다.

border(테두리)의 /* */해당 주석을 삽입해주세요. 변경 위치 css > goods > list.css 30줄 30 .item_photo_box { display: inline-block !important; overflow: hidden; position: relative; text-align: left; /* border: 1px solid #ebebeb; */ vertical-align: middle;}

하단 영역 변경하기

  1. 고객센터, 계좌번호 정보의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 375줄 375 .content_info {overflow: hidden; padding: 50px 0 40px 0; color: #b1b1b1;}

  1. 공지사항 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 398줄 398 .content_info .notice_list ul a { display: inline-block; overflow: hidden; width: 93%; color: #b1b1b1; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word;}

  1. 기본안내버튼 텍스트의color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 410줄 410 .foot_list ul li a { font-weight: bold; padding: 0; color: #b1b1b1; font-size: 12px;}

  1. 하단기본정보의 color(색상) 값을 변경해줍니다. 변경 위치 css > layout > layout.css 413줄 413 .foot_cont { overflow: hidden; padding: 35px 0 0; color: #555; font-size: 12px; line-height: 1.8; text-align: center;}

로고 변경 [배너 관리] 특이사항

  1. THE LIVING 스킨은 설치 시, 상단 영역의 색상이 검정색으로 기본 설정되어 있습니다. 이 영역의 색상은 원하는 색으로 자유롭게 변경이 가능합니다.

  1. THE LIVING의 로고는 하얀색 PNG 이미지로 제작되었습니다. 배경 색상과 관계없이 사용할 수 있도록 배경 없이 제작하였습니다. 배경색 변경 시에도 별도의 로고 수정 작업 없이 사용 가능합니다.

  1. 로고를 변경할 경우, 기존과 동일한 배경이 없는 PNG 파일로 설정하는 것을 권장드립니다. JPG 파일로 로고를 설정할 경우, 배경의 컬러와 동일한 컬러를 배경으로 한 로고를 업로드하시길 바랍니다.

  1. 로고는 디자인-디자인 설정-배너관리 를 통해서 수정이 가능하며, 아래 표기된 영역을 수정해 주시면 됩니다. *로고 컬러가 흰색이라 보이지 않음

메인

상품진열 컬러 변경하기

  1. 브랜드 텍스트에서 color(색상) 변경해줍니다. 변경 위치 css > goods > list.css 44줄 44 .item_tit_box .item_brand { display: block; color: #888888;}

  1. 상품명 텍스트에서 color(색상) 변경해줍니다. 변경 위치 css > goods > list.css 45줄 45 .item_tit_box .item_name { display: block; padding: 5px 0 0 0;}

  1. 짧은설명 텍스트에서 color(색상) 변경해줍니다. 변경 위치 css > goods > list.css 46줄 46 .item_tit_box .item_name_explain { display: block; padding: 0 10px 0 0px; color: #a8a8a8;}

  1. 원가 텍스트에서 color(색상) 변경해줍니다. 변경 위치 css > goods > list.css 52줄 52 .item_money_box del { display: block; color: #888888;}

  1. 판매가 텍스트에서 color(색상) 변경해줍니다. 변경 위치 css > goods > list.css 53줄 53 .item_money_box .item_price { display: block; padding: 7px 0 5px 0; font-size: 14px; color: #dd3d42;}

인스타그램 기능 이용하기

  1. 관리자모드에서 프로모션-인스고위젯관리 를 설정해줍니다.

  1. 인스고 위젯 관리에서 치한코드 복사로 복사합니다.

  1. 디자인페이지 수정에서 main/index.html 에 붙여 넣습니다. 코드는 현재의 소스와 동일하게 넣어주시면 샘플샵처럼 배경을 설정할 수 있습니다. 변경 위치 main > index.html 72줄 72 {=includeWidget('proc/_insgo.html', 'sno', '1')}{ # footer }

상품상세

상품 상세영역 변경하기

  1. 상품명의font-size(폰트사이즈) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 44줄 44 .item_detail_tit h3 { width: 405px; font-size: 18px;}

  1. 정가의color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 52줄 52 .item_detail_list del { color: #333;

  1. 판매가의font-size(폰트사이즈) 값을 변경해줍니다. (color 색상을) 추가할수도 있습니다. 변경 위치 css > goods > goods.css 54줄 54 .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold;}

  1. 총합계금액의color(색상) 값을 변경해줍니다. 변경 위치 css > goods > goods.css 92줄 92 .item_tatal_box .total_amount dd { color: #dd3d42; font-weight: bold;}

주문결제

장바구니 타이틀 영역 변경하기

  1. 장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 14줄 14 .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222;}

  1. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경해줍니다. 변경 위치 css > order > order.css 17줄 17 .order_wrap .order_tit .page_on { color: #dd3d42; font-weight: bold;}

  1. 다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 16줄 16 .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1;}

  1. 장바구니 타이틀 폰트 하단의 border-bottom(선) 값을 변경해줍니다. 변경 위치 css > order > order.css 13줄 13 .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb;}

주문서 금액 변경하기

  1. 금액에 관련된 color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 137줄 137 .price_sum_cont .price_sum_list dd { color: #dd3d42;}

  1. 원 텍스트에 관련된 color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 138줄 138 .price_sum_cont .price_sum_list dd {color: #dd3d42;}

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

  1. 최종결제 금액 폰트의 color(색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 323줄 323 .payment_final_total dd { display: inline-block; font-size: 30px; color: #dd3d42;}

  1. 결제하기 버튼의 background(배경색), border(#f0bc0c - 테두리색상) 값을 변경해줍니다. 변경 위치 css > order > order.css 138줄 138 .btn_order_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid #dd3d42; background: #dd3d42; text-align: center;}

Previous더 리빙(THE LIVING)NextTHE LIVING_Mobile 스킨 가이드

Last updated

Logo

NHN COMMERCE

공지사항회사소개

Partners

서비스 제휴문의셀러어드민디자인 파트너

Developers

스토어

©NHN COMMERCE Corp. All rights reserved.