부트스트랩 페이징 색상 변경 방법
기본
변경 (회색)
변경 (블랙)
--------------------------------회색버전----------------------------
<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 /* 페이징 */ 내용입니다.
전문 퍼블리셔들을 보면 존경스러워요. 완전 노가다 작업이라는 생각이...
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2664 |
선택과집중
|
4개월 전 | 571 | |
| 2663 |
|
4개월 전 | 619 | |
| 2662 |
|
4개월 전 | 574 | |
| 2661 |
선택과집중
|
4개월 전 | 508 | |
| 2660 | 4개월 전 | 588 | ||
| 2659 |
Modify
|
4개월 전 | 653 | |
| 2658 |
선택과집중
|
4개월 전 | 415 | |
| 2657 | 4개월 전 | 452 | ||
| 2656 |
|
4개월 전 | 964 | |
| 2655 |
선택과집중
|
4개월 전 | 548 | |
| 2654 | 5개월 전 | 403 | ||
| 2653 |
선택과집중
|
5개월 전 | 585 | |
| 2652 | 5개월 전 | 394 | ||
| 2651 | 5개월 전 | 446 | ||
| 2650 |
선택과집중
|
5개월 전 | 327 | |
| 2649 |
선택과집중
|
5개월 전 | 423 | |
| 2648 | 5개월 전 | 441 | ||
| 2647 |
welcome
|
5개월 전 | 545 | |
| 2646 |
디지털홍익인간
|
5개월 전 | 453 | |
| 2645 | 5개월 전 | 467 | ||
| 2644 |
선택과집중
|
5개월 전 | 512 | |
| 2643 | 5개월 전 | 456 | ||
| 2642 | 5개월 전 | 372 | ||
| 2641 | 5개월 전 | 358 | ||
| 2640 | 5개월 전 | 394 | ||
| 2639 | 5개월 전 | 1358 | ||
| 2638 |
|
5개월 전 | 510 | |
| 2637 |
세르반데스
|
5개월 전 | 398 | |
| 2636 |
선택과집중
|
5개월 전 | 568 | |
| 2635 |
선택과집중
|
6개월 전 | 682 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기