Request Xin code Page Nav của site techrum

quick87 · 12/10/2017

Chào anh em vnxf,

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

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 · 12/10/2017

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 · 12/10/2017

2L.Ohayo nói:

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 · 12/10/2017

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 · 13/10/2017

hardcore nói:

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 !

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
T	Help Home Screen Installation! Các bác chỉ giúp e lấy đoạn code thông báo thêm vào màn hình ở đâu vậy ạ!	Template Modifications	0	01/11/2019
	Other Xin cách tạo responsive cho xenporta cho code sau	Template Modifications	0	27/08/2019
	Other Tìm và thuê người code addons cho xenforo 2	Template Modifications	5	19/03/2019
	Request Có cách nào để Encode attachment URL sang base64 ?	Template Modifications	0	10/10/2017
	Help thêm bbcode ifame	Template Modifications	2	21/01/2017

Request Xin code Page Nav của site techrum

quick87

Corporal

2L.Ohayo

Moderator

quick87

Corporal

hardcore

Sergeant

quick87

Corporal

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT

XenForo 1	XenForo 2
Translate by PVS