Tạo phân trang đẹp cho Xenporta (Portal)

THB · 29/03/2015

Nhiều bạn hỏi làm sao để tạo được phân trang cho Xenporta như diễn đàn Root.Vn .
Mình sẽ hướng dẫn các bạn.Cách làm như sau:

Các bạn vào EWRporta.css thêm vào cuối đoạn css sau:

Mã:

.EWRporta_Portal .PageNav a:hover, .EWRporta_Portal .PageNav a:focus{
    border: 2px solid #ff7c06;
    background: #ff881d url('styles/passion/ksv/bg-pattern-orange.png');
    text-shadow: 0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65);
}
.EWRporta_Portal .PageNav a.currentPage {
    position: relative !important;
    border: 2px solid #ff7c06;
    background: #ff881d url('styles/passion/ksv/bg-pattern-orange.png');
    text-shadow: 0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65);
}
.EWRporta_Portal .PageNav a.text {
    width: auto !important;
    padding:0px 10px;
}
.EWRporta_Portal .PageNav a element.style {
}
Matched CSS Rules
.article-pagination .pagination li a:hover, .article-pagination .pagination li.active a {
    border: 2px solid #EB7E1C;
    background: url(../images/backgrounds/bg-pattern-orange.png);
    text-shadow: 0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65);
}
.EWRporta_Portal .PageNav a {
    color: #fff;
    width: 37px !important;;
    height: 37px !important;;
    display: block;
    text-align: center;
    text-decoration: none;
    border: 2px solid #64b9ce;
    font-size: 18px;
    line-height: 38px;
    font-weight: bold;
    background: #43b7d0 url('styles/passion/ksv/bg-pattern-cyan.png');
    -webkit-border-radius: 25px; -moz-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    text-shadow: 0 0 0 transparent, 1px 1px 2px rgba(51,140,162,0.65);
    -webkit-box-shadow: 4px 2px 3px rgba(178,177,163,0.4); -moz-box-shadow: 4px 2px 3px rgba(178,177,163,0.4); -khtml-box-shadow: 4px 2px 3px rgba(178,177,163,0.4); box-shadow: 4px 2px 3px rgba(178,177,163,0.4);
    -moz-box-shadow: 4px 2px 3px rgba(178,177,163,0.4);
    -webkit-box-shadow: 4px 2px 3px rgba(178,177,163,0.4);
    margin-right:6px !important;
}
.EWRporta_Portal .PageNav .pageNavHeader {
    display: none;
}
.EWRporta_Portal .PageNav .scrollable {
    height: 45px !important;
    width: 233px !important;
}
.EWRporta_Portal .PageNav .PageNavNext, .EWRporta_Portal .PageNav .PageNavPrev{
padding:0px !important;
}

Sau đó save lại và hưởng thành quả nhé.

nguồn: root.vn