Request Xin code Page Nav của site techrum

Discussion in 'Template Modifications' started by quick87, Oct 12, 2017.

  1. quick87

    quick87 Thượng Đế

    Joined:
    Dec 10, 2016
    Messages:
    112
    Likes Received:
    56
    Trophy Points:
    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 Staff Member

    Joined:
    Mar 8, 2015
    Messages:
    761
    Likes Received:
    808
    Trophy Points:
    93
    Gender:
    Male
    Dán vào EXTRA.CSS nhé
    Code:
    .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 likes this.
  3. quick87

    quick87 Thượng Đế

    Joined:
    Dec 10, 2016
    Messages:
    112
    Likes Received:
    56
    Trophy Points:
    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 Đế

    Joined:
    Apr 2, 2015
    Messages:
    431
    Likes Received:
    362
    Trophy Points:
    63
    Gender:
    Male
    bạn thử cái này xem
    Code:
    .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 likes this.
  5. quick87

    quick87 Thượng Đế

    Joined:
    Dec 10, 2016
    Messages:
    112
    Likes Received:
    56
    Trophy Points:
    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 !
     
    Last edited: Oct 13, 2017
Tags:

Share This Page