최신글 모바일에서 제목, 글쓴이, 날짜 배치

안녕하세요

KBoard(케이보드) 잘 쓰고 있습니다. 감사합니다.

이번에 최신글 모아보기를 만들고 스타일도 수정해서 기본 게시판이랑 비슷한 구성으로 바꿨는데,

모바일에서도 기본 게시판처럼 구성을 만들고 싶은데 어떻게 하는지 모르겠습니다.

참고로 게시판, 최신글 모아보기 둘다 아바타 스킨을 쓰고 있습니다.

 

구체적으로 말하면,

지금은 임시방편으로 모바일에서

"제목 글쓴이"

로 한 줄에 나오게 만들었는데

기본 게시판에서 처럼

"제목

글쓴이 날짜"

이렇게 만들고 싶습니다.

 

http://donghengs.co.kr/

가 제 최신글 모아보기가 있는 곳 이고,

http://donghengs.co.kr/국내/제주/

여기가 제가 원하는 모바일에서의 기본 게시판 구성입니다.

 

꼭 고치고 싶습니다. 해결방법 좀 가르쳐주세요!

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

    기존의 코드 대신 아래의 순서로대로 해보시겠어요?

    1. FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/latest.php 파일에

    아래의 코드를 찾아서

    <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
    	<div class="kboard-avatar-cut-strings">
    		<?php if($content->isNew()):?><span class="kboard-avatar-new-notify">N</span><?php endif?>
    		<?php if($content->secret):?><img src="<?php echo $skin_path?>/images/icon-lock.png" alt="<?php echo __('Secret', 'kboard')?>"><?php endif?>
    		<?php echo $content->title?>
    		<span class="kboard-comments-count"><?php echo $content->getCommentsCount()?></span>
    	</div>
    </a>

    찾은 코드 밑에 아래의 코드를 추가해보시겠어요?

    <div class="kboard-mobile-contents">
    	<span class="contents-item kboard-user">
    		<?php echo apply_filters('kboard_user_display', get_avatar($content->member_uid, 24, '', $content->member_display).' '.$content->member_display, $content->member_uid, $content->member_display, 'kboard', $boardBuilder)?>
    	</span>
    	<span class="contents-separator kboard-date">|</span>
    	<span class="contents-item kboard-date"><?php echo $content->getDate()?></span>
    </div>

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

    아래의 코드를 추가해보시겠어요?

    #kboard-avatar-latest .kboard-mobile-contents { display: none; font-size: 12px; color: #999999; }
    #kboard-avatar-latest .kboard-mobile-contents .contents-item { display: inline; margin: 0; padding: 0; }
    #kboard-avatar-latest .kboard-mobile-contents .contents-item img.avatar { display: inline; margin: 0; width: 24px; max-width: none; height: 24px; vertical-align: middle; border-radius: 50%; }
    #kboard-avatar-latest .kboard-mobile-contents .contents-separator { display: inline; margin: 0; padding: 0 2px; color: #bebebe; }
    
    @media screen and (max-width: 600px) {
    	#kboard-avatar-latest .kboard-mobile-contents { display: block; }
    	#kboard-avatar-latest table thead { display: none; }
    	#kboard-avatar-latest table .kboard-latest-date { display: none; }
    }

    고맙습니다.

  • 감사합니다!!

    { display: inline; margin: 0; padding: 0; } 이 display:inline; 이 있으면 margin 이 안된다고 떠서

    display:inline-block; 으로 했는데 상관 없는거 맞겠죠?!

    그리고

    #kboard-avatar-latest table .kboard-latest-date { display: none; } 는

    #kboard-avatar-latest table .kboard-latest-user { display: none; } 로

    바꿔서 썼습니다. 감사합니다.

  • 안녕하세요.

    display: inline; 속성은 margin이나 padding이 적용이 안 되는 것이 아니라

    양옆 즉 left와 right만 적용이 됩니다.

    margin-top나 padding-top 등을 사용할 경우라면

    inline-block 또는 block 속성을 이용하시면 됩니다.

    고맙습니다.

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