[Tutorial] Pagination estilo IPB (Light e Dark)

Nome do Arquivo: Paginação estilo Ipboard
Autor: HUNTER MAKER
Funcionalidade: PunBB
Categoria: Recursos de Outros Autores

INTRODUÇÃO:
Este código de mudar os botões para passar páginas estilo IPBOARD.

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código:

.pun .paging b, .pagination b, .pagination span strong {
border-image: initial;
border-radius: 3px;
color: white!important;
font-size: 12px;
font-weight: 400!important;
margin-left: -1px!important;
padding: 5px 5px!important;
text-shadow: 0 1px 0 black;
visibility: visible;
background: #7BA60D;
color: #fff;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 1px 5px;
}

 .paging a , .paging input, .pagination a, .pagination input {
border-image: initial;
border-radius: 3px;
font-size: 12px!important;
margin: 2px;
padding: 5px 5px!important;
text-shadow: 0 1px 0 white;
visibility: visible;
color: #333;
display: inline-block;
display: inline-block;
padding: 1px 4px;
color: #999;
}

---

Ciao.

[sucesso=Tutorial aceito]Movido para: Dicas e Tutoriais[/sucesso]

Olá,

Bom tutorial.Parabéns.

Até mais.

ótimo tutorial
Obrigado

Funcionou legal. Nota 10

Otimo Tutorial, Parabens!
Irei usar

Nome do Arquivo: [Tutorial] Pagination estilo IPB (Light e Dark)
Autor: Premotheus (6Eyes)
Funcionalidade: PunBB
Categoria: Recursos BestSkins

Como a imagem mostra, é um pagination estilo IPB, algo simples e que não pesa muito em vossos CSS.
Porém, o código funcionará perfeitamente se você não tiver utilizando outro pagination. (Lembrando que ele só funciona nos fóruns/subfóruns e não nos tópicos!)

O código a ser inseridos são estes:

Versões escuras (Dark):

Código:


/******
Pagination por Premotheus (6Eyes)
******/

.pagination {
    font-size: 0;
}
.pagination a {
    background: #252525 url('http://i.imgur.com/6qXhrdm.png') repeat-x 0 0 !important;
    color: #fff!important;
    padding: 2px 6px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 10px;
    margin-left: 5px;
}

.pagination a:hover {
background: #353535 url('http://i.imgur.com/6qXhrdm.png') repeat-x 0 0 !important;
}


Para versões claras (Light):

Código:


/******
Pagination por Premotheus (6Eyes)
******/

.pagination {
    font-size: 0;
}

.pagination a {
    background: #fff !important;
    color: #333 !important;
    padding: 1px 3px;
    border: 1px solid #d3d3d3;
    font-size: 10px;
    margin-left: 5px;
}

.pagination a:hover {
color: #369!important;
}


Os resultados estão no topo do tópico.
Até + e espero que gostem deste tutorial!