설정된 카테고리들이 모바일에서 수평으로 보이게 수정하는 방법?

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 부분을 스킨명으로 교체해서 추가해보세요.

    고맙습니다.

  • 회신대로 잘 적용했습니다. 감사합니다!

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기