[PHPBB3][Pedido] Paginacion tipo blog o similar

Quisiera saber como poner un estilo de paginacion mas elegante, tipo al que se ponen en los blogs
Crei que en los foros no se podia pero por casualidad me encontre uno con este: 



y me gustaria poner algo similar en mi foro

Si alguien sabe como hacerlo y me puede ayudar se lo agradeceria porque llevo mucho buscando algo asi por la red sin resultados

Gracias

A ver, primero hay que empezar con que no sé cuales son las variables (ni si las hay) para poner lo de Leer tema anterior/siguiente. Pero lo del medio es la variable {PAGINATION} del template viewtopic_body. Puedes cambiarle el color de fondo y esas cosas con el selector p.pagination. El selector p.pagination span a podrás usarlo para cambiar los iconitos de los números, y p.pagination span a:hover para cuando pases el cursor sobre estos. Además, la página que esté activa (en el caso de la captura, la 33) es el selector p.pagination span strong

Pooor otro lado, lo de "Ir a la página" es básicamente el link que trae por defecto ("Página X de Y."). Responde al selector de p.pagination script+a, pero no sé por qué razón el jquery no está de mi parte hoy y no me quiere salir el code >____< Así que he hecho un arreglillo con CSS.

Código:

p.pagination script+a {
color: transparent;
position: relative;
}
p.pagination script+a:before {
content: "Ir a la página";
position: absolute;
top: 0px;
left: 0px;
color: black;
}


Espero que te sirva, cualquier duda me dices

Hola Kaylee!
gracias por contestar

con los datos que me pasaste y teniendo en cuenta que no se mucho de programacion, he creado este code:

Spoiler:

el problema (o problemas), es que los numeros de pagina no se ponen en el mismo lado que lo de ir a la pagina, le meti margin-left y nada que se mueve
y lo de pagina 2 de 2 esta transparente pero no se quita, y como es el lugar donde supongo que ira lo de ir a la pagina, se superpondran los dos links no? intente meterle display none pero desaparece lo demas

Total que estoy hecha un lio puff

¿Puedes pasar captura o el link del foro (en hide, si lo prefieres) para que vea exactamente lo que pasa? Porque no sé exactamente lo que quieres decir >___<

claro, mira le puse flechita para que veas lo que quiero mover y a donde, seria lo de fondo rojo a donde esta el ir a la pagina

Prueba quitando el margin-left y poniendo el selector de pagination así:

Código:

p.pagination{
background: #980000 !important;
position: relative !important;
left:-500px;
}

ok, he conseguido que se moviera donde queria, mira como quedó xD



el problema es que cuando pongo el mouse sobre el enlace de ir a la pagina, a la derecha me sale eso que te he metido en un circulo, habria forma de quitarlo?

por otra parte, me he dado cuenta de que en gestion de las imagenes, sale la opcion de poner imagen a ir al tema anterior y al tema siguiente, lo que pasa es que se ponen las dos juntas y debajo del avatar, y me gustaria que quedara como en la primera imagen que te pase, alguna idea?

Tienes puesto un código que hace que al hacer hover sobre un enlace, se le pongan ciertas características. Lo que debes hacer es agregar lo siguiente a tu css:

Código:

p.pagination script+a:hover {
color: transparent;
text-shadow: none!important;
}
p.pagination script+a:hover:before {
text-shadow: 0 0 2px #333;
}

Y si quieres añádele la cualidad transition:1s; al selector p.pagination script+a:before que hemos modificado anteriormente

Si quieres que no te salgan encima y al final de los posts esas imagencitas de las flechas, deberás tocar los templates. Concretamente, tendrás que ir a Visualización->General->viewtopic_body. Allí busca:

Código:

<p class="left-box">

Y dentro de ese div borra lo siguiente:

Código:

<a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>

Más abajo te saldrá exactamente lo mismo, puedes quitarlo también ^^

kay me quedo genial el primer codigo!! muchas gracias!!!
en cuanto al segundo... segun creo entender, eso hace que desaparezcan las flechas de previous y next, y si lo que quiero es ponerle imagenes?
me gustaria que al final quedara asi:

Eso hace que desaparezcan de debajo de los posts, no las de los lados la paginación. Sigue los pasos que te puse arriba para ello y luego añade este código javascript:

Código:

$(document).ready(function(){
$('.pagination span a.pag-img:first-of-type').each(function(){
$(this).parent().prev().before(this);
});
});

Puedes ver el resultado aquí

hola kay, siento ser tan molesta pero es que no me sale
mira te dejo captura de como me quedo siguiendo todos los pasos que me dijiste:



y por cierto no me deja acceder al enlace que me pasaste

u.u

He hecho un código básico de lo que pides. Simplemente son unos botones que te mueven a la izquierda o la derecha por la página y que te muestra la lista de páginas.



Para colocarlo haz lo siguiente:

Busca en la plantilla viewtopic_body:

Código:

<!-- BEGIN viewtopic_bottom -->

Coloca antes:

Código:

<!-- Paginación orgásmica/tipo blog. Llámala como quieras -->
<div id="pag_flerex">
    <a href="{U_VIEW_OLDER_TOPIC}"><</a>
        <!-- BEGIN topicpagination -->
            <p>{PAGINATION}</p>
        <!-- END topicpagination -->
    <a href="{U_VIEW_NEWER_TOPIC}">></a>
</div>


Ahora coloca este CSS en la zona de siempre:

Código:

#pag_flerex {
    text-align: center;
}

#pag_flerex > p {
    display: inline-block;
    font-size: 0;
    color: transparent;
    margin: 0 5px;
}

#pag_flerex > p > a {
    display: none;
}

#pag_flerex > p > span {
   display: inline-block;
   padding: 10px;
   background-color: lightblue;
   font-size: 12px;
}

#pag_flerex > p > span .pag-img {
    display: none;
}

#pag_flerex > p > span strong {
    color: #000;
}

#pag_flerex > a {
    display: inline-block;
    color: #FFF;
    background-color: steelblue;
    padding: 3px 5px;
}

¡Listo!

gracias por responder Bret

no sé qué hago mal pero no funciona

he probado a quitar los codigos que le habia puesto antes con kay y nada
tambien he probado a quitar

Código:

<!-- Paginación orgásmica/tipo blog. Llámala como quieras -->
<div id="pag_flerex">
    <a href="{U_VIEW_OLDER_TOPIC}"> [b]<[/b] </a>
        <!-- BEGIN topicpagination -->
            <p>{PAGINATION}</p>
        <!-- END topicpagination -->
    <a href="{U_VIEW_NEWER_TOPIC}"> [b]>[/b] </a></div>

por si era un error aunque lo dudaba. pero tampoco resultó

p.d. me quedo con ese titulo, es la caña jajajaja

¿Tienes muy modificada la plantilla? Prueba si puedes si en una plantilla original el cambio funciona, para ver si es problema o no de la plantilla que tienes.

he probado en otro foro y con algun fallito pero funciona, asi que creo que es cosa de mi plantilla actual
le he quitado los htmls y los javascripts menos el de las pestañitas y nada, asi que no se que sea la verdad, porque creo que codigos css de paginaciones no tengo
voy a pasarte mi nick y contraseña por mp a ver si asi puedes ver algo, aunque tampoco quiero molestar tanto, si ves que es mucha cosa lo dejamos asi

Vale, he mirado lo que ocurre y te he puesto una plantilla sin ediciones a excepción de la paginación y funciona. Lo que pasa es que tienes un CSS que interfiere y que debes quitar:

Código:

p.right.rightside + p, p:nth-of-type(1) {
    display: none !important;
}

tienes razon, al quitar ese codigo sale tu paginacion
lo que pasa es que agrega una nueva paginacion a la pagina, yo lo que queria es sustituir la que hay por defecto en foroactivo por esa

Es que claro, el código está en una plantilla predeterminada. Debes eliminar la parte correspondiente a la paginación que viene con Foroactivo. Busca variables como {PAGINATION} en la plantilla para eliminarlas.

Graxcias Bret
tema resuelto