안녕하세요~^^

사용 중이신 테마나 다른 플러그인에서 CSS 코드를 과도하게 사용할 경우

KBoard 플러그인의 레이아웃이 깨질 수도 있습니다.

비회원으로도 확인 가능한 페이지 주소 알려주시면

CSS 코드로 수정이 가능할지 살펴보겠습니다.

고맙습니다.

올려주신 페이지 주소로 확인해보니

KBoard 원더풀 제품소개 스킨 일반 게시글 목록 페이지에서

게시글이 한 줄에 한 개씩 표시되는 문제는

직접 스킨 쪽 style.css 파일을 수정하신 듯합니다.

크롬 브라우저 개발자 도구(F12)로 확인해보면

style.css 파일에

아래의 코드가 적용되어 있습니다.

#kboard-wonderful-product-list .kboard-list .kboard-list-item { position: relative; float: center; margin: 0 1% 0 0; padding: 0 0 55px 0; overflow: hidden; width: 24%; border: 0; background: none; }

기본적으로는 float: left;로 설정되어 있습니다.

위의 코드에서 center 부분을 left로 교체해보시겠어요?

최신글 쪽은 기본적으로 한 줄에 한 개의 게시글을 표시하고 있습니다.

이미지와 글자가 떨어지는 문제는

썸네일을 표시할 때 가로 176 픽셀 세로 132 픽셀로 잘라서 표시하는데

테마 쪽에서 설정한 영역의 너비가 큰 문제로 보입니다.

워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

아래의 코드를 추가하시면 썸네일 크기를 조절하실 수 있습니다.

add_filter('kboard_content_get_thumbnail_size', 'my_kboard_content_get_thumbnail_size', 10, 2);
function my_kboard_content_get_thumbnail_size($size, $content){
	$board = $content->getBoard();
	if($board->id == '1'){ // 실제 게시판 id로 적용해주세요.
		$size['width'] = '600';
		$size['height'] = '600';
	}
	return $size;
}

위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해주세요.

최신글 쪽 너비를 줄이고 가운데 정렬하시려면

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

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

#kboard-wonderful-product-latest { max-width: 600px; margin: 0 auto; }

고맙습니다.

추가로, KBoard 원더풀 제품소개 스킨 최신글에서

가로 형태로 한 줄에 4개씩 표시하시려면

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

#kboard-wonderful-product-latest { overflow: hidden; }
#kboard-wonderful-product-latest .kboard-wonderful-product-latest-item { float: left; margin-right: 1%; width: 24%; }

한 줄에 5개씩 표시하시려면

위의 코드 중 24% 부분을 19%로 변경해서 적용해보세요.

고맙습니다.

정말 감사드립니다. 

제가 css잘 몰라서요 

소스주신데로 했더니 

이미지가 너무 작아서요 .. 한줄에 두개씩 나와도 상관없는데 

좀 크게 나오게 하려면 어디를 손봐야할까요 ㅜㅜ

죄송합니다. 바쁘신데

화면에 꽉 차게 표시하시려면

아래 CSS 코드는 지워주세요.

#kboard-wonderful-product-latest { max-width: 600px; margin: 0 auto; }

제목과 내용 부분의 영역을 줄이고 썸네일 쪽을 늘리시려면

아래 CSS 코드도 추가해보세요.

#kboard-wonderful-product-latest .kboard-wonderful-product-latest-thumbnail { width: 50%; }
#kboard-wonderful-product-latest .kboard-wonderful-product-latest-info { width: 50%; }

한 줄에 2개씩 표시하시려면

이전 댓글에 안내해드린 코드 중 24% 부분을 49%로 교체해서 확인해보시겠어요?

크롬 브라우저 개발자 도구(F12)를 사용하시면

CSS 속성을 쉽게 찾을 수 있고 테스트해보실 수 있습니다.

고맙습니다.

정말 너무너무 감사드립니다. 아주 잘되요^^

너무 모르면서 해결할려니 사소한것까지 여쭤보게 되네요 

바쁘신와중에 친절하신 설명과 답변에 감사드립니다.

감사합니다.ㅜㅜ