상단 로고

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

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  에 체크 후 선택파일열기 버튼을 클릭합니다. 

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

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

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

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

/* 모든환경 : 상단메뉴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  에 체크 후 선택파일열기 버튼을 클릭합니다.

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

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

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

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

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

/* 대분류 */

   #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; }

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

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

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

모바일쇼핑몰 > 디자인 보관함에서 해당 디자인의 수정 버튼을 클릭하여 

스마트 디자인 편집창이 뜨면 편집창 왼쪽 하단의 화면명 검색에서 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%; }