Request Xin code Page Nav của site techrum

quick87

Corporal
Tham gia
10/12/2016
Bài viết
113
Được Like
62
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 đỡ !
 

2L.Ohayo

Moderator
Thành viên BQT
Tham gia
08/03/2015
Bài viết
761
Được Like
835
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

Corporal
Tham gia
10/12/2016
Bài viết
113
Được Like
62
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;
}

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 !
 

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
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

Corporal
Tham gia
10/12/2016
Bài viết
113
Được Like
62
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;
    }
}
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 !
 
Sửa lần cuối:

Top Bottom