21'C 흐림
서울 강남구
댓글 내용에 풍선을 입히는 방법입니다.
수정할 파일
보드스킨/view/basic/view_comment.skin.php
보드스킨/view/basic/view_comment.page.skin.php
수정 사항
1. 상기 두 파일을 각각 에디터로 여시고, <div class="media-body">......</div> 이부분을 찾아서 아래 소스로 감싸줍니다.
<div class="talk-box talk-right"><?php //댓글 컨텐츠 풍선 시작1 ?>
<div class="talk-bubble"><?php //댓글 컨텐츠 풍선 시작2 ?>
<div class="media-body">......</div>
</div><?php //댓글 컨텐츠 풍선 끝2 ?>
2. 왼쪽 회원 이미지가 현재 80픽셀이라서 오른쪽 풍선과 겹치게 됩니다.
따라서 풍선 머진?을 조정하시던가. view.css에서 회원 이미지 사이즈를 50px로 수정하시면, 깔끔하게 보입니다. 이경우 패딩값을 10px로 수정하셔야 회원 이미지가 없을 경우 아이콘이 중앙 정렬이 됩니다.
3. 풍선 패딩 값이 현재는 3%로 되어있어서 좀 큽니다만, 이 부분은 view.css에 아래 스타일 추가해서 조정하시면 됩니다.
.talk-bubble { background:#f5f5f5; border: 1px solid #eee; padding: 10px; border-radius: 4px; }
저는 10으로 하였습니다.
효과 이미지