테스트 사이트 - 개발 중인 베타 버전입니다

부트스트랩 페이징 색상 변경 방법

3718390329_1649221344.8588.jpg기본

3718390329_1649223405.7104.jpg변경 (회색)

  변경 (블랙)

 

--------------------------------회색버전----------------------------

<style>
.page-link {
  color: #000; 
  background-color: #fff;
  border: 1px solid #ccc; 
}

.page-item.active .page-link {
 z-index: 1;
 color: #555;
 font-weight:bold;
 background-color: #f1f1f1;
 border-color: #ccc;
 
}

.page-link:focus, .page-link:hover {
  color: #000;
  background-color: #fafafa; 
  border-color: #ccc;
}
</style>

 

 

--------------------------------블랙버전----------------------------

<style>
.page-link {
  color: #999; 
  background-color: #000;
  border-color: #444;
}

.page-item.active .page-link {
 z-index: 1;
 color: #ccc;
 font-weight:bold;
 background-color: #333;
  border-color: #444;
 
}

.page-link:focus, .page-link:hover {
  color: #ccc;
  background-color: #222; 
  border-color: #444;
}
</style>
 

 

입맛에 맞게 원하시는 색상으로 변경해서 사용하시고

전체 게시판에 지정하시려면 위 스타일을 테마 기본 css 에 적용하세요.

아니면 각 게시판에 적용하시면 될거 같습니다.

 

--추가팁--

              <?php if($write_pages) { ?>
              <div class="d-flex justify-content-end pagination mb-4">
               <?php echo $write_pages;  ?>

...........

 

left (왼쪽)

center (중간)

end (오른쪽)

pagination (보통)

pagination-lg  (크게)

pagination-sm (작게)

 

border-radius 등등으로 버튼 디자인을 꾸밀수 있는데 이전, 다음 버튼이 추가 수정이 필요한 듯합니다.

초보인 저는 딱 여기까지만..

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 8개

감사합니다.
저는
[code]
.pg_wrap {clear:both;text-align:center;padding-top:5px;margin-bottom:-35px;border-top-style:solid}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.pg {font-weight:bold;text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eeeeee11;border:1px solid #eeeeee11}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:5px}
.pg_page:hover {background-color:#fafafa}
.pg_start {border:1px solid #eee}
.pg_prev {border:1px solid #eee}
.pg_end {border:1px solid #eee}
.pg_next {border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}
.pg_current {display:inline-block;background:#eeeeee11;border:1px solid #3a8afd11;color:#f00;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:5px}

[/code]
이렇게 사용합니다.
@들레아빠 혹시 적용한 샘플 페이지 있을까요?
@호텔천사
[http://sir.kr/data/editor/2204/08a38ab7fe3c0cc88cf1fad9c8b7c67e_1649299508_8262.jpg]

eefault.css /* 페이징 */ 내용입니다.
@들레아빠 심플하고 좋네요. 참고 하겠습니다. 감사합니다. ^^
@들레아빠 적용해보니 깔끔해서 이쁘네요 감사합니다.
@vplanet default.css의 오타가 났습니다.
소중한 정보 공유 감사합니다. ^^
추천 한방 먹이고 갑니다. 저는 css 퍼블리싱이 세상에서 제일 싫은 사람입니다.
전문 퍼블리셔들을 보면 존경스러워요. 완전 노가다 작업이라는 생각이...

게시판 목록

그누보드5 팁자료실

글쓰기
🐛 버그신고