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

유용한 웹 팁

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

게시판 상세
제목 상품 카테고리 텍스트 색상, 크기, 왼쪽 여백, 간격 수정하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2020-02-07
  • 추천 추천하기
  • 조회수 158


아래 작업을 하기 전에 반드시 디자인을 백업 해주세요.

고객님들께서 직접 소스를 수정 중에 실수가 발생했을 경우

백업한 시점으로 다시 복구가 가능하려면 수정 전에 반드시 백업을 해두셔야 합니다.

고객님의 실수로 인한 복구는 디자인 에이전시에서는 책임지지않으므로 반드시 백업해주세요.

디자인 백업 & 복구방법은 아래 설명 참조바랍니다.

http://byulmoa.com/board/free/read.html?no=4416&board_no=3


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



쇼핑몰 상품 카테고리 (대분류) 메뉴는 이미지가 아닌 텍스트로 되어있기때문에

별도의 포토샵 작업을 하지않아도 상품관리 메뉴에서 카테고리 생성시

자동으로 쇼핑몰에 노출되도록 되어있습니다.

아래 설명은 카테고리 텍스트의 글자 크기, 색상, 왼쪽 여백, 메뉴 간격

원하는대로 변경하는 방법입니다.





디자인관리 > 디자인관리 > 디자인 보관함에서 수정 버튼을 클릭하면 스마트디자인 편집창이 뜹니다.

편집창 하단 왼쪽의 화면명 검색에서 nav.css 를 검색한 후 /css/nav.css 에 체크 후

선택파일 열기 버튼을 클릭하면 nav.css 파일의 소스창이 열립니다.



아래는 nav.css 파일의 상단 부분의 소스입니다.

아래 설명을 참조하여 아래 소스를 수정해주시면 됩니다.

디자인에 따라 소스가 약간씩 차이가 있을 수 있습니다.



/* 대분류 */
#category-lnb { text-align:left; }
#category-lnb .d1-wrap li { z-index:1; }

/* 상품 카테고리 텍스트 */
#category-lnb .d1-wrap li { margin:0 auto; border-bottom:1px solid #e9e9e9; width:80%; }
#category-lnb .d1-wrap li a { color: #333333; width:100%; font-size:13px; display:inline-block; padding:6px 0 6px 15px; text-decoration:none; letter-spacing:0.5px; }
/* 마우스 오버 */
#category-lnb .d1-wrap li a:hover { color: #97c702;  }






- 텍스트 크기 변경하기 :  위의 소스에서 붉은색 부분이 텍스트 크기입니다.

13 이라는 숫자만 원하시는 숫자로 변경하신 후 편집창 상단 왼쪽의 저장 버튼을 클릭해주세요.

숫자는 디자인마다 차이가 있을 수 있습니다.

위의 소스는 예시입니다.

숫자가 클수록 글자 크기는 커집니다.



- 텍스트 색상 변경하기 : 위의 소스에서 파란색 부분이 마우스 올리기 전의 텍스트 색상이며

입니다. 오렌지 색상이 마우스 올린 후의 텍스트 색상입니다.

색상코드는 디자인마다 차이가 있을 수 있습니다.

위의 소스는 예시입니다.


각각 원하시는 색상 코드로 수정하신 후 편집창 상단 왼쪽의 저장 버튼을 클릭해주세요.

(유의사항) 색상코드 앞의 # 가 지워지거나 혹은 ## 이렇게 2개 연속되지않도록 유의해주세요.

색상코드 뒤의 ; 가 지워지지않도록 유의해주세요.




- 텍스트 왼쪽 여백 변경하기 : 카테고리 전체적으로 왼쪽 여백을 변경하고싶으시면

위의 초록색 부분의 15 라는 숫자만 원하시는 숫자로 수정해주세요.

숫자는 디자인마다 차이가 있을 수 있습니다.

위의 소스는 예시입니다.


숫자가 낮을수록 카테고리 텍스트가 전체적으로 왼쪽으로 이동하며

숫자가 높을수록 오른쪽으로 이동합니다.

다른 부분은 건드리지마시고 숫자만 수정해주세요.



- 텍스트 세로 간격 조절하기 : 각 카테고리 텍스트의 세로폭(간격)을 조절하고싶으시면

위의 소스에서 핑크색으로 된 6 이라는 2개의 숫자를 수정해주시면 됩니다.

숫자는 디자인마다 차이가 있을 수 있습니다.

위의 소스는 예시입니다.


둘 다 동일한 숫자로 수정해주세요.

다른 부분은 건드리지마시고 숫자만 수정해주세요.

숫자가 높을수록 카테고리의 세로 간격이 넓어지게 됩니다.



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





만약 폰트를 변경하고싶으시면 텍스트의 경우는 원하시는 폰트로 변경하는 것이 한계가 있으므로

포토샵을 이용하여 이미지로 작업해주시기 바랍니다.

카테고리 메뉴 글자를 이미지로 작업하는 방법은 아래 링크 주소 설명 참고바랍니다.

http://byulmoa.com/board/free/read.html?no=4414&board_no=3&page=1 












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

비밀번호 :

/ byte

비밀번호 : 확인 취소

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

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

/ byte

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

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