테스트 사이트 - 개발 중인 베타 버전입니다

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

· 3년 전 · 5840 · 8

3718390329_1649221344.8588.jpg기본

3718390329_1649223405.7104.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개

3년 전
감사합니다.
저는
[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]
이렇게 사용합니다.
3년 전
@들레아빠 혹시 적용한 샘플 페이지 있을까요?
3년 전
@호텔천사
[http://sir.kr/data/editor/2204/08a38ab7fe3c0cc88cf1fad9c8b7c67e_1649299508_8262.jpg]

eefault.css /* 페이징 */ 내용입니다.
3년 전
@들레아빠 심플하고 좋네요. 참고 하겠습니다. 감사합니다. ^^
@들레아빠 적용해보니 깔끔해서 이쁘네요 감사합니다.
3년 전
@vplanet default.css의 오타가 났습니다.
3년 전
소중한 정보 공유 감사합니다. ^^
3년 전
추천 한방 먹이고 갑니다. 저는 css 퍼블리싱이 세상에서 제일 싫은 사람입니다.
전문 퍼블리셔들을 보면 존경스러워요. 완전 노가다 작업이라는 생각이...

게시글 목록

번호 제목
23966
23963
23953
23949
23938
23935
23933
23928
23919
23918
23917
23910
23902
23901
23897
23894
23893
23891
23885
23872
23870
23862
23859
23853
23845
23838
23827
23819
23805
23801