<추천 비추천으로 2항목 투표게시판 만들기 1> 추천 항목이 위아래로만 변하는 이유
본문
그누보드의 추천 비추천 기능을 이용해서 투표기능을 만들어보고자 합니다. 원본 스킨은 기본스킨입니다.
먼저 그누보드의 여분필드 wr_1 wr_2를 입력 출력하는 소스를 만들고 출력을 확인하고 이를 추천 비추천 버튼속으로 집어넣은 다음에 버튼을 좌우정렬이 아니라 상하정렬로 바꾸었습니다. 여기까지 하고 최종출력을 확인하면 다음과 같이 출력됩니다.
지금까지 모든 출력 수정항목은 스킨의 view.skin.php 에서만 이루어 졌습니다. 다음은 수정된 추천 비추천 코드입니다.
<!-- 추천 비추천 시작 { -->
<?php if ( $good_href || $nogood_href) { ?>
<div id="bo_v_act">
<?php if ($good_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $good_href.'&'.$qstr ?>" id="good_button" class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong> <?php echo number_format($view['wr_good']) ?><?php echo $view['wr_1']?></strong></a>
<b id="bo_v_act_good"></b>
</span>
<br>
<br>
<div>
<?php } ?>
<?php if ($nogood_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $nogood_href.'&'.$qstr ?>" id="nogood_button" class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><?php echo number_format($view['wr_nogood']) ?><?php echo $view['wr_2']?></strong></a>
<b id="bo_v_act_nogood"></b>
</span>
<?php } ?>
</div>
</div>
<?php } else {
if($board['bo_use_good'] || $board['bo_use_nogood']) {
?>
<div id="bo_v_act">
<?php if($board['bo_use_good']) { ?><span class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong><strong><?php echo number_format($view['wr_good']) ?><?php echo $view['wr_1']?></strong></span><?php } ?>
<br>
<br>
<div>
<?php if($board['bo_use_nogood']) { ?><span class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><strong><?php echo number_format($view['wr_nogood']) ?><?php echo $view['wr_2']?></strong></span><?php } ?>
</div>
</div>
<?php
}
}
?>
<!-- } 추천 비추천 끝 -->
</section>
view.skin.php에서는 딱히 수정할 항목이 없는 것 같고 아무래도 스킨의 style.css에서 무언가 수정해야 할 것 같은데 뭘 수정해야 하는 걸까요? 아래는 style.css 에서 추천 비추천 관련 코드입니다.
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
추천 비추천 버튼이 상하가 아니라 좌우로 확장되야 되는데 css를 수정하면 되는지 아니면 다른 작업이 있어야 하는 것인지 알고 싶습니다.
답변 2
올려주신 css 내용에서 조절하시면 됩니다.
width:70px 부분을 원하는 크기로 수정.
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
말씀해 주신대로 70x를 300px로 바꿔 보았는데 아무런 변화가 없습니다. 다른 수치도 좀 바꿔서 업로드를 해도 그냥 아무런 변화가 없네요. 심지어 스킨폴더의 css파일을 아예 삭제해 버려도 아무런 변화가 없습니다. 현재 테스트 홈페이지가 테마가 사용되어 있는데 혹시 스킨의 css와 테마의 css가 있으면 테마의 css가 우선인 건가요?
view.skin.php 최상단에 스킨폴더 css를 불러오고 있으니 그 부분은 생각하지 않았는데 마치 스킨의 css가 완전히 무시되고 있는 것 처럼 보입니다. 아직 원인을 모르겠습니다.
해법을 찾았습니다. CSS정보가 무시되는 것 처럼 보이는 것은 정보갱신이 않되는 것 때문이었습니다.
CSS파일을 삭제해 버리고 한참있다가 우연히 로그아웃을 했더니 CSS설정이 다 깨지더군요.
말씀해 주신 부분을 width:80%; 로 수정하고 다시 업로드 하니 가로넓이가 딱 적절하게 만들어 졌습니다.
동작주소를 주면 체크하기가 편하죠.
#bo_v_act 의 사이즈가 이미 작게 자리 잡았을 수도 있습니다.
크롬 디벨로퍼로 보면서 코드를 눌러보면 아래쪽에 사이즈를 차지하는 것을 발견할 수 있습니다.
