현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 별모아 No 80 - 상단 메뉴바 색상 변경하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2021-10-15
  • 추천 추천하기
  • 조회수 11


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

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




상단 메뉴바 색상 수정하기 - PC디자인 >



PC디자인 상단의 로고 바로 아래에 있는 연두색으로 된 메뉴바 색상을 원하시는 색상으로 수정하는 방법입니다



 



디자인 관리 디자인 보관함에서 해당 디자인의 수정 버튼을 클릭하여 

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

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


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

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



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

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

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

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

 


/* 상단메뉴 1 */

#top_menu1_all {

 width:100%;

 height:12px;

 padding:10px 0px 13px 0px;

 text-align:center;

 font-size:13px;

 font-weight:bold;

 background-color:#92c428;

 border-top:1px solid #fff;

 }

 


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

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


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

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

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

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

 

 

/* 태블릿 & PC : 상단 메뉴 박스 */

#menu_box2_outer { display:inherit; width:100%; height:40px; background-color:#92c428; }

 



아래는 참고사항입니다.



메뉴바에 있는 현재 흰 색으로 되어있는 텍스트 색상도 다른 색상으로 수정하고싶으시면

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

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

4개 모두 동일한 색상코드로 수정해주셔야 합니다.

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

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



/* 상단 메뉴 글자 색상 */

.menu_menu a:link {

    color: #ffffff;    

}

.menu_menu a:visited {

   color: #ffffff;   

}

.menu_menu a:hover {

   color: #ffffff;

    text-decoration:none;

}

.menu_menu a:active {

   color: #ffffff;

}



 

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




상단 메뉴바 색상 수정하기 - 모바일디자인 >



모바일 디자인 상단의 상품 검색창 바로 아래에 있는 연두색 메뉴바 색상을 원하시는 색상으로 수정하는 방법입니다. 

현재 연두색으로 되어있는 부분입니다.

 





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

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

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

 

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

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

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

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

 

 

/* 상단메뉴 1 - 메인으로, 베스트상품, 세일상품, 기획상품 */

#top_menu1_all {

 min-height:20px;

 text-align:center;

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

 background-color:#92c428;

 margin-top:0px;

 }




아래는 참고사항입니다.


메뉴바에 있는 현재 흰 색으로 되어있는 텍스트 색상도 다른 색상으로 수정하고싶으시면

288행 근처에 아래 소스에서 아래 4개의 색상코드를 수정해주신 후

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



/* 상단메뉴 1 링크영역 */

#top_menu1 a:link {

    color: #ffffff;    

}

#top_menu1 a:visited {

    color: #ffffff

}

#top_menu1 a:hover {

   color: #ffffff

}

#top_menu1 a:active {

 color: #ffffff

}




첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.