부트스트랩 페이징 색상 변경 방법 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

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 등등으로 버튼 디자인을 꾸밀수 있는데 이전, 다음 버튼이 추가 수정이 필요한 듯합니다.

초보인 저는 딱 여기까지만..

추천
5

댓글 8개

감사합니다.
저는

.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}


이렇게 사용합니다.
추천 한방 먹이고 갑니다. 저는 css 퍼블리싱이 세상에서 제일 싫은 사람입니다.
전문 퍼블리셔들을 보면 존경스러워요. 완전 노가다 작업이라는 생각이...
전체 2,132 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT