Request Xin code Page Nav của site techrum

quick87

Corporal
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

Fieldmarshal
Thành viên BQT
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
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
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
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:

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top