2026, 새로운 도약을 시작합니다.

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

3718390329_1649221344.8588.jpg기본

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

3718390329_1649226009.2094.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 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,596
2741 2일 전 조회 98
2740 4일 전 조회 93
2739 1주 전 조회 205
2738 1주 전 조회 208
2737 1주 전 조회 173
2736 1주 전 조회 275
2735 3주 전 조회 277
2734 3주 전 조회 258
2733 1개월 전 조회 261
2732 1개월 전 조회 298
2731 1개월 전 조회 263
2730 1개월 전 조회 221
2729 1개월 전 조회 349
2728 1개월 전 조회 243
2727 1개월 전 조회 418
2726 1개월 전 조회 251
2725 1개월 전 조회 325
2724 1개월 전 조회 356
2723 1개월 전 조회 264
2722 1개월 전 조회 297
2721 1개월 전 조회 210
2720 2개월 전 조회 303
2719 2개월 전 조회 306
2718 2개월 전 조회 199
2717 2개월 전 조회 334
2716 2개월 전 조회 201
2715 2개월 전 조회 310
2714 2개월 전 조회 270
2713 2개월 전 조회 373
2712 2개월 전 조회 288
🐛 버그신고