포럼원 게시판 카테고리 선택방식

KBoard 포럼원 커뮤니티 스킨을 구입해서 사용해봤는데요.

1. 카테고리 선택이나, 정렬방법 선택 방식이... 탭? 처럼 모두 드러나 있는버튼을 클릭하게 할수 없을까요? (기본 스킨처럼요)

현재는 전체. 라는 글씨를 클릭해야 다른 카테고리나 정렬방식이 나열되는 방식인데, 약간 불편해서요.

2. 그 탭들의 색깔을 넣을수 있는 방법을 알려주세요..(현재는 박스만 딱 그려있는데, 약간 심심하게 느껴져서요.)

감사합니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요.

    포럼원 스킨에서도 default 스킨처럼 카테고리를 표시하시려면

    1. FTP로 접속해서 /wp-content/plugins/kboard/skin/forum-one/list.php 파일에

    아래의 코드를 찾아서

    <div class="kboard-category category-pc">
    	<form id="kboard-category-form-<?php echo $board->id?>-pc" method="get" action="<?php echo $url->toString()?>">
    		<?php echo $url->set('pageid', '1')->set('category1', '')->set('category2', '')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
    		
    		<?php if($board->initCategory1()):?>
    			<select name="category1" onchange="jQuery('#kboard-category-form-<?php echo $board->id?>-pc').submit();">
    				<option value=""><?php echo __('All', 'kboard')?></option>
    				<?php while($board->hasNextCategory()):?>
    				<option value="<?php echo $board->currentCategory()?>"<?php if(kboard_category1() == $board->currentCategory()):?> selected<?php endif?>><?php echo $board->currentCategory()?></option>
    				<?php endwhile?>
    			</select>
    		<?php endif?>
    		
    		<?php if($board->initCategory2()):?>
    			<select name="category2" onchange="jQuery('#kboard-category-form-<?php echo $board->id?>-pc').submit();">
    				<option value=""><?php echo __('All', 'kboard')?></option>
    				<?php while($board->hasNextCategory()):?>
    				<option value="<?php echo $board->currentCategory()?>"<?php if(kboard_category2() == $board->currentCategory()):?> selected<?php endif?>><?php echo $board->currentCategory()?></option>
    				<?php endwhile?>
    			</select>
    		<?php endif?>
    	</form>
    </div>

    아래의 코드로 교체해보세요.

    <div class="kboard-category category-pc">
    	<?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>

    2. 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    #kboard-forum-one-list .kboard-category { float: left; padding-bottom: 15px; width: 100%; }
    #kboard-forum-one-list .kboard-category select { display: inline; margin: 0 0 5px 0; padding: 0; width: 100%; min-width: 100%; height: 28px; line-height: 28px; font-size: 12px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background: white; vertical-align: middle; box-shadow: none; box-sizing: border-box; text-indent: 0; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; }
    #kboard-forum-one-list .kboard-category .kboard-category-list { margin: 0 0 5px 0; padding: 0; list-style: none; border: 0; background-color: #f9f9f9; overflow: hidden; }
    #kboard-forum-one-list .kboard-category .kboard-category-list li { display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 0 5px; border: 0; list-style: none; }
    #kboard-forum-one-list .kboard-category .kboard-category-list li::before,
    #kboard-forum-one-list .kboard-category .kboard-category-list li::after { display: none; }
    #kboard-forum-one-list .kboard-category .kboard-category-list li a { display: block; padding: 10px 10px 8px 10px; font-size: 13px; border: 0; border-bottom: 2px solid transparent; text-decoration: none; text-shadow: none; box-shadow: none; color: #515151; }
    #kboard-forum-one-list .kboard-category .kboard-category-list li.kboard-category-selected a { font-weight: bold; border-bottom: 2px solid #545861; color: #545861; }
    

     

    카테고리 탭의 배경색을 바꾸시려면

    아래의 코드를 활용해보세요.

    #kboard-forum-one-list .kboard-category .kboard-category-list li:nth-child(1) { background: black; }
    #kboard-forum-one-list .kboard-category .kboard-category-list li:nth-child(2) { background: blue; }
    #kboard-forum-one-list .kboard-category .kboard-category-list li:nth-child(3) { background: green; }

    nth-child에 대한 내용은 아래의 링크를 참고해보세요.

    https://www.w3schools.com/cssref/sel_nth-child.asp

    고맙습니다.

  • 감사합니다.

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