KBoard 를 매우 유용하게 사용하고 있습니다.
게시판 스킨에서 카테고리를 설정한 경우,
모바일 화면에서는 개인적으로 목록화면에서 'ocean-download' 스킨처럼 화면에 수평으로 나열되서 보여지는게 빠른선택 및 깔끔하고 좋은 것 같습니다.
'play-video', 'thumbnail', 'ask-one', ..등의 다른 스킨은 아래 이미지처럼 콤보박스 형태로 보이는데요.. 이들도 수평으로 나열되도록 하려면 어디를 어떻게 수정하면 될까요?
안녕하세요~^^
KBoard 게시판에서 카테고리는 스킨에 따라 다르게 표시될 수도 있습니다.
플레이 비디오 스킨을 기준으로 카테고리 모양을 오션 다운로드 스킨처럼 표시되는 방법을 안내해드리겠습니다.
FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list-category-default.php 파일의 내용을
아래의 코드로 교체해보세요.
<div class="kboard-category">
<?php if($board->initCategory1()):?>
<ul class="kboard-category-list">
<li<?php if(!kboard_category1()):?> class="kboard-category-selected"<?php endif?>><a href="<?php echo $url->set('category1', '')->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->tostring()?>"><?php echo __('All', 'kboard')?></a></li>
<?php while($board->hasNextCategory()):?>
<li<?php if(kboard_category1() == $board->currentCategory()):?> class="kboard-category-selected"<?php endif?>>
<a href="<?php echo $url->set('category1', $board->currentCategory())->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toString()?>"><?php echo $board->currentCategory()?></a>
</li>
<?php endwhile?>
</ul>
<?php endif?>
<?php if($board->initCategory2()):?>
<ul class="kboard-category-list">
<li<?php if(!kboard_category2()):?> class="kboard-category-selected"<?php endif?>><a href="<?php echo $url->set('category2', '')->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->tostring()?>"><?php echo __('All', 'kboard')?></a></li>
<?php while($board->hasNextCategory()):?>
<li<?php if(kboard_category2() == $board->currentCategory()):?> class="kboard-category-selected"<?php endif?>>
<a href="<?php echo $url->set('category2', $board->currentCategory())->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toString()?>"><?php echo $board->currentCategory()?></a>
</li>
<?php endwhile?>
</ul>
<?php endif?>
</div>
워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에
아래의 코드를 추가해보세요.
#kboard-play-video-list .kboard-category { float: left; padding-bottom: 5px; width: 100%; text-align: left; }
#kboard-play-video-list .kboard-category .kboard-category-list { clear: both; float: left; margin: 0; padding: 0; width: 100%; list-style: none; border-left: 1px solid #e8eaec; line-height: 28px; background: url(./images/category-background.png) left bottom repeat-x; }
#kboard-play-video-list .kboard-category .kboard-category-list li { float: left; margin: 0; padding: 0; border-top: 1px solid #e8eaec; border-right: 1px solid #e8eaec; border-bottom: 1px solid #e8eaec; color: #747474; background-color: #faf7f7; font-size: 13px; }
#kboard-play-video-list .kboard-category .kboard-category-list li a { display: block; padding: 0 16px; color: black; text-decoration: none; }
#kboard-play-video-list .kboard-category .kboard-category-list li.kboard-category-selected { border-bottom: 1px solid white; background-color: white; }
#kboard-play-video-list .kboard-category .kboard-category-list li.kboard-category-selected a { color: #1a80b6; font-weight: bold; }
다른 스킨에도 적용하시려면 list-category-default.php 파일은 위의 내용과 동일하게 수정해보세요.
CSS 코드는 play-video 부분을 스킨명으로 교체해서 추가해보세요.
고맙습니다.
회신대로 잘 적용했습니다. 감사합니다!