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

유용한 웹 팁

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

게시판 상세
제목 커뮤니티 (게시판) 메뉴를 이미지로 만드는 방법
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2020-03-09
  • 추천 추천하기
  • 조회수 207


< 커뮤니티 (게시판) 메뉴를 텍스트가 아닌 이미지로 넣는 방법 >

 

현재 쇼핑몰 커뮤니티 (게시판) 메뉴는 관리자 페이지의 게시판 관리 메뉴에서 설정하면 자동으로 쇼핑몰에 텍스트로 출력되고 있습니다. 만약 커뮤니티 (게시판) 메뉴 글자를 포토샵에서 이미지로 작업하여 올리고 싶을 경우 아래 방법대로 해주시기 바랍니다.

 

디자인관리 > 디자인 관리 > 디자인 보관함에서 수정하고자하는 디자인의 HTML 디자인 수정 버튼 클릭 후 스마트디자인 편집창이 뜨면 편집창 하단 왼쪽의 화면명 검색창에서 boardInfo.css를 검색한 후 선택파일열기를 합니다.

 

소스 중에서 아래 소스를 삭제해주세요. 다른 소스는 그대로 두고 아래 소스만 삭제해주신 후 스마트디자인 편집창 상단 왼쪽의 저장버튼을 클릭해주세요.

 

/* 게시판 텍스트 */

.xans-layout-boardinfo li { margin:0 auto; border-bottom:1px solid #e9e9e9; width:80%; }

.xans-layout-boardinfo li a { width:100%; font-weight:bold; font-size:12px; display:inline-block; padding:5px 0 5px 27px; text-decoration:none; letter-spacing:0.5px; }

/* 마우스 아웃 */

.xans-layout-boardinfo li a:link { color: #555555; font-weight:bold; }

/* 마우스 오버 */

.xans-layout-boardinfo li a:hover { color: #69b60c; }

.xans-layout-boardinfo a:active {color: #555555;}

.xans-layout-boardinfo a:visited {color: #555555;}

 

 

 

그 다음, 스마트디자인 편집창 왼쪽 하단의 화면명 검색창에서 공통 레이아웃 페이지인 layout.html 을 검색해주시면 아래와 같은 소스를 찾아주세요.

 

<!-- 게시판 메뉴 -->

<div module="Layout_BoardInfo">

<!--@css(/css/module/layout/boardInfo.css)-->

<h2><img src="/web/upload/byulmoa33/images/board_menu_title.gif" alt="게시판 메뉴" border="0" /></h2>

<ul>

<li><a href="{$link_board_list}">{$board_name}</a> {$board_adult_icon}</li>

<li><a href="{$link_board_list}">{$board_name}</a> {$board_adult_icon}</li>

</ul>

 

위의 소스에서 붉은색 부분을 삭제하시고 그 자리에 아래 파란 소스를 복사하여 붙여넣어주세요. 붙여넣으신 후 편집창 상단 왼쪽의 저장 버튼을 클릭해주세요. 다른 소스는 건드리지마시고 위의 붉은 부분만 아래 파란 소스로 수정해주세요.

 

<li><a href="{$board_list_url}"><img src="{$board_out_img}" onmouseover="this.src='{$board_over_img}'" onmouseout="this.src='{$board_out_img}'" alt="{$board_name}" /></a></li>

<li><a href="{$board_list_url}"><img src="{$board_out_img}" onmouseover="this.src='{$board_over_img}'" onmouseout="this.src='{$board_out_img}'" alt="{$board_name}" /></a></li>

 

 

이제 커뮤니티 메뉴 글자를 이미지로 작업할 차례입니다.

별모아에서 보내드린 파일들 중 PC 폴더 > psd 폴더 > 기타 폴더에서 board_menu1.psd (마우스 올리기 전)board_menu2.psd (마우스 올린 후) 파일을 포토샵에서 열어 글자를 색상만 다르게 각각 수정해주신 후 이미지로 저장해주세요. 이미지 파일명이나 확장자는 원하시는대로 해주시면 됩니다. 이미지 가로길이는 psd 파일 크기대로 해주시고 세로길이는 더 늘어나거나 줄어들어도 상관없습니다.

 

메뉴 이미지를 업로드 하시려면 관리자페이지의 게시판관리 > 게시판 > 게시판관리에서 원하시는 게시판 제목 클릭 후 창이 뜨면 창 상단의 디자인 구성을 클릭해주세요. 메뉴 이미지 항목에 마우스 올리기 전 이미지와 올린 후 이미지를 각각 업로드 해주신 후 창 하단의 저장 버튼을 클릭해주시면 됩니다.





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

비밀번호 :

/ byte

비밀번호 : 확인 취소

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

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

/ byte

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

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