기본
변경 (회색)
변경 (블랙)
--------------------------------회색버전----------------------------
<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]
이렇게 사용합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 23254 | |
| 23244 | |
| 23241 | |
| 23236 | |
| 23200 | |
| 23199 | |
| 23179 | |
| 23174 | |
| 23138 | |
| 23128 | |
| 23125 | |
| 23116 | |
| 23109 | |
| 23099 | |
| 23092 | |
| 23083 | |
| 23079 | |
| 23063 | |
| 23050 | |
| 23036 | |
| 23029 | |
| 23007 | |
| 23003 | |
| 22983 | |
| 22959 | |
| 22943 | |
| 22939 | |
| 22934 | |
| 22905 | |
| 22897 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기