# 해피애니멀(Happy Animall)

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

<details>

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

1. 컬러코드값 확인\
   Happy Animall 스킨에 적용되어 있는 기본 컬러 코드 **#5879c7**을 확인합니다.&#x20;
2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\
   해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다.&#x20;
3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FHBrxOARd5KnW8pBmLf1S%2Fimage.png?alt=media\&token=8ed5ba62-01ae-4841-ab2b-a0929710eb59)<br>

4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#5879c7**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
   \
   mypage.css (총 4개) \
   proc.css (총 5개) \
   main.css (총 1개) \
   order.css (총 11개) \
   list\_06.css (총 4개) \
   list\_09.css (총 4개) \
   list\_04.css (총 4개) \
   list\_07.css (총 4개) \
   list\_01.css (총 4개) \
   list\_11.css (총 7개) \
   list\_02.css (총 4개) \
   gd\_layout.css (총 3개) \
   gd\_button.css (총 160개) \
   gd\_common.css (총 1개)

</details>

<details>

<summary>상단 공지사항 컬러 및 크기 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FITPzEt1Y4fzvmqUMbaqe%2Fimage.png?alt=media\&token=e76b949a-11d1-4878-9be7-0fd32a9bee66)

1. "공지" 부분의 폰트 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치`  main > notice > main.css **17줄**\
   &#x20; `17` .order\_end .order\_end\_box h2 { display: table-cell; width: 33px; padding-left: 20px;    font-size: 13px;    font-weight: bold;    color: #626262;    text-align: left;}<br>
2. 공지사항 "내용" 부분의 폰트 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  main > notice > main.css **20줄**\
   &#x20; `20` .order\_end .order\_end\_box h2 { display: block; width: 100%; color: #626262;}

</details>

<details>

<summary>진​열 상품 이미지 테두리 없애기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F0nRiXg3CxQfCxLpv0tZX%2Fimage.png?alt=media\&token=c9b273fd-d646-4782-bddb-0167f11c7172)

✔️ 진열 상품 이미지 **border(테두리)** 부분 전체를 삭제합니다.&#x20;

`변경 위치`  goods > ist > list 02.css **8줄**\
&#x20; `8` .goods\_prd\_item .goods\_prd\_img .img\_box .img img width: 100%; border: 1px solid #e5e5e5; box-sizing: border-box;}

</details>

<details>

<summary>고객센터, PC화면 버튼 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FLWH4bICtDlD4PscqpZsj%2Fimage.png?alt=media\&token=b93e7f4b-3f15-4fd5-b0b0-5aa1c644d5f2)

✔️ 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경해줍니다.&#x20;

`변경 위치` css > gd\_layout.css **133줄**\
&#x20; `133` #footer footer .ft\_button\_box ul li a {    display: block;    padding: 10px 0;    background: #ffffff;    color: #585858;    font-size: 13px;    border: #dcdbdc 1px solid;;}

</details>