Request Xin code Page Nav của site techrum

Thảo luận trong 'Template Modifications' bắt đầu bởi quick87, 12/10/2017.

  1. quick87

    quick87 Thượng Đế

    Tham gia:
    10/12/2016
    Bài viết:
    112
    Đã được thích:
    56
    Điểm thành tích:
    28
    Chào anh em vnxf,

    Mình thấy style site techrum có cái Page Nav phân trang đẹp như demo:

    Capture.JPG


    mình không biết rip nên không biết css hoặc code nó như thế nào.
    Anh em hỗ trợ rip, share mình xin nhé.

    Mình cảm ơn và mong được anh em giúp đỡ !
     
  2. 2L.Ohayo

    2L.Ohayo Cộng Sự Đắc Lực Thành viên BQT

    Tham gia:
    08/03/2015
    Bài viết:
    761
    Đã được thích:
    808
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Dán vào EXTRA.CSS nhé
    Mã:
    .PageNav .pageNavHeader {
        padding: 8px 5px;
    }
    .PageNav a.currentPage{
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 50%;
        color: rgb(255, 255, 255);
        background-color: rgb(87, 87, 87);
        border: solid 1px rgb(87, 87, 87);
    }
    .PageNav .hidden {
        display: block;
    }
    .PageNav .scrollable {
        width: 197px;
        height: 34px;
    }
    .PageNav a {
        padding: 8px 5px 8px 5px;
        border-radius: 50%;
        margin-right: 5px;
        border: dotted 1px #c0c0c0;
    }
    .PageNav a.text {
        padding: 8px 8px 8px 8px;
        border-radius: 0px;
        margin-left: 5px;
    }
     
    quick87 thích bài này.
  3. quick87

    quick87 Thượng Đế

    Tham gia:
    10/12/2016
    Bài viết:
    112
    Đã được thích:
    56
    Điểm thành tích:
    28
    Mình cảm ơn bạn, mình có paste vô Extra mà không được, mình chỉnh thử trong page_nav.css mà nó bị bể form, bạn cho mình xin toàn bộ code của cái page_nav.css được không bạn ?

    Cảm ơn @2L.Ohayo !
     
  4. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    362
    Điểm thành tích:
    63
    Giới tính:
    Nam
    bạn thử cái này xem
    Mã:
    .pageNavLinkGroup{
        margin: 0px;
    }
    .PageNav{
        text-transform: uppercase;
        font-family: 'Roboto Condensed', 'Helvetica Neue', Arial;
    }
    /* Page Nav */
    .PageNav .pageNavHeader {
        padding: 8px 5px;
    }
    .PageNav a.currentPage{
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 50%;
        color: rgb(255, 255, 255);
        background-color: rgb(87, 87, 87);
        border: solid 1px rgb(87, 87, 87);
    }
    .PageNav .hidden {
        display: block;
    }
    .PageNav .scrollable {
        width: 197px;
        height: 34px;
    }
    .PageNav a {
        padding: 8px 5px 8px 5px;
        border-radius: 50%;
        margin-right: 5px;
        border: dotted 1px #c0c0c0;
    }
    .PageNav a.text {
        padding: 8px 8px 8px 8px;
        border-radius: 0px;
        margin-left: 5px;
    }
    /** Link groups and pagenav container **/
    
    .pageNavLinkGroup
    {
        display: table;
        *zoom: 1;
        table-layout: fixed;
        box-sizing: border-box;
    
        font-size: 12px;
    margin: 10px 0;
    line-height: 16px;
    
    }
    
    opera:-o-prefocus, .pageNavLinkGroup
    {
        display: block;
        overflow: hidden;
    }
    
        .pageNavLinkGroup:after
        {
            content: ". .";
            display: block;
            word-spacing: 99in;
            overflow: hidden;
            height: 0;
            font-size: 0.13em;
            line-height: 0;
        }
    
        .pageNavLinkGroup .linkGroup
        {
            float: right;
            padding-right: 10px;
        }
    
    .linkGroup
    {
    }
    
        .linkGroup a
        {
            padding: 3px 0;
    
        }
    
            .linkGroup a.inline
            {
                padding: 0;
            }
    
        .linkGroup a,
        .linkGroup .Popup,
        .linkGroup .element
        {
            margin-left: 10px;
            display: block;
            float: left;
    
        }
    
            .linkGroup .Popup a
            {
                margin-left: -2px;
                margin-right: -5px;
                *margin-left: 10px;
                padding: 3px 5px;
            }
    
        .linkGroup .element
        {
            padding: 3px 0;
        }
    .PageNav{
        margin-left: 7px;
    }
    .PageNav a.text{
        padding: 10px;
    }
    .pageNavLinkGroup .linkGroup{
        padding: 5px 10px 5px 0px;
        margin-left: 5px;
        margin-top: 2px;
        border: dashed 1px #C0C0C0;
    }
    .PageNav a{
        background-color: transparent;
        border: 1px dashed #C0C0C0;
    }
    .PageNav a:hover, .PageNav a:focus{
        background-color: rgb(89, 133, 255);
        border-color: rgb(89, 133, 255);
    }
    .PageNav
    {
        font-size: 12px;
    padding: 2px 0;
    overflow: hidden;
    zoom: 1;
    line-height: 16px;
    word-wrap: normal;
    min-width: 150px;
    white-space: nowrap;
    
        margin-bottom: -.5em;
    }
    
        .PageNav .hidden
        {
            display: none;
        }
    
        .PageNav .pageNavHeader,
        .PageNav a,
        .PageNav .scrollable
        {
            display: block;
            float: left;
            margin-right: 3px;
            margin-bottom: .5em;
        }
    
        .PageNav .pageNavHeader
        {
            padding: 1px 0;
        }
    
        .PageNav a
        {       
            color: rgb(113, 113, 113);
    text-decoration: none;
    background-color: rgb(227, 242, 253);
    padding-top: 2px;
    padding-bottom: 2px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 0px;
    text-align: center;
    
            width: 23px;
        }
    
            .PageNav a[rel=start]
            {
                width: 23px !important;
            }
    
            .PageNav a.text
            {
                width: auto !important;
                padding: 0 4px;
            }
    
            .PageNav a.currentPage
            {
                color: rgb(170, 0, 255);
    background-color: rgb(89, 133, 255);
    border-color: rgb(89, 133, 255);
    position: relative;
    
            }
    
            a.PageNavPrev,
            a.PageNavNext
            {
                color: rgb(55, 55, 55);
    background-color: transparent;
    padding: 1px;
    border: 1px none black;
    cursor: pointer;
    
                width: 23px !important;
            }
    
            .PageNav a:hover,
            .PageNav a:focus
            {
                color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: rgb(89, 133, 255);
    border-color: rgb(89, 133, 255);
    
            }
    
        .PageNav a.distinct
        {
            margin-left: 3px;
        }
    
        .PageNav .scrollable
        {
            position: relative;
            overflow: hidden;
            width: 137px; /* width of 5 page numbers plus their margin & border */
            height: 18px; /* only needs to be approximate */
        }
    
            .PageNav .scrollable .items
            {
                display: block;
                width: 20000em; /* contains scrolling items, should be huge */
                position: absolute;
                display: block;
            }
    
    /** Edge cases - large numbers of digits **/
    
    .PageNav .gt999
    {
        font-size: 9px;
        letter-spacing: -0.05em;
    }
    
    .PageNav.pn5 a { width: 29px; } .PageNav.pn5 .scrollable { width: 167px; }
    .PageNav.pn6 a { width: 33px; } .PageNav.pn6 .scrollable { width: 187px; }
    .PageNav.pn7 a { width: 37px; } .PageNav.pn7 .scrollable { width: 207px; }
    
    @media (max-width:610px)
    {
        .Responsive .PageNav .pageNavHeader
        {
            display: none;
        }
    }
    
    @media (max-width:480px)
    {
        .Responsive .PageNav .unreadLink
        {
            display: none;
        }
    }
    
     
    quick87 thích bài này.
  5. quick87

    quick87 Thượng Đế

    Tham gia:
    10/12/2016
    Bài viết:
    112
    Đã được thích:
    56
    Điểm thành tích:
    28
    Cảm ơn @hardcore, Style mình đang dùng là style [D.C] Cloud của @datdaik000 chia sẻ, mình cũng thử thay thế code của bạn mà nó vẫn ra hình vuông, không giống như demo hình mình gửi.

    Mong được các bạn hướng dẫn thêm.
    Mình cảm ơn mọi người !
     
    Chỉnh sửa cuối: 13/10/2017
Tags:

Chia sẻ trang này