부트스트랩 페이징 색상 변경 방법
기본
변경 (회색)
변경 (블랙)
--------------------------------회색버전----------------------------
<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 | ||
| 2574 | 10개월 전 | 561 | ||
| 2573 | 10개월 전 | 937 | ||
| 2572 |
두리삼촌v
|
10개월 전 | 609 | |
| 2571 | 10개월 전 | 556 | ||
| 2570 | 10개월 전 | 599 | ||
| 2569 |
두리삼촌v
|
10개월 전 | 638 | |
| 2568 |
두리삼촌v
|
10개월 전 | 666 | |
| 2567 |
두리삼촌v
|
10개월 전 | 462 | |
| 2566 |
두리삼촌v
|
10개월 전 | 443 | |
| 2565 | 10개월 전 | 740 | ||
| 2564 | 10개월 전 | 670 | ||
| 2563 | 10개월 전 | 473 | ||
| 2562 | 10개월 전 | 1030 | ||
| 2561 |
|
11개월 전 | 675 | |
| 2560 | 11개월 전 | 919 | ||
| 2559 | 11개월 전 | 657 | ||
| 2558 |
|
11개월 전 | 504 | |
| 2557 | 11개월 전 | 656 | ||
| 2556 | 11개월 전 | 957 | ||
| 2555 | 11개월 전 | 1338 | ||
| 2554 | 11개월 전 | 753 | ||
| 2553 |
|
11개월 전 | 748 | |
| 2552 | 11개월 전 | 676 | ||
| 2551 | 11개월 전 | 864 | ||
| 2550 | 11개월 전 | 767 | ||
| 2549 |
|
11개월 전 | 717 | |
| 2548 | 11개월 전 | 1031 | ||
| 2547 | 11개월 전 | 673 | ||
| 2546 | 11개월 전 | 1207 | ||
| 2545 | 11개월 전 | 663 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기