안녕하세요~^^

1. 배너와 추가하신 숏코드의 여백은

워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에

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

.su-tabs { margin-top: 25px; }

위의 코드에서 픽셀 값은 적절히 수정해보세요.

2. Shortcodes Ultimate 플러그인을 사용해서 탭을 추가하신 건지요?

실제 적용하신 숏코드가 어떻게 되시는지요?

아래의 숏코드처럼 적용해보시겠어요?

[su_tabs style="default" active="1" vertical="no" class=""]
  [su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
  [su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[/su_tabs]

위의 숏코드에서 active="2" 이런 식으로 적용하시면 두 번째 탭이 기본적으로 선택됩니다.

active="1"로 되어 있는지 확인해보시겠어요?

3. 현재는 조회수가 표시되지 않는 코드를 적용하신 듯합니다.

조회수는 아래 링크에 안내해드린 코드를 적용하신 건지요?

https://www.cosmosfarm.com/threads/document/29884

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

.kboard-best-view .kboard-best-view-board-name { margin-right: 10px; }

고맙습니다.

안녕하세요~

https://imgur.com/a/6vCNAhL 보시면

스레드봇 (13929 Point)ㆍ2019.02.27 10:10 이 알려주신 코드로 수정해서 순위 표시가 잘되는데 그 이후로 해당 카페로 이동이 안되어지는데 어디를 수정하면 좋을까요? 그리고 글자가 안 보여서

.kboard-best-view2 .kboard-best-view-board-name { color: #0066ff; }

 이렇게 수정했는데 적용이 안되서요^^;; 이 코드도 한번 봐주세요.

안녕하세요.

1. 올려주신 이미지처럼 탭 메뉴가 모바일에서도 PC처럼 보이게 하시려면

워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에

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

@media only screen and (max-width: 768px) {
	.su-tabs-nav span { display: inline-block !important; }
}

2. 추가하신 탭 쪽 배경 색상을 올려주신 이미지처럼

서로 다른 색상을 적용하시려면

아래의 CSS 코드를 활용해보시겠어요?

/* 탭 */
.su-tabs-nav { background: green; }

/* 현재 선택된 탭 */
.su-tabs-nav span.su-tabs-current { background: blue; }

/* 탭 안쪽 */
.su-tabs-pane { background: red; }

위의 코드에서 색상은 적절히 수정해주세요.

만약, 위의 코드가 적용되지 않는다면 !important 속성을 추가해보시겠어요?

3. 같은 플러그인으로 탭 메뉴를 추가하셨다면

1번과 2번에 안내해드린 코드를 적용하시면 해결되실 듯합니다.

고맙습니다.

내일 오픈하려고 하는데 기술이 미천해서 너무 힘드네요^^;; 그래도 수많은 질문에도 이렇게 계속 도와주시는덕분에 여기까지 왔습니다. 감사합니다. 그리고, 내일부터 휴무라 오늘도 폭풍질문들 달아야될거 같아 죄송하네요.^^;;

1. https://imgur.com/a/c8GzwWm 보시면 탭메뉴들이 "ㄴ"자 형태로 pc에서 보여지는데 모바일에서는 이 "ㄴ"자가 퍼져서 보이는데 모바일에서도 이 "ㄴ"자가 유지되게 할수 있나요?

2. https://imgur.com/a/4QFSYtk 보시면 빨강, 파랑, 연두 색 3가지 부분을 서로 다른 색으로 구현하고 싶은데 크롬 도구에서 본 코드로 아무리해도 변경이 안되네요.. 도움부탁드립니다.

3. 위에 2개 질문은 https://xion.kr/?page_id=53 크리에이퍼 카페 메뉴에 구현한 탭메뉴이고, https://xion.kr/?page_id=226 이건 동영상 메뉴인데 여기도 탭메뉴를 구현했습니다. 동영상메뉴도 1,2번 질문 그대로 적용하려고 하는데 여기 코드 어떻게 구현해야되는지도 도움부탁드려요... 

안녕하세요.

추가하신 코드에 아래의 코드를 활용해보시겠어요?

ob_start();
?>
<?php $index = 0?>
<?php foreach($best_board_list as $board):?>
<?php $best_board = new KBoard($board->board_id)?>

<?php $index++?>
<?php if($index == 1):?>
	<div>1번 <?php echo $best_board->board_name?></div>
<?php elseif($index == 2):?>
	<div>2번 <?php echo $best_board->board_name?></div>
<?php else:?>
	<div><?php echo $best_board->board_name?></div>
<?php endif?>
<?php endforeach?>
<?php
$html = ob_get_clean();

위의 코드를 활용하시면 첫 번째 표시되는 게시판과 두 번째에 표시되는 게시판 이름 앞에

서로 다른 문구, 아이콘, 이미지 등을 추가하실 수 있습니다.

고맙습니다.

https://www.cosmosfarm.com/threads/document/29884?page=3 여기서 알려주신 코드를 2개 만들어서

표시하기1, 표시하기2로 타이틀 잡고 표시하기1은 숏코드를 kboard_board_best_view (1주 단위) 라 하고 표시하기 2는 숏코드 kboard_board_best_view2 (4주 단위)로 해서  functions.php 작성하였습니다. 페이지 편집은 텍스트 편집 창에서 아래와 같이 하였습니다.

<div class="cafe">[searchandfilter fields="search" submit_label="검색" search_placeholder="카페..."] <a href="http://xion.kr/"><img src="http://www.xion.kr/main/banner_4.jpg"></a><br/>[su_tabs active="1"][su_tab title="최근 뜨는 카페" disabled="no" anchor="" url="" target="blank" class=""][kboard_board_best_view][/su_tab]
[su_tab title="카페 랭킹" disabled="no" anchor="" url="" target="blank" text-align="left" class=""][kboard_board_best_view2][/su_tab]
[/su_tabs] <a href="http://xion.kr/?page_id=180"><img src="http://www.xion.kr/main/bbs.png" alt="null" /></a></div>

올려주신 페이지에서 탭 메뉴와 카페 랭킹의 내용을 왼쪽 정렬하시려면

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

.su-tabs-nav, 
.su-tabs-pane { text-align: left; }

카페 랭킹 쪽 내용은 어떻게 추가하신 건지요?

일반 텍스트로 추가하셨다면 직접 아이콘이나 특수문자를 추가해보시겠어요?

고맙습니다.

.kboard-best-view2 .kboard-best-view2-board-name { float: left; margin: 0; width: 50%; text-align: left; }

감사합니다. 잘 적용됐습니다. 그런데 두번째 탭메뉴인 '카페 랭킹'을 왼쪽 정렬해주려고 알려주신 코드 이름을 view2 로 수정했더니 적용이 안되서요. '카페랭킹'을 https://imgur.com/a/QqbYw0d 첨부이미지처럼 왼쪽 정렬하면서 카페 이름 앞에 아이콘도 넣으려면 어떻게 하면 될까요?

그리고, 한개 더 여쭤볼게 있는데 https://imgur.com/a/R888aYe 이 탭메뉴가 원래 왼쪽에 있었는데 지금은 가운데로 가버려서요. 원래대로 왼쪽으로 보내는 방법도 부탁드립니다.^^;;

탭 메뉴 쪽 최대 너비를 600px로 설정하고

올려주신 이미지처럼 CSS 코드를 적용하시려면

직접 추가하신 아래의 코드를 각각 지우신 후

.cafe { width: 600px; }
.kboard-best-view .kboard-best-view-board-name { margin-right: 350px; }

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

.cafe { max-width: 600px; margin: 0 auto; }
.kboard-best-view { overflow: hidden; }
.kboard-best-view .kboard-best-view-board-name { float: left; margin: 0; width: 50%; text-align: left; }
.kboard-best-view .kboard-best-view-count { float: left; margin: 0; width: 50%; text-align: right; }

고맙습니다.

안녕하세요~ 항상 감사드립니다. 다름아니라 위 작성한 '카페'페이지를 가운데 정렬하려고 페이지 편집창에서

<div class="cafe">[searchandfilter fields="search" submit_label="검색" search_placeholder="카페..."] <a href="http://xion.kr/"><img src="http://www.xion.kr/main/banner_4.jpg"></a><br/>[su_tabs active="1"][su_tab title="최근 뜨는 카페" disabled="no" anchor="" url="" target="blank" class=""][kboard_board_best_view][/su_tab]
[su_tab title="카페 랭킹" disabled="no" anchor="" url="" target="blank" text-align="left" class=""][kboard_board_best_view2][/su_tab]
[/su_tabs] <a href="http://xion.kr/?page_id=180"><img src="http://www.xion.kr/main/bbs.png" alt="null" /></a></div>

전체 class 를 카페로 지정하고, 사용자정의 추가 CSS 창에  .cafe{text-align: center !important; }로 가운데 정렬을 해주니까 위치가 가운데로 가긴 했는데 탭메뉴2개도 왼쪽에 위치하던게 가운데로 이동되었습니다.  그리고, 일전에 문의드린 https://www.cosmosfarm.com/threads/document/30393 이때 화면을 넓게 쓰는 바람에 탭메뉴 내용이 가로로 너무 길게 늘어져서 .cafe{width: 600px} 을 추가했더니 페이지 내용들이 다시 왼쪽으로 붙어버리고, 모바일에서는 잘린 모양으로 나오고 있습니다.

도움 부탁드릴 내용이 ^^:;

1. 탭메뉴내용 폭을 600px 정도로 고정하려고 하고,

2. 카페 페이지 모든 내용들이 가운데 정렬로 보여지고(모바일에서도 잘리는거 없이요.)

  단, 탭메뉴들은 원래 숏코드에서 제공하는 것처럼 왼쪽에 표시되게요.

3. https://imgur.com/a/acQwKIS 처럼 카페명은 왼쪽정렬로 왼쪽에 붙고 조회수는 오른쪽 정렬로 오른쪽에 붙게

이렇게 도움부탁드립니다. 감사합니다...

안녕하세요.

기존 코드 대신 아래 코드를 활용해서 링크를 추가해보시겠어요?

$url = new KBUrl();

ob_start();
?>
<?php $index = 0?>
<?php foreach($best_board_list as $board):?>
<?php $best_board = new KBoard($board->board_id)?>

<?php $index++?>
<?php if($index == 1):?>
	<div><a href="<?php echo $url->getBoardRedirect($best_board->id)?>">1번 <?php echo $best_board->board_name?></a></div>
<?php elseif($index == 2):?>
	<div><a href="<?php echo $url->getBoardRedirect($best_board->id)?>">2번 <?php echo $best_board->board_name?></a></div>
<?php else:?>
	<div><a href="<?php echo $url->getBoardRedirect($best_board->id)?>"><?php echo $best_board->board_name?></a></div>
<?php endif?>
<?php endforeach?>
<?php
$html = ob_get_clean();

고맙습니다.