울러리

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

· 2022-04-06 (수) 15:01:32 · 9271 · 8

3718390329_1649221344.8588.jpg기본

3718390329_1649223405.7104.jpg변경 (회색)

3718390329_1649226009.2094.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개

감사합니다.
저는
[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 /* 페이징 */ 내용입니다.
@들레아빠 심플하고 좋네요. 참고 하겠습니다. 감사합니다. ^^
@들레아빠 적용해보니 깔끔해서 이쁘네요 감사합니다.
@vplanet default.css의 오타가 났습니다.
소중한 정보 공유 감사합니다. ^^
2022-04-07 (목) 13:12:28
추천 한방 먹이고 갑니다. 저는 css 퍼블리싱이 세상에서 제일 싫은 사람입니다.
전문 퍼블리셔들을 보면 존경스러워요. 완전 노가다 작업이라는 생각이...
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
22-04-08 조회 7,057
22-04-06 조회 9,272
22-04-02 조회 1.4만
22-04-01 조회 6,981
22-03-31 조회 5,798
22-03-30 조회 7,189
22-03-29 조회 8,754
22-03-29 조회 5,329
22-03-28 조회 5,734
22-03-26 조회 6,353
22-03-25 조회 7,056
22-03-24 조회 5,923
22-03-23 조회 4,900
22-03-23 조회 5,586
22-03-22 조회 5,271
22-03-22 조회 5,102
22-03-19 조회 6,421
22-03-19 조회 7,737
22-03-15 조회 6,804
22-03-14 조회 5,971
22-03-13 조회 6,202
22-03-12 조회 6,353
22-03-10 조회 5,988
22-03-09 조회 5,403
22-03-07 조회 6,161
22-03-06 조회 6,708
22-03-04 조회 5,812
22-03-03 조회 7,290
22-03-03 조회 5,606
22-03-01 조회 9,151