이벤트 게시판 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

이벤트 게시판 정보

게시판 이벤트 게시판

첨부파일

event_board.zip (74.0K) 20회 다운로드 2022-11-19 19:11:25 포인트 차감10
테스트한 버전5.4.22
호환 가능 버전그누보드 5.3이상 가능할 것 같습니다

본문

3529456529_1668852655.0505.png

basic을 커스텀해서 이벤트게시판을 만들어보았습니다.

리스트에 썸네일을 표현하기위해 https://sir.kr/g5_skin/47189 을 사용하고, 행사상태를 나타내기위해서 https://sir.kr/g5_tip/18179?sfl=wr_name%2C1&stx=%EB%B9%84%ED%83%80%EC%A3%BC%EB%A6%AC을 사용하였습니다.

좋은 소스를 공개해주신 비타주리님께 감사드립니다.

압축을 풀면 event_pc, event_mobile 두개의 폴더가 나옵니다.

그누보드 순정기준으로 pc는 skin/board/event_pc

모바일은 mobile/skin/event_mobile의 경로가 되게 업로드합니다.

3529456529_1668850740.5688.png

썸네일 주소는 리스트에 나타나는 이미지를 표시합니다.

파일로 업로드하지 말고 이미지의 위치을 적어줍니다.

예: http://exmaple.com/images/suzy.png

 

행사상태는 라디오버튼으로 되어있는데 행사예정, 행사중, 행사종료중에서 선택하면 됩니다.

수정하려면 write.skin.php에서

<!-- 비타주리의 라디오버튼함수 호출 시작 -->
<div class="bo_w_tit write_div">
<?php echo wr_radio("wr_1", "행사예정,행사중,행사종료", 1); ?>
</div>
<!-- 비타주리의 라디오버튼함수 호출 끝 --> 

내용을 바꾸어줍니다. 콤마로 구분하고 마지막에는 콤마를 넣지 않습니다.

 

행사날자는 특정한 날자나 기간을 맞게 넣어주시면됩니다.

 

카카오맵출력 

카카오맵에서 클릭해서 html태그- 소스생성하기를 합니다.


<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1668851246907" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
    2. 설치 스크립트
    * 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
    new daum.roughmap.Lander({
        "timestamp" : "1668851246907",
        "key" : "2cnbr",
        "mapWidth" : "640",
        "mapHeight" : "360"
    }).render();
</script>

위의 소스에서

카카오맵 timestamp값으로 따옴표를 포함하지 않은 숫자를 넣어줍니다. 1668851246907

카카오맵 key값으로  "key" : "2cnbr"에서 따옴표를 포함하지 않은 2cnbr 을 넣어줍니다.

 

행사주최자는 행사관계자나 기타 적당한 것을 넣어줍니다.

 

파일첨부로 입력한 사진은 view.skin.php 에서 이벤트 테이블안에 표시됩니다.

 

내용입력한 것은 view.skin.php에서 이벤트테이블 설명란에 표시됩니다.

 

리스트에 표시되는 썸네일의 크기를 변경하시려면

list.skin.php에서 

<!-- thumbnail style start -->
<style>
.thumbnailImage { width:120px; height:120px; border-radius:20px; object-fit:cover; margin-left:10px; margin-right:10px; }
</style>
<!--  thumbnail style end -->

의 width, height 값을 변경해줍니다.

 

폰트크기조절, 칼라등은 필요에따라 조정하시면 될것같습니다.

감사합니다.

 

 

 

추천
9

댓글 전체

전체 2,209 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT