# THE LIVING\_PC 스킨 가이드

> #### 공통

<details>

<summary>포인트 컬러 일괄 변경하기</summary>

1. 컬러코드값 확인\
   THE LIVING 스킨에 적용되어 있는 기본 컬러 코드 **#dd3d42**을 확인합니다. \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FEC4GJMf7afJyCIMO3l3V%2Fimage.png?alt=media\&token=325b7536-e096-4182-b1aa-88f843e77262)\


2) **관리자 > 디자인 메뉴 접속** &#x20;

3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fh6FHLsMr4YwY6bHqfPWH%2Fimage.png?alt=media\&token=1bc86456-67b3-4435-9298-742ed90f546e)\


4) ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#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개)

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

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F99igAZmi88KtFPwaSnz1%2Fimage.png?alt=media\&token=7e1c06ce-02e1-4cdd-9289-f972ee6a10a6)

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

2) 로고이미지를 배경이 없는 **PNG 파일로** 변경해줍니다.&#x20;
3) 서치 영역의**background(배경색)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **79줄**\
   &#x20; `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;}

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

5) 메뉴텍스트의**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **199줄**\
   &#x20; `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;}

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

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

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

9) 공지사항 텍스트의**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **223줄** \
   &#x20; `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;}&#x20;

10. &#x20;장바구니 상품수**color(색상)** 값을 변경해줍니다. \
    `변경 위치`  css > layout > layout.css **45줄** \
    &#x20; `45` .top\_member\_box > li strong {    color: #dd3d42;}

</details>

<details>

<summary>[좌측 메뉴형] 메뉴 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FK0skVNhq3YrNLzHtTgM7%2Fimage.png?alt=media\&token=3c474e69-b3e1-40c8-9193-6357af78d3e6)

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FM6qQhLjELjq3lB4qg48K%2Fimage.png?alt=media\&token=aec0f653-be65-44b4-b1bf-65c4067e3697)

1. 카테고리 텍스트의 **color(색상)** 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **79줄**\
   &#x20; `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;}

2) 메뉴 텍스트의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **187줄**\
   &#x20; `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;}

3. 메뉴 오버 시, 텍스트의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **188줄**\
   &#x20; `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;}

4) 화살표아이콘의 **background: url** 을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **188줄**\
   &#x20; `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;}

5. 오버메뉴의 배경 **background(배경색)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **202줄 \*201줄, 197줄, 196줄 동일**\
   &#x20; `202` .sub\_menu\_box .sub\_depth1 li a.active {    background: #545454;    color: #ffffff;}

6) 소메뉴의 배경 **background(배경색)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **204줄**\
   &#x20; `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;}

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

8) 상단 메뉴의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **45줄**\
   &#x20; `45` .top\_member\_box > li > a {    color: #fff;}

9. 장바구니 상품 수 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **48줄**\
   &#x20; `48` .top\_member\_box > li strong {    color: #dd3d42;}

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FpjjRiRSK34G0kxBo8mKW%2Fimage.png?alt=media\&token=7759cfc3-e631-4c3e-a004-f87e9c7cb597)

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

**border(테두리)**&#xC758; **/\* \*/**&#xD574;당 주석을 삽입해주세요.\
`변경 위치`  css > goods > list.css **30줄**\
&#x20; `30` .item\_photo\_box {    display: inline-block !important;    overflow: hidden;    position: relative;    text-align: left;    <mark style="background-color:orange;">/\*</mark> border: 1px solid #ebebeb; <mark style="background-color:orange;">\*/</mark>    vertical-align: middle;}

</details>

<details>

<summary>하단 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FvFvuthBus64GtWlLXZOt%2Fimage.png?alt=media\&token=19db5a6c-09e1-41da-8b3c-9ce6223ef8bb)

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

2) 공지사항 텍스트의**color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > layout > layout.css **398줄**\
   &#x20; `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;}

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

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

</details>

<details>

<summary>로고 변경 [배너 관리] 특이사항</summary>

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

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

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

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

<img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FNBX9rWK5NNRIs3I5kWd2%2Fimage.png?alt=media&#x26;token=1364b4b8-8004-4174-a8bd-f4441842d6a6" alt="" data-size="original">

</details>

> #### 메인

<details>

<summary>상품진열 컬러 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FHG1TFI1zCSTzqmO5Lrrr%2Fimage.png?alt=media\&token=51cbcf5b-1331-4bbf-b931-da0dd87b2c79)

1. 브랜드 텍스트에서 **color(색상)** 변경해줍니다. \
   `변경 위치` css > goods > list.css **44줄**\
   &#x20; `44` .item\_tit\_box .item\_brand {    display: block;    color: #888888;}

2) 상품명 텍스트에서 **color(색상)** 변경해줍니다. \
   `변경 위치` css > goods > list.css **45줄**\
   &#x20; `45` .item\_tit\_box .item\_name {    display: block;    padding: 5px 0 0 0;}

3. 짧은설명 텍스트에서 **color(색상)** 변경해줍니다. \
   `변경 위치` css > goods > list.css **46줄**\
   &#x20; `46` .item\_tit\_box .item\_name\_explain {    display: block;    padding: 0 10px 0 0px;    color: #a8a8a8;}

4) 원가 텍스트에서 **color(색상)** 변경해줍니다. \
   `변경 위치` css > goods > list.css **52줄**\
   &#x20; `52` .item\_money\_box del {    display: block;    color: #888888;}

5. 판매가 텍스트에서 **color(색상)** 변경해줍니다. \
   `변경 위치` css > goods > list.css **53줄**\
   &#x20; `53` .item\_money\_box .item\_price {    display: block;    padding: 7px 0 5px 0;    font-size: 14px;    color: #dd3d42;}

</details>

<details>

<summary>인스타그램 기능 이용하기</summary>

1. 관리자모드에서 **프로모션-인스고위젯관리** 를 설정해줍니다. \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FEJlt4Sl26x1UAh76tX0q%2Fimage.png?alt=media\&token=0711e5ea-3521-4e23-8522-9e1961b818ea)

2) 인스고 위젯 관리에서 **치한코드 복사**로 복사합니다. \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FSz0tcjwLx8TVM9vqliGn%2Fimage.png?alt=media\&token=3d0ef867-b353-4674-a834-c70f36e83349)

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

</details>

> #### 상품상세

<details>

<summary>상품 상세영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FvSm1b8B97Ep6jl324H18%2Fimage.png?alt=media\&token=cd776048-6204-46c6-b5cf-ceb2cef266a5)

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

2) 정가의**color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **52줄**\
   &#x20; `52` .item\_detail\_list del {    color: #333;

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

4) 총합계금액의**color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **92줄**\
   &#x20; `92` .item\_tatal\_box .total\_amount dd {    color: #dd3d42;    font-weight: bold;}

</details>

> #### 주문결제

<details>

<summary>장바구니 타이틀 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FetEbalHQWqeHdPmgAmPm%2Fimage.png?alt=media\&token=0627edb4-44cd-4156-8bdc-8ec209ba4a76)

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

2) 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **17줄**\
   &#x20; `17` .order\_wrap .order\_tit .page\_on {    color: #dd3d42;    font-weight: bold;}

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

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

</details>

<details>

<summary>주문서 금액 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Ft1hXTgCi8qkiDn88khWS%2Fimage.png?alt=media\&token=5a279448-59f2-49a3-9011-c7806b134ee1)

1. 금액에 관련된 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **137줄**\
   &#x20; `137` .price\_sum\_cont .price\_sum\_list dd {    color: #dd3d42;}

2) 원 텍스트에 관련된 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > order > order.css **138줄**\
   &#x20; `138` .price\_sum\_cont .price\_sum\_list dd {color: #dd3d42;}

</details>

<details>

<summary>최종금액, 결제하기 버튼 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FNUF9eLWafM9FWMtWUbzB%2Fimage.png?alt=media\&token=8aba468c-4eb1-4b42-9623-a696ff17a121)

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

2) 결제하기 버튼의 **background(배경색), border(#f0bc0c - 테두리색상)** 값을 변경해줍니다.\
   `변경 위치`  css > order > order.css **138줄**\
   &#x20; `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;}

</details>
