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

유용한 웹 팁

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

게시판 상세
제목 별모아 85번 상단 영역의 색상 변경하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2022-09-25
  • 추천 추천하기
  • 조회수 31

< 별모아 85번 상단 영역(녹색)의 색상 변경하기 >








위의 이미지에 표시된 번호 순서대로 아래 설명 참고 바랍니다.




1. 상단 전체 배경 이미지 변경하기 : 

쇼핑몰 최상단의 검정색 메뉴바와 로고 이미지 아래의 검정색 선과 그 아래 민트색 배경색을 동시에 수정하는 방법입니다.

별모아에서 보내드린 파일들 중 PC 폴더 > psd 폴더 > ★배너★ 폴더 에서 bg_top.psd 파일을 포토샵에서 열어

최상단 검정색과 그 아래 검정 라인, 그리고 민트색 배경색을 원하시는 색상으로 변경하신 후, 

이미지 파일명을 bg_top으로 하시고, 확장자는 gif로 저장해주세요.

이미지를 업로드 하시려면 파일 업로더를 이용하여 덮어쓰기로 업로드 해주시면 이미지가 변경됩니다.

업로드 방법은 아래 링크 참고 바랍니다.

https://byulmoa.com/article/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%8C%81/3/8698/page/1/


(유의사항) 이미지를 파일 업로더로 업로드 후 쇼핑몰에서 변경된 이미지를 확인하시려면

반드시 Ctrl + F5 (새로고침)를 클릭하여 새로고침 하셔야 확인이 가능합니다.

새로고침 하지않고 확인시 변경 전 이미지가 보입니다.

다른 이미지들도 마찬가지입니다.




최상단 메뉴 글자 색상 변경하기 : 최상단의 검정색 메뉴바 색상을 변경하셨을 경우

최상단 우측메뉴의 글자 색상 (장바구니, 주문조회, 나의쇼핑, 로그인(로그아웃), 회원가입(정보수정) 도 

함께 변경을 원하시면 아래의 방법대로 해주세요.



관리자 페이지 좌측 메뉴 중 디자인 (PC/모바일) > 디자인 보관함에서 상단에 PC 모바일 탭이 나란히 있는데 

PC 를 선택하시면 PC디자인의 디자인 보관함이 나옵니다.

디자인 보관함에서 디자인 목록 중에 가장 상단에 있는 디자인이 현재 사용중인 모바일 대표 디자인입니다. 

대표 디자인의 '편집' 버튼을 클릭하면 스마트 디자인 편집창이 뜹니다. 

편집창 좌측 하단의 화면명 검색에서 base.css 을 검색하신 후

/layout/basic/css/base.css 에 체크 후 선택파일열기 버튼을 클릭하시면

해당 파일이 열립니다.


소스창에서 50행 근처에 보면 아래와 같은 소스가 보입니다. 


아래 소스에서 빨간색 부분이 최상단 우측에 있는 메뉴들의 글자 색상입니다.

원하시는 색상코드로 수정해주세요. 4개 모두 동일한 색상으로 수정해주세요.


수정해주신 후 스마트 디자인 편집창 상단 왼쪽의 ‘저장’ 버튼을 클릭해주시면 됩니다. 

색상 코드 수정하실 때 색상 코드 바로 뒤에 있는 ; 가 지워지지않도록 유의해주세요. 



/* 최상단 메뉴 전체 링크영역 */

#top_menu a:link {

    color: #ffffff;   text-decoration:none;  

}

#top_menu a:visited {

     color: #ffffff;       text-decoration:none;

}

#top_menu a:hover {

    color: #ffffff   text-decoration:none;

}

#top_menu a:active {

     color: #ffffff;    text-decoration:none;

}






2. 상단 왼쪽의 상품 배너 이미지 변경하기 : 

별모아에서 보내드린 파일들 중 PC 폴더 > psd 폴더 > ★배너★ 폴더 에서 banner_left.psd 파일을 포토샵에서 열어

배경 색상, 텍스트 색상 등을 변경하신 후, 이미지 저장해주세요.

이미지는 파일 업로더가 아닌 스마트디자인 편집창에서 변경 해주세요.

업로드 방법은 아래 링크 참고 바랍니다.

https://byulmoa.com/article/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%8C%81/3/8790/




3. 상단 오른쪽의 상품 배너 이미지 변경하기 : 

별모아에서 보내드린 파일들 중 PC 폴더 > psd 폴더 > ★배너★ 폴더 에서 banner_right.psd 파일을 포토샵에서 열어

배경 색상, 텍스트 색상 등을 변경하신 후, 이미지 저장해주세요.

이미지는 파일 업로더가 아닌 스마트디자인 편집창에서 변경 해주세요.

업로드 방법은 아래 링크 참고 바랍니다.

https://byulmoa.com/article/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%8C%81/3/8790/




4. 검색 버튼 색상 변경하기 : 

별모아에서 보내드린 파일들 중 PC 폴더 > psd 폴더 > ★배너★ 폴더 에서 butt_search.psd 파일을 포토샵에서 열어

버튼 색상을 변경하신 후, 이미지 저장해주세요. 이미지 파일명을 butt_search 로 하시고, 확장자는 반드시 png 로 저장해주세요.

이미지를 업로드 하시려면 파일 업로더를 이용하여 덮어쓰기로 업로드 해주시면 이미지가 변경됩니다.

업로드 방법은 아래 링크 참고 바랍니다.

https://byulmoa.com/article/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%8C%81/3/8698/page/1/




5. 인기검색어 타이틀 색상 변경하기 : 

별모아에서 보내드린 파일들 중 PC 폴더 > psd 폴더 > ★배너★ 폴더 에서 keyword_title.psd 파일을 포토샵에서 열어

버튼 색상을 변경하신 후, 이미지 저장해주세요. 반드시 이미지 파일명을 keyword_title 로 하시고, 확장자는 png 로 저장해주세요.

이미지를 업로드 하시려면 파일 업로더를 이용하여 덮어쓰기로 업로드 해주시면 이미지가 변경됩니다.

업로드 방법은 아래 링크 참고 바랍니다.

https://byulmoa.com/article/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%8C%81/3/8698/page/1/








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



< 모바일 디자인 상단 메뉴바 색상 변경하기 >





위의 이미지에서 빨간박스 부분의 색상 변경 방법입니다.

빨간 번호의 순서대로 수정해주시면 됩니다.



1. 별모아 85번 모바일 디자인의 최상단 메뉴바 색상은 검정색입니다. 

다른 색상으로 수정하고싶으시면 아래 설명대로 해주세요. 

 

관리자 페이지에서 디자인 (PC/모바일) > 디자인 보관함에서 상단에 PC 모바일 탭이 나란히 있는데 

모바일 을 선택하시면 모바일디자인의 디자인 보관함이 나옵니다.

디자인 보관함에서 디자인 목록 중에 가장 상단에 있는 디자인이 현재 사용중인 모바일 대표 디자인입니다. 

대표 디자인의 '편집' 버튼을 클릭하면 스마트 디자인 편집창이 뜹니다. 

편집창 좌측 하단의 화면명 검색에서 layout.css 을 검색하신 후

/layout/basic/css/layout.css 에 체크 후 선택파일열기 버튼을 클릭하시면

해당 파일이 열립니다.


소스창에서 52행 근처에 보면 아래와 같은 소스가 보입니다. 


아래 소스에서 빨간색 부분이 최상단의 검정색 메뉴바 색상입니다.

원하시는 색상코드로 수정해주세요. 

수정해주신 후 스마트 디자인 편집창 상단 왼쪽의 ‘저장’ 버튼을 클릭해주시면 됩니다. 

색상 코드 수정하실 때 색상 코드 바로 뒤에 있는 ; 가 지워지지않도록 유의해주세요. 



/* 최상단 메뉴 영역 전체 - PC버전, 북마크, 장바구니, 로그인, 회원가입 (로그아웃, 정보수정)*/

#top_menu {

    height: 28px;

    width: 100%;

    margin:0 auto;

    overflow:hidden;

    font-size:12px;

    background-color:#000000;

}





그리고 소스창에서 62행 근처에 보면 아래와 같은 소스가 보입니다. 

아래 소스에서 빨간색 부분은 최상단 영역의 글자 색상입니다.

최상단 영역의 텍스트는 현재 흰 색으로 설정되어있는데

변경하신 메뉴바 색상과 어울리는 색상으로 수정을 원하시면

아래 빨간 부분을 원하시는 색상코드로 수정해주세요.


수정해주신 후 스마트 디자인 편집창 상단 왼쪽의 ‘저장’ 버튼을 클릭해주시면 됩니다. 

색상 코드 수정하실 때 색상 코드 바로 뒤에 있는 ; 가 지워지지않도록 유의해주세요. 



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

#top_menu a {

    color: #e1e1e1

}






2. 상단 메뉴바 부분의 색상을 수정하는 방법입니다.

상단 메뉴바에는 왼쪽의 전체 상품목록 부분과 오른쪽의 장바구니, 주문조회, 커뮤니티 로 나누어져있는데 

두 영역이 모두 동일한 색상으로 되어있습니다.



관리자 페이지에서 디자인 (PC/모바일) > 디자인 보관함에서 상단에 PC 모바일 탭이 나란히 있는데 

모바일 을 선택하시면 모바일디자인의 디자인 보관함이 나옵니다.

디자인 보관함에서 디자인 목록 중에 가장 상단에 있는 디자인이 현재 사용중인 모바일 대표 디자인입니다. 

대표 디자인의 '편집' 버튼을 클릭하면 스마트 디자인 편집창이 뜹니다. 

편집창 좌측 하단의 화면명 검색에서 layout.css 을 검색하신 후

/layout/basic/css/layout.css 에 체크 후 선택파일열기 버튼을 클릭하시면

해당 파일이 열립니다.



소스창에서 295행 근처에 보면 아래와 같은 소스가 보입니다. 

아래 소스에서 각각 빨강색으로 표시된 부분을 원하시는 색상 코드로 수정해주신 후 

스마트 디자인 편집창 상단 왼쪽의 ‘저장’ 버튼을 클릭해주시면 됩니다. 

색상 코드 수정하실 때 색상 코드 바로 뒤에 있는 ; 가 지워지지않도록 유의해주세요. 


 



/* 상단메뉴 2 전체영역 - 전체 상품목록, 장바구니, 마이쇼핑, 커뮤니티 */

#top_menu2 {

    margin-top:0px;

    border-bottom: 1px solid #ccc;

      background-color:#3dc6bc;

    height: 32px; font-weight:normal;

    width: 100%;

    }



아래는 상단 메뉴(전체 카테고리, 장바구니, 마이쇼핑, 커뮤니티)의 글자 색상을 수정하는 방법입니다.

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



layout.css 파일의
소스 중에서 354행 근처에 아래 소스가 보입니다.

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

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

예를들어 글자 색상을 검정색으로 수정하고싶으시면 

ffffff 로 되어있는 부분을 000000 로 수정해주시면 됩니다.

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


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




/* 상단메뉴 2 전체 링크영역 */

#top_menu2 a:link {

    color:#ffffff;

    }


#top_menu2 a:visited {

    color:#ffffff;

    }


#top_menu2 a:hover {

     color:#ffffff;

   }


#top_menu2 a:active {

     color:#ffffff;

   }



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

비밀번호 :

/ byte

비밀번호 : 확인 취소

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

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

/ byte

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

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