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

유용한 웹 팁

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

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




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








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




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 (새로고침)를 클릭하여 새로고침 하셔야 확인이 가능합니다.

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

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




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/






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



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





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


 별모아 28번 모바일 디자인의 상단 메뉴바 색상은 현재 녹색입니다. 

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

 

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

전체 상품목록 부분은 진한 녹색이고 장바구니, 주문조회, 커뮤니티 부분은 밝은 연두색입니다.


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

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

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

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

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

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

해당 파일이 열립니다.


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

아래 소스는 전체 상품목록 부분의 소스입니다.

 



/* 전체 상품목록 */

.category_inner { 

           width:120px;

           height:34px;

           line-height:34px;

           background-color:#44aa00;

           margin: 0 auto; 

           font-size:14px;

           color:#ffffff;

           }


 


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

아래 소스는 장바구니, 마이쇼핑, 커뮤니티 부분의 소스입니다.

 


/* 장바구니, 마이쇼핑, 커뮤니티 */

#top_menu2 {

    margin-top:0px;

    background-color: #8bc223;

    height: 34px;

    width: 100%;

    }


 


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

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

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

 




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

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



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

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

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

원하시는 색상 코드로 수정해주세요. 아래 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

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

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