부트스트랩 페이징 색상 변경 방법
기본
변경 (회색)
변경 (블랙)
--------------------------------회색버전----------------------------
<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년 전 | 4427 | ||
| 2694 | 2개월 전 | 197 | ||
| 2693 | 2개월 전 | 155 | ||
| 2692 | 2개월 전 | 163 | ||
| 2691 | 2개월 전 | 178 | ||
| 2690 | 2개월 전 | 330 | ||
| 2689 | 2개월 전 | 241 | ||
| 2688 |
|
2개월 전 | 444 | |
| 2687 | 2개월 전 | 297 | ||
| 2686 |
선택과집중
|
2개월 전 | 334 | |
| 2685 | 2개월 전 | 296 | ||
| 2684 | 2개월 전 | 356 | ||
| 2683 | 3개월 전 | 487 | ||
| 2682 | 3개월 전 | 281 | ||
| 2681 | 3개월 전 | 306 | ||
| 2680 |
선택과집중
|
3개월 전 | 279 | |
| 2679 | 3개월 전 | 334 | ||
| 2678 |
|
3개월 전 | 432 | |
| 2677 |
|
3개월 전 | 505 | |
| 2676 | 3개월 전 | 331 | ||
| 2675 | 3개월 전 | 308 | ||
| 2674 |
선택과집중
|
3개월 전 | 483 | |
| 2673 |
|
3개월 전 | 324 | |
| 2672 | 3개월 전 | 341 | ||
| 2671 | 3개월 전 | 288 | ||
| 2670 | 3개월 전 | 264 | ||
| 2669 | 3개월 전 | 377 | ||
| 2668 | 3개월 전 | 293 | ||
| 2667 |
선택과집중
|
3개월 전 | 489 | |
| 2666 |
선택과집중
|
3개월 전 | 473 | |
| 2665 |
선택과집중
|
3개월 전 | 412 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기