카페24 쇼핑몰 제작_ 상단메뉴바 이미지 변경 / 검색창 색상변경 / 검색창 테두리 색깔


카페24 쇼핑몰 제작 7번째 글인 이번 글에선 상단메뉴바 내용들의 이미지를 변경하는 방법과
검색창의 배경색깔 변경, 검색창에 테두리 색깔을 입히는 방법에 대해 알아보겠습니다.


위의 빨간색 테두리 친 부분이 변경할 부분입니다.



카페24 관리자 페이지에 접속을 합니다.
디자인관리-> HTML 디자인 설정-> 공통모듈 리스트-> TOP-> 상단메뉴바 모듈편집을 선택합니다.



이미지 등록에서 전체표시형태를 이미지나 롤오버로 변경합니다.
찾아보기를 클릭해서 각각에 맞는 이미지를 등록합니다.



등록하고 잘 바껴졌는 지 자신의 쇼핑몰을 확인해 봅니다.
위와같이 잘 바껴졌네요.



이번엔 검색창의 배경 색상과 테두리 색상을 변경해 보겠습니다.
공통모듈 리스트에서 검색창_B형의 모듈편집으로 들어가 주세요.



HTML 편집에서 size="15" 뒷부분에 소스를 삽입합니다.



검색창에 배경색을 입히는 소스입니다.

style="background-color:색상값; border:수치px;"

원하는 색상과 수치를 정해서 소스를 삽입하세요.



쇼핑몰을 확인해 보니 잘 바껴졌습니다.



style="border:solid 수치px 색상값;"

테두리에 색깔을 입히는 소스입니다.
역시나 원하는 색상값과 수치를 정해 위와 같은 위치에 소스를 삽입합니다.



쇼핑몰을 확인해 보니 잘 바껴졌습니다.
원하는 이미지와 색상으로 바꿔 카페24 쇼핑몰 제작 예쁘게 해보시길 바랍니다.





Posted by 맛있는세상

댓글을 달아 주세요

  1. 김지희 2012.01.25 10:51  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 올려주신 정보 덕분에 드디어 검색창 테두리 색상을 넣을 수 있게 되었어요! 감사합니다^^
    그런데 검색창 높이 조절은 어떻게 소스를 넣어야 하는지 알려주실 수 없을까요??
    부탁드립니다...^^;

    • 맛있는세상 2012.01.25 12:24 신고  댓글주소  수정/삭제

      1. 검색창_B형 소스에서 class=""라는 소스를 찾습니다. 제가 적용한 스킨에는 class="input_search"라고 되어있습니다.
      2. 메인화면-> 자바스크립트&스타일시트-> 스타일시트 common.css 편집으로 들어가서 ctrl+F를 눌러 input_search를 찾습니다. height:?px; 라는 소스가 있을 겁니다. 그부분을 수정해 주시면 됩니다.