# 클레마티스(clematis)

> **`카테고리`** 주얼리
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵🖥️ 보기 →](http://design2.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)

<details>

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

1. 컬러코드값 확인\
   clematis 스킨에 적용되어 있는 기본 컬러 코드 **#ab3e55**을 확인합니다. \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Ft4Ytduy0nuDjaaqGiTBu%2Fimage.png?alt=media\&token=5836027f-c98c-4419-ae7a-eed45001b73c)
2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FSeDN1OAWpC4kiGUu3Y8x%2Fimage.png?alt=media\&token=ca1d1c64-d37c-4d49-98f8-b4ef2353ffc3)<br>
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#ab3e55**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
   \
   mypage.css (총 11개) \
   layer.css (총 22개) \
   common.css (총 26개) \
   service.css (총 7개) \
   order.css (총 7개) \
   layout.css (총 22개) \
   member.css (총 20개) \
   goods.css (총 13개) \
   list.css (총 4개) \
   event.css (총 6개) \
   board.css (총 15개) \
   button.css (총 76개)
5. 마우스 오버시 컬러 **#99354a**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.&#x20;

</details>

<details>

<summary>상단 메뉴 변경하기</summary>

<img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FxZ6QFkGsxYbuS3vpSALm%2Fimage.png?alt=media&#x26;token=a6ff2729-f994-4217-b5e1-eb6e0db79174" alt="" data-size="original">

✔️  **메뉴 색상 변경**&#x20;

`변경 위치` 스타일시트 > custom.css **85줄**\
&#x20; `85` .top\_member\_box > li a {  color: <mark style="background-color:orange;">#ffffff</mark>;  font-size: 13px;  font-weight: normal;}

✔️  **메뉴 배경 색상 변경**&#x20;

`변경 위치` 스타일시트 > layout > layout.css **215줄**\
&#x20; `215` #header .gnb .depth1 {display: none; position: absolute;    top: 48px; left: 0; width: 160px; background: <mark style="background-color:orange;">#a26d6d</mark>; z-index: 100;}

</details>

<details>

<summary>상품 이미지 사이즈 설정하기</summary>

디자인 스킨을 다운받고, 그 디자인 컨셉에 맞게 상품 세팅을 하려면, \
가장 먼저 상품 이미지 사이즈  세팅이 필요합니다. \
\
⚠️단, 상품이 이미 등록되어있는 경우\
상품 이미지 사이즈 세팅을 다시 하면 모든 상품의 이미지 등록을 새로 진행해야 합니다.

⚠️상품 이미지 사이즈 설정 전, 각 상품 이미지 노출 위치 먼저 확인하시기 바랍니다. [상품이미지 사이즈 설정 매뉴얼 바로가기 > ](http://manual.godomall5.godomall.com/data/manual_view.php?category=policy__goods___goods_images#%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%82%AC%EC%9D%B4%EC%A6%88%EC%84%A4%EC%A0%95%EB%B0%A9%EB%B2%95)

✔️ **관리자 메뉴 위치** : 기본설정 > 상품 정책 > 상품 이미지 사이즈 설정\
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FtTuKjNlbVyDcMrcah5LW%2Fimage.png?alt=media\&token=95f5294e-91d3-43df-b307-f51d9a2fb7d9)

✔️ **이미지 설정 예시**\
\- 가로 270 pixel / 세로 320 pixel (리스트그룹형 사이즈)\
&#x20; \- 가로 280 pixel / 세로 280 pixel (탭 진열형 사이즈)\
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FtJVJMbH7yJssm6ETCCV0%2Fimage.png?alt=media\&token=716b18c1-6c1d-4c10-bdbd-043dda7e2c46)

✔️ **탭 진열형 세팅하기**\
상품 > 상품 진열 관리 > 메인페이지 상품진열에서 **상품진열 테마선택에 탭진열형**을 선택합니다.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FTYldKx2YeUgAbFVSaKr3%2Fimage.png?alt=media\&token=7e1ece73-0e2f-4ade-afb4-36e3ac4cef51)

</details>

<details>

<summary>동영상 변경하기</summary>

**1️. 동영상 업로드하기**

먼저, 동영상을 업로드 합니다.\
샘플 사이트에서는 VIMEO 서비스를 사용했습니다. (<https://vimeo.com/)>\
⚠️ 유튜브 동영상 사용시에도 방법은 동일합니다.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fxkq4fEQlXNqXZGahEgEZ%2Fimage.png?alt=media\&token=7cb3ba93-7ce2-473d-8873-5fe931a46c96)

**2. 동영상 복사하기**

임베딩 소스를 복사합니다.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FVZqUQyq0kzSaVjGZZt4K%2Fimage.png?alt=media\&token=6ea1b531-54f5-471a-a791-bfc2b91eb524)

**3.** **css 수정하기**

아래 가이드를 참고해 index.html 파일내  56번 줄에 위치한 아이프레임내 링크를 변경하고자 하는 링크로 수정합니다.

`변경 위치`  main > index.html **56줄**

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F8zLNtwyIYfXCAPcCv6kw%2Fimage.png?alt=media\&token=53148abd-d604-455c-8007-84b9538d4261)

</details>

<details>

<summary>동영상 삭제하기</summary>

동영상 삽입 소스를 삭제해야 합니다.

`삭제 위치`  main > index.html **56줄**\
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FGIda3zxMoPBFPAn84pnJ%2Fimage.png?alt=media\&token=8b4a79ca-33a8-46f7-ae62-43ece0ba9413)

`삭제 위치`  main > index.html **54줄**\
![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FHQ0QkcjcZDgBxhXJGoIQ%2Fimage.png?alt=media\&token=84209c23-c0c6-4092-950f-d02a5be95112)

</details>