상단 로고

아래는 별모아 No 84 디자인의 상단 노란색 메뉴바 색상을 변경하는 방법입니다.

PC디자인과 모바일 디자인 각각 수정해주셔야 합니다.

< 상단 카테고리 메뉴바 색상 수정하기 - PC디자인 >

PC디자인 상단의 노란색으로 된 메뉴바 색상을 원하시는 색상으로 수정하는 방법입니다. 

쇼핑몰 관리자페이지의 디자인(PC/모바일)  > 디자인보관함에서 

상단의 PC 탭 클릭 후, 수정할 디자인 옆의 편집 버튼을 클릭하면 스마트디자인 편집창이 뜹니다. 

스마트 디자인 편집창이 뜨면 편집창 왼쪽 하단의 화면명 검색에서 base.css 파일을 검색하여 

/layout/basic/css/base.css 에 체크 후 선택파일열기 버튼을 클릭합니다.

편집창 하단에 3개의 작은 아이콘이 있는데 가장 오른쪽 아이콘을 클릭하시면

소스 편집창을 넓게 사용 가능합니다.

소스 중에서 280행 근처에 아래 소스가 있습니다.

아래 소스중에서 빨간색으로 된 부분을 원하시는 색상 코드로 수정해주시기 바랍니다.

색상코드 수정시 바로 뒤의 ; 가 지워지지않도록 유의 바랍니다.

코드 수정 후 스마트 디자인 편집창 왼쪽 상단의 ‘저장’ 버튼을 반드시 클릭해주세요.

/* 상단메뉴 2 */

#top_menu2 {

    margin-top:0px;

    background-color: #fdd736;

    height: 34px;

    width: 100%;

    font-weight:bold;

    }

그 다음, 스마트 디자인 편집창 왼쪽 하단의 화면명 검색에서 layout.css 파일을 검색하여 

/layout/basic/css/layout.css  에 체크 후 선택파일열기 버튼을 클릭합니다. 

소스 중에서 59행 근처에 아래 소스가 있습니다.

아래 소스 중에서 빨간색으로 된 부분을 위에서 수정한 색상코드와 동일한 색상 코드로 수정해주시기 바랍니다. 

색상코드 수정시 바로 뒤의 ; 가 지워지지않도록 유의 바랍니다.

코드 수정 후 스마트 디자인 편집창 왼쪽 상단의 ‘저장’ 버튼을 반드시 클릭해주세요.

/* 모든환경 : 상단메뉴2 전체영역 (전체 상품목록 & 카테고리 or 메뉴) */

#top_menu2_outer { width:100%; border-top:0px solid #d7d7d7; border-bottom:0px solid #d7d7d7;   background-color:#fdd736; z-index:999; }

아래는 메뉴의 글자 색상을 수정하는 방법입니다.

메뉴바의 색상에 어울리는 글자색으로 수정 가능합니다.

상단 노란색 메뉴바의 검정색 글자 색상도 다른 색상으로 수정하고싶으시면

스마트 디자인 편집창 왼쪽 하단의 화면명 검색에서 nav.css 파일을 검색하여 

/css/nav.css  에 체크 후 선택파일열기 버튼을 클릭합니다.

소스 중에서 15행 근처에 아래 소스가 있습니다.

아래 소스 중에서 빨간색으로 된 부분 두 군데의 소스를 둘 다 

원하시는 색상 코드로 수정해주세요. 두 개의 색상 코드가 동일해야 합니다.

코드 수정 후 스마트 디자인 편집창 왼쪽 상단의 ‘저장’ 버튼을 반드시 클릭해주세요.

(유의사항) 색상코드 바로 뒤의 ; 가 지워지지않도록 유의 바랍니다.

/* 대분류 */

   #category-lnb .d1-wrap { display:inline-block; text-align:center; margin-left:-24px; }

/* 대분류 간격 조절 */

   #category-lnb .d1-wrap li { z-index:1; float:left; padding:0 15px 0 15px; height:42px; line-height:42px; }

   #category-lnb .d1-wrap li a { font-size:15.5px; color: #000000; font-weight:bold; }

   #category-lnb .d1-wrap a:hover { color:#000000; }

------------------------------------------------------------------------------------------------------------------------------------

< 상단 카테고리 메뉴 배경 색상 수정하기 - 모바일디자인 >

모바일 디자인 상단의 상품 카테고리 메뉴 영역의 노란색 배경 색상을 원하시는 색상으로 수정하는 방법입니다. 

쇼핑몰 관리자페이지의 디자인(PC/모바일)  > 디자인보관함에서 

상단의 모바일 탭 클릭 후, 수정할 디자인 옆의 편집 버튼을 클릭하면 스마트디자인 편집창이 뜹니다. 

스마트 디자인 편집창이 뜨면 편집창 왼쪽 하단의 화면명 검색에서 layout.css 를 검색하여 

/layout/basic/css/layout.css 에 체크 후 선택파일열기 버튼을 클릭합니다.

소스 중에서 390행 근처에 아래 소스가 있습니다.

아래 소스중에서 빨간색으로 된 부분이 카테고리 메뉴 영역의 배경색상입니다.

현재 노란색으로 되어있습니다. 원하시는 색상 코드로 수정해주시기 바랍니다.

색상코드 수정시 바로 뒤의 ; 가 지워지지않도록 유의 바랍니다.

그리고 아래 소스에서 녹색으로 된 색상코드가 두 군데 있는데

메뉴 사이사이의 구분선 (사각 테두리)색상입니다.

배경색상과 어울리는 색상으로 수정해주세요.

녹색 색상코드 2개는 둘 다 동일한 색상으로 수정해주세요.

그리고 아래 소스에서 파란색으로 된 색상코드가 두 군데 있는데

카테고리 메뉴의 글자 색상입니다.

배경색상과 어울리는 글자 색상으로 수정해주세요.

파란색 색상코드 2개는 둘 다 동일한 색상으로 수정해주세요.

색상코드 수정 후 스마트 디자인 편집창 왼쪽 상단의 ‘저장’ 버튼을 반드시 클릭해주세요.

(유의사항) 색상코드 바로 뒤의 ; 가 지워지지않도록 유의 바랍니다.



/* 카테고리 메뉴 영역 배경색 */

.xans-layout-category {  font:굴림;  }

.xans-layout-category > ul { padding-bottom:0px; background-color:#fdd736; }

.xans-layout-category > ul:after {content:''; display:block; clear:both;}

/* 카테고리 메뉴 영역 세로길이 */

.xans-layout-category > ul > li { width: 33%; float:left; position:relative; z-index:50; height:28px; white-space:nowrap; border-right: 1px solid #edc002; border-bottom: 1px                                      solid #edc002; text-align:center; vertical-align:middle; overflow:hidden; }

/* 카테고리 메뉴 세로 위치 조절, 글자색 */

.xans-layout-category > ul > li > a { display:block; width:100%; height:100%; color:#2a2a2a; font-weight:normal; line-height:2.2em; 

                                      font-size:13px; font-weight:bold;

                                        }

.xans-layout-category > ul > li > a.on,

.xans-layout-category > ul > li > a:hover { color:#2a2a2a; text-decoration:none; }

.xans-layout-category > ul > li > a.on { background:url('//img.echosting.cafe24.com/design/skin/fashion013/header_category_arrow.png') no-repeat 50% 100%; }