Personalizar a paginação do fórum

Qual é minha questão:
Vou ser breve, gostaria de colocar esse estilo de paginação.
Paginação: http://gyazo.com/d9dea51814e24aa9a337774db303dc2a

Endereço do meu fórum:
http://foradjogo.forumeiros.com

Versão do fórum:
PUNBB

@Diogo Ferreira
Olá amigo!

Aqui está, basta adicionar no seu CSS:

Código:


.pun .paging {
 color: #FFFFFF !important;
  float: left !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  padding: 5px !important;
}
.paging > a {
  color: #999999 !important;
    padding: 5px !important;
}
.paging > a:hover {
    background: none repeat scroll 0 0 #ECECEC !important;
    border-radius: 2px 2px 2px 2px !important;
}
.bginput {
  background: none repeat scroll 0 0 #FFFFFF !important;
  border-color: #848484 #C1C1C1 #E1E1E1 !important;
  border-radius: 2px 2px 2px 2px !important;
  border-style: solid !important;
  border-width: 1px !important;
  padding: 4px !important;
  width: 76px !important;
  margin-right: 0 !important;
}
.bginput:focus {
  border-color: #4E4E4E #7C7C7C #A3A3A3 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
}
.paging > b {
  background: none repeat scroll 0 0 #7BA60D !important;
  border-radius: 2px 2px 2px 2px !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
   padding: 5px !important;
}
.sprite-arrow_prosilver_right {
 /*background: url("http://i34.servimg.com/u/f34/18/17/62/92/next10.png") no-repeat scroll 0 0 transparent !important;*/
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAUCAYAAAAOTSQ2AAAA8klEQVR42u2W0Q2EIAyGWbN7dAyGuKRjdArG4EGNE/SslIieUS+HCclp0lighS/9QXFuevq+lxhjM6Y8yuXGcXy1BJZtGAZxLYJle+D+DC6QIICA59RmLwAoFLIPK/O89M9+XNpILITwkZPGwg9w4IV34czf5LGfcpAkxJCAZr+IOcj9Gg4Ri6qcw+U8T/bmzXhNuHkRlfZQVquuWSBM/XlL3AbHKtU0GV2sXJZzB/oWOJ1Q5b0Cl6qmUCx+b8NXh7OFzuEszuRMoJu4+nB2Cg8+JVqhVUwJW57YKnDPH+KBuwlOL3XNXjb16bquKTDlUa432uKy+JczTxcAAAAASUVORK5CYII=")
 no-repeat scroll 0 0 transparent !important;
 width: 39px !important;
 height: 20px !important;
 vertical-align: middle !important;
}
.sprite-arrow_prosilver_right:hover {
 /*background: url("http://i34.servimg.com/u/f34/18/17/62/92/nextov10.png") no-repeat scroll 0 0 transparent !important;*/
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAUCAYAAAAOTSQ2AAABEElEQVR42u2WsQqDMBCG8zY+kNAnKKWUPoGPIF1bSpcszn0DxaXt5Obm4CiuPsBdPZNgtKKWRghU4fCS3CUf9ycaxuon3pzw7hytMeIhLvY63KwCU/bYXZDZCKZshfszODfECgAhDkTbSxGgxMxVPnSs8Nr+xnfadsUDzHL4yBFj/g9wkGIyCCf9Xl4S1zl5iJHjC6DG12JGcr+Gq/JSq8o0nMoruHx7vXGTcM0iJO2orLK60iJein61JRaD80iqejI+s3JKzgHoReBoQpJ3DpyoGkEFWAxteONwcqFpOBkn5RSgvTjzcPIUjnxKqEKdGB1WP7FG4NY/xAq3ENxzf7Xzsrk9i9tw5PpWgREPcb0BzJJ60qSpBmUAAAAASUVORK5CYII=")
 no-repeat scroll 0 0 transparent !important;
 width: 39px !important;
 height: 20px !important;
 vertical-align: middle !important;
}
.sprite-arrow_prosilver_left {
 /*background: url("http://i34.servimg.com/u/f34/18/17/62/92/next10.png") no-repeat scroll 0 0 transparent !important;*/
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAAA8UlEQVR42u2W0Q2EIAyGWZM9Oka3YAymYAweFDfoWbRe5URzJF5ITpImlMrPR4uKMXMbx5FijF0ZMzGbmaapOzixlBKZXuHEHsB/BvSE1pLVBo4Cx4IjKGPol3ke9+OzoY/kkftI/mgNmdsCCC4s/gqV/bXPC2uo7Oc+kAuFnn7mbKwZUO+2BNTwNcAPvVpWf5JBXeI3QAaSYxIDOTgv7/dnUMQOzuC2kWoGi1jWqDzXVmJlOoM6s1eASjM4UNm8E3D282ICdQooZUZCqGjfAbh7gQ4+MzuNLX5d3udP8gB2AciXwq4vrNyGYegOjpmY7QVXBvVa4HTE3gAAAABJRU5ErkJggg==")
 no-repeat scroll 0 0 transparent !important;
 width: 40px !important;
 height: 20px !important;
 vertical-align: middle !important;
}
.sprite-arrow_prosilver_left:hover {
 /*background: url("http://i34.servimg.com/u/f34/18/17/62/92/nextov10.png") no-repeat scroll 0 0 transparent !important;*/
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAABGUlEQVR42mN4d+nB/wNhPf/XqecMKgxy0+vTd/4zHM+aNegcB8NH06b9ZxisjoPhUQeOZAcu+f/837///5Dx/b3/94Hkgvf+/4Qud2AJRF/VFVRxIH5elfP/7AEQ+8r/s9jsgOklx4Gf5ndB+FBHgflQNshiZEeB+WD2y/+3g9HMQ1aDT4xsByL7Ft2ByI7H5UAM83CFKl1CEDmKEQ4AOwiWTNS7/t++jz96SU+DMMOwpEG4R3CGIJoc2Awc6siLYiSMHILIIUvIgUhm7pv/Eik0aelAIB9sGcxReB0Ii+Yr/5/fx2E2LRyIkoGwFDMoZsDlCUfvaE0y6sBB4cBjGTMGb4M1Zep/BlCzel9w16BzHMhNL49e/w8AMce+lnTW/VUAAAAASUVORK5CYII=")
 no-repeat scroll 0 0 transparent !important;
 width: 40px !important;
 height: 20px !important;
 vertical-align: middle !important;
}
.paging > a:last-child {
  padding: 0 !important;
}
.pagination a {
    background: none repeat scroll 0 0 #FFFFFF !important;
    border: 1px solid #D3D3D3 !important;
    padding: 1px 3px !important;
}
.pagination {
    background: none repeat scroll 0 0 #FFFFFF !important;
 padding: 0 !important;
}


Resultado:


Abraços,

JS

Não ficou igual amigo, veja: http://gyazo.com/ccc78d7dca285371dc40b2700e79f9f6

Diogo Ferreira escreveu:Não ficou igual amigo, veja: http://gyazo.com/ccc78d7dca285371dc40b2700e79f9f6

Não está igual à essa sua imagem de exemplo http://gyazo.com/d9dea51814e24aa9a337774db303dc2a  pois os botões que eu consegui estavam em inglês e também não aparece o [Anterior] xxxx [Próxima] pois seu tópico só possuo 2 páginas não sendo suficiente para que apareça os dois botões que no caso do código que eu fiz seria [Prev] xxx [Next]

Veja abaixo na segunda página:

---

JS

Amigo,pode só colocar Laranja em vez de verde?

Diogo Ferreira escreveu:Amigo,pode só colocar Laranja em vez de verde?

Sim, dá pra colocar a cor que você quiser, basta alterar o que está em negrito no bloco abaixo pelo número da cor desejada:

.paging > b {
background: none repeat scroll 0 0 #7BA60D !important;
border-radius: 2px 2px 2px 2px !important;
color: #FFFFFF !important;
font-weight: 700 !important;
padding: 5px !important;
}

Abraços,

JS

Amigo tá muito bom, queria uma ultima alteração:

Veja essa imagem: http://gyazo.com/af980e70c2c1d0da2312af2e3b2664e4

- Retirar todo o texto da barra cinza "NEXT/PREV .. mensagem.." e colocar a paginação nesse mesmo sítio. Quanto aos share links que se vêm, se se conseguisse pôr debaixo das respostas rápidas, era perfeito!

No código que postei nesta mensagem https://ajuda.forumeiros.com/t89003-paginacao-ca#603918 troque o bloco abaixo correspondente:

Código:


.pun .paging {
  color: rgba(0, 0, 0, 0) !important;
  float: left !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  margin-top: -65px;
  padding: 5px !important;
  position: absolute;
}


E adicione este outro código:

Código:


.main-foot.clearfix .h2 {
  display: none !important;
}


Resultado:


Quanto aos share links, ficará pra outro tópico pois nossas regras só permitem uma dúvida/questão por tópico ok?

Abraços,

JS

Tá feito, só uma pequena coisa, qual o limite máximo das páginas? Não quero que encha tudo, podia parar no 5 e depois reticencias e a ultima página, percebe?

Fique feliz que essa questão tenha sido resolvida e lembre-se: nossas regras só permitem uma dúvida/questão por tópico ok?

Abraços,

JS