추천 확장모듈 적용하기 (css 개선 및 제외게시판 적용)
저도 어제 밤늦게까지 작업해서 적용하였습니다.
쉬운 작업이지만 저처럼 어려워 하시는분들을 위해 글 남깁니다.
먼저 이렇게 좋은 모듈 만들어주신 개발자님게 감사드리고, 사용할 수있게 도와주신 웹지기님께도 감사드립니다.
모듈을 설치하시고 다운로드: https://xe1.xpressengine.com/index.php?mid=download&package_id=22753905
메뉴얼 대로 설치 이름과 설치 타입을 지정하세요 사용하실 갯수에따라 지정하시면 됩니다.
예: 이름: 좋아요 타입: like
사용하시는 board에 read 파일을 열으셔서 삽입하실 위치에 아래와 같이 붙여 넣으세요 갯수에 따라 복사하시면 됩니다.
<!--// 특정 게시판에서만 보이게 시작-->
<block cond="$oDocument->get('module_srl')!='166' && $oDocument->get('module_srl')!='모듈번호' && $oDocument->get('module_srl')!='모듈번호'">
<div class="voteextend">
<!--//무조건 한번만-->
{@
$oVoteExtendModel = getModel('voteextend');
}
<script>
function voteExtend(type, document_srl)
{
var params = {
type : type,
document_srl : document_srl
};
exec_xml('voteextend','procVoteextendUserVote', params, function(args) { location.reload() });
}
</script>
<!--//무조건 한번만-->
<ul>
<li>
<a herf="#" onclick="voteExtend('like','{$oDocument->document_srl}')"><img src="이미지주소"><br>좋아요<br><b>{$oVoteExtendModel->getVotedCount($oDocument->document_srl,'like')}</b></a>
</li>
<li>
<a herf="#" onclick="voteExtend('warm','{$oDocument->document_srl}')"><img src="이미지주소"><br>훈훈해요<br><b>{$oVoteExtendModel->getVotedCount($oDocument->document_srl,'warm')}</b></a>
</li>
</ul>
</div>
</block>
<!--// 특정 게시판에서만 보이게 끝-->
그리고 board.css파일을 열으셔서 제일 아래 부분에 아래와 같이 입력하세요
.voteextend {display: -webkit-box;text-align: center; margin: 0 auto 15px;; width: 303px;}
.voteextend .topnum {color:#000;font-size: 12px;display: block; font-weight:bold;}
.voteextend ul {display:inline;}
.voteextend li {display:inline; list-style-type:none; float: left; text-align:center; padding:0 12px; color:#676565;}
.voteextend li a{cursor:pointer; font-size: 13px; color: #8C8C8C;}
.voteextend li a:hover{cursor:pointer; font-size: 13px; color: #393939;}
사이트 위치에 따라서 width 값과 padding 값을 조정해주시면 될 것 같아요
댓글 26
그리고 버튼 여러개 하실분들 이 것 전체를 반복해서 만드시면 안되고 li 요소만 반복하셔야 할 것 같네요. 물론 아시겠지만 붙여넣기만 하실 줄 아는 분들은....
<li>
<a herf="#" onclick="voteExtend('like','{$oDocument->document_srl}')"> <img src="이미지 주소 입력하세요">
<b>{$oVoteExtendModel->getVotedCount($oDocument->document_srl,'like')}</b></a>
</li>
조금만 첨언 하자면 이 부분만 반복되어야 합니다~
다운로드 링크 : https://xe1.xpressengine.com/index.php?mid=download&package_id=22753905
예를 들어 화나요를 크릭해서 비추천으로 할려면 어떻케 저용해야하는건지요.
잘 몰겠네요
음 모듈이 그렇게 만들어진게 아니라서요 모듈 개발자님한테 여쭤봐야될것 같아요 ^^
https://xe1.xpressengine.com/index.php?mid=download&package_id=22753905
굳이 글쓴이에게 부정적인 영향을 주는 비추천에 연결되어야할 공감버튼들이 아니라고 봅니다.
정말 글 자체가 말이 안되고 엉터리 같다는 의견을 전달하려는 버튼으로 제공한다면 누르는 사람은 사연이 슬퍼서 화가나는 뉴스라 공감이간다는 의미로 누른것이 글 쓴이에게 비추천을 한지도 모르고 비추천을 하게 될 것입니다.
css에 저렇게 웃는 것들은 없는지..
자답입니다:)
http://www.freepik.com/free-vector/whatsapp-emoji_904078.htm?utm_campaign=flaticon&utm_medium=banner
https://www.flaticon.com/packs/emoticon-set
여기 이용하여 추가했습니다.
적용하면 refresh 현상이 생기네요 ㅠ
ajax로 업데이트 되면 좋았을텐데 ㅠ_ㅠ;
alert('추천완료');
로 바꾸면 바로 숫자 변경은 없지만 refresh현상은 막을 수 있습니다~!
링크를 마우스 커서를 올리면 줄이 생기는데 줄이 안생기게 하고 싶은데 css적용을 어떻케 하면 될까요
css를 좀 개선하고 필요없는 게시판에서는 안나타나게 코드를 추가 했습니다. 위에글 수정하였으니 참고하세요
데코레이션 none 이 들어가야 될 것 같아요`
그리고 지금 css가 중앙 정렬에서 좌측으로 쏠려있는데..
float: left; 때문인거같은데 방법이 없을까요 ㅠ