# 어썸(Awesome)
> **`카테고리`** 남성 패션
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵🖥️ 보기 →](http://design21.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\
Awesome 스킨에 적용되어 있는 기본 컬러 코드 **#b8874d**을 확인합니다. \
\
2. **관리자 > 디자인 메뉴 접속**
3. **스타일시트/CSS 변경** \
좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
4. ctrl+F 검색 후 수정하기\
스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#b8874d**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
\
css/button.css (56개) \
css/custom.css (1개)
css/board/board.css (13개)
css/common/common.css (18개)
css/common/layer/layer.css (16개)
css/event/event.css (6개)
css/goods/goods.css (13개)
css/goods/list.css (4개)
css/layout/layout.css (28개)
css/member/member.css (18개)
css/mypage/mypage.css (11개)
css/order/order.css (7개)
css/service/service.css (7개)
5. 마우스 오버시 컬러 **#a67842**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
상단 배너 영역 디자인 수정하기
1. 배너 설명
`위치` Awesom 스킨 상단 영역\
`유형`\
\- 펼치기 - 접기가 가능한 배너 \
\- 상단의 \[ **∨** ] 버튼을 누르면 펼쳐지는 형식\
`효과` 이벤트 요소로 고객들의 궁금증을 시각적으로 높여 보여주는 효과
2. 배너 수정
`메뉴 위치` 관리자 > 디자인설정 > 배너관리\
`배너 사이즈` 1200 X 155 (\*팝업/배너PSD 참고)
3. 배경색 변경\
`변경 위치` css > custom.css **22줄**\
`22` #header .top\_banner\_cont{position:relative; overflow:hidden; height:40px; background:#efeeea; text-align:center;}\
\
⚠️배경색을 변경해 이미지와 상단영역의 색상을 맞추시길 권장드립니다.
GNB영역 디자인 수정하기
1. 배경색 변경\
흰색 컬러코드(#fff)를 원하는 컬러 코드값으로 변경합니다.\
`변경 위치` css > custom.css **171줄**\
`171` #header .header\_gnb{position:relative;background:#fff;}
2. 카테고리 텍스트 사이즈/색상 변경\
폰트사이즈(font-size)와 색상(color)을 원하는 값으로 수정합니다.\
`변경 위치` css > custom.css **173줄**\
`173` #header .gnb .depth0 > li > a{position:relative; padding-bottom:9px; font-size:18px; font-weight:normal; line-height:39px; color:#8e8e8e;}
검색창 키워드 디자인 수정
1. 검색창 키워드 설정
`메뉴 위치` 관리자 > 상품> 상품 노출형태 관리 > 검색창 관련 설정\
⚠️해당 메뉴 위치에서 상품 검색 키워드 설정 시에만 '검색창 키워드'가 노출됩니다.
2. 검색창 키워드 색상(color) 변경\
`변경 위치` css > custom.css **59줄**\
`59` #header .top\_search .top\_text\_cont .top\_srarch\_text::placeholder {color:#bababa; font-weight:bold; font-size:18px;}
3. 검색창 키워드 Bold 해제\
font-weight:bold를 삭제해주세요.
`변경 위치` css > custom.css **59줄**\
`59` #header .top\_search .top\_text\_cont .top\_srarch\_text::placeholder {color:#bababa; font-weight:bold; font-size:18px;}
4. 검색창 키워드 크기 변경\
원하는 크기로 코드값 \[font-size:사이즈px]를 입력해주세요.
`변경 위치` css > custom.css **59줄**\
`59` #header .top\_search .top\_text\_cont .top\_srarch\_text::placeholder {color:#bababa; font-weight:bold; font-size:18px;}
상품명/ 짧은 설명/원가/판매가 디자인 수정
* 폰트 사이즈 수정 시, font-size에 원하는 값을 입력해주세요.
* 색상 수정 시, color에 원하는 값을 입력해주세요.
✔️**상품명 디자인 수정**
`변경 위치` css > good > list.css **48줄**\
`48` .item\_tit\_box .item\_name{display:block; padding:5px 0 0 0; font-size:13px; word-break: break-all; color:#fa2828}
\
✔️**짧은 설명 디자인 수정**
`변경 위치` css > good > list.css **49줄**\
`49` .item\_tit\_box .item\_name\_explain{display:block; padding:0 10px 0 0px; color:#a8a8a8; font-siez:18px;}
\
✔️**원가 디자인 수정**
`변경 위치` css > good > list.css **55줄**\
`55` .item\_money\_box del{display:block; color:#888888; font-siez:18px;}
\
✔️**판매가 디자인 수정**
`변경 위치` css > good > list.css **56줄**\
`56` .item\_money\_box .item\_price{display:block; padding:7px 0 5px 0; font-size:14px; color:#b8874d;}
은행계좌/고객센터 디자인 수정하기
* 폰트 사이즈 수정 시, font-size에 원하는 값을 입력해주세요.
* 색상 수정 시, color에 원하는 값을 입력해주세요.
✔️**무통장 계좌 번호 디자인 수정**
`변경 위치` css >custom.css **111줄**\
`111` .content\_info .bank\_info strong{padding:0; color:#999999; font-size:19px; font-weight:normal;}
✔️**무통장 계좌 은행명, 예금주 디자인 수정**
`변경 위치` css > custom.css **112줄**\
`112`.content\_info .bank\_info p{font-size:12px; color:#999999;}
✔️**고객센터 번호 디자인 수정**
`변경 위치` css > custom.css **106줄**\
`106` .content\_info .cs\_center strong{padding:0;color:#999999;font-size:19px;font-weight:normal;}
✔️**고객센터 운영안내 디자인 수정**
`변경 위치` css > custom.css **107줄**\
`107` .content\_info .cs\_center p{font-size:12px; color:#999999;}