D

CSS페이징 만들어봤습니다.

· 2017-12-02 (토) 06:31:40 · 11525 · 11

항상 도움만 받다가 필요에의해 만든거라 팁이랄것도 없지만 필요하신 분들 계실지몰라 올려봅니다..^^

 

833449684_1512163792.3643.jpg

 

위 디자인으로 제작했구요..아이콘도 CSS로 그렸습니다.

기본 그누보드5에서 다른건 아무것도 수정하지 않으셔도 됩니다.

사용하시려는 해당 게시판 style.css 맨 하단에 넣어주시기만하면 적용됩니다.

 

[code]

/* Customized Paging */
.pg_wrap { clear:both; }
.pg_page { /* 기본페이지 */
    width:30px !important;
    height:30px !important;
    font-size:13px;
    color:#333;
    line-height:33px;
    padding:0;
    background:#fff;
    border:0;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    text-align:center;
    display:inline-block;
}
.pg_page:hover {
    background:#f2f2f2;
}
.pg_current { /* 현재페이지 */
    width:30px !important;
    height:30px !important;
    font-size:13px;
    color:#fff;
    font-weight:normal;
    line-height:33px;
    margin:0;
    padding:0;
    background:#333;
    border:0;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    text-align:center;
    display:inline-block;
}
.pg_start { /* 처음 */
    position:relative;
    top:50%;
    width:28px !important;
    height:28px !important;
    background:#fff;
    border:1px solid #ccc;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    text-indent:-9999px;
    display:inline-block;
}
.pg_start:after {
    position:absolute;
    top:10px;
    left:10px;
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid transparent;
    border-right:1px solid transparent;
    border-bottom:1px solid #777;
    border-left:1px solid #777;
    transform:rotate(45deg);
}
.pg_start:before {
    position:absolute;
    top:10px;
    left:16px;
    content:"";
    width:6px;
    height:6px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid #777;
    border-left: 1px solid #777;
    transform:rotate(45deg);
}
.pg_start:hover {
    background:#fff;
    border:1px solid #333;
}
.pg_prev { /* 이전 */
    position:relative;
    top:50%;
    width:28px !important;
    height:28px !important;
    background:#fff;
    border:1px solid #ccc;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    text-indent:-9999px;
    display:inline-block;
}
.pg_prev:after {
    position:absolute;
    top:10px;
    left:13px;
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid transparent;
    border-right:1px solid transparent;
    border-bottom:1px solid #777;
    border-left:1px solid #777;
    transform:rotate(45deg);
}
.pg_prev:hover {
    background:#fff;
    border:1px solid #333;
}
.pg_next { /* 다음 */
    position:relative;
    top:50%;
    width:28px !important;
    height:28px !important;
    background:#fff;
    border:1px solid #ccc;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    text-indent:-9999px;
    display:inline-block;
}
.pg_next:after {
    position:absolute;
    top:10px;
    right:13px;
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid #777;
    border-right:1px solid #777;
    border-bottom:1px solid transparent;
    border-left:1px solid transparent;
    transform:rotate(45deg);
}
.pg_next:hover {
    background:#fff;
    border:1px solid #333;
}
.pg_end { /* 맨끝 */
    position:relative;
    top:50%;
    width:28px !important;
    height:28px !important;
    background:#fff;
    border:1px solid #ccc;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    text-indent:-9999px;
    display:inline-block;
}
.pg_end:after {
    position:absolute;
    top:10px;
    right:10px;
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid #777;
    border-right:1px solid #777;
    border-bottom:1px solid transparent;
    border-left:1px solid transparent;
    transform:rotate(45deg);
}
.pg_end:before {
    position:absolute;
    top:10px;
    right:16px;
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid #777;
    border-right:1px solid #777;
    border-bottom:1px solid transparent;
    border-left:1px solid transparent;
    transform:rotate(45deg);
}
.pg_end:hover {
    background:#fff;
    border:1px solid #333;
}

[/code]

|

댓글 11개

오케이~ 감사합니다
잘 사용하겠습니다.
오늘도 좋은 하루 되십시오~^^)
2017-12-02 (토) 18:38:27
감사합니다^^
완전 굿입니다
감사합니다
잘쓰겠습니다!
감사합니다
2017-12-08 (금) 03:32:52
디자인이 끝내 줍니다!
CSS를 통 몰라서 삽질만 하는 놈이다 보니 냉큼 먹습니다. ^^

감사합니다!

추가 : 03:37:04

저기요. 이왕 주시는 것.
판매용 테마에 담아도 될까요?
답변 없으시면 안 되는 것으로 알고 사용하지는 않겠습니다.
허락해 주시면? < 지금은 잘 모르겠습니다. 미래가 불투명해서요. ㅎ
허락해 주세요. ㅠㅠ 불투명한 미래를 투명하게 바꾸고 싶습니다. ^^
2018-02-20 (화) 10:24:03
감사합니다.
2018-02-20 (화) 13:11:38
감사합니다.
2018-04-18 (수) 11:45:13
왕 캄사합니다... 잘 쓰겠습니다 ^^
감사합니다.
2020-02-21 (금) 22:26:41
감사합니다
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
17-12-28 조회 1.3만
17-12-27 조회 6,695
17-12-27 조회 8,279
17-12-27 조회 7,144
17-12-26 조회 7,103
17-12-22 조회 9,912
17-12-20 조회 1.2만
17-12-18 조회 1.7만
17-12-17 조회 8,928
17-12-16 조회 1.6만
17-12-15 조회 7,052
17-12-15 조회 7,805
17-12-14 조회 9,322
17-12-14 조회 8,153
17-12-13 조회 1만
17-12-13 조회 1.1만
17-12-13 조회 6,764
17-12-12 조회 7,735
17-12-11 조회 7,040
17-12-11 조회 7,818
17-12-11 조회 1.2만
17-12-07 조회 1.2만
17-12-07 조회 6,323
17-12-05 조회 7,787
17-12-03 조회 6,546
17-12-03 조회 7,371
17-12-02 조회 1.2만
17-12-01 조회 9,050
17-12-01 조회 7,401
17-12-01 조회 7,032