Cargando...
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte Foroactivo

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

[PHPBB3][Pedido] Paginacion tipo blog o similar

Creado por ,

Mensaje [Página 1 de 1.]

Publicado el Lun 17 Nov - 0:49

avatar
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 0 usuarios le gusta esto

Publicado el Lun 17 Nov - 20:25

avatar
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 Sonrisa

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Publicado el Mar 18 Nov - 15:50

avatar
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:

Código:
p.pagination{
 background: #980000 !important;
 margin-left: -500px !important;
 position: relative !important;

}

p.pagination span a{
 background: #000000 !important;
 }


p.pagination span a:hover{
 background: #000000 !important;
  }

p.pagination span strong{
 background: #000000 !important;
 }

       p.pagination script+a {
      color: transparent;
      position: relative;
       }

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

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 Triste
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

A 0 usuarios le gusta esto

Publicado el Mar 18 Nov - 16:16

avatar
¿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 >___<

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Publicado el Mar 18 Nov - 16:23

avatar
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


A 0 usuarios le gusta esto

Publicado el Miér 19 Nov - 8:43

avatar
Prueba quitando el margin-left y poniendo el selector de pagination así:
Código:
p.pagination{
background: #980000 !important;
position: relative !important;
left:-500px;
}

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Publicado el Miér 19 Nov - 16:29

avatar
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?

A 0 usuarios le gusta esto

Publicado el Vie 21 Nov - 17:43

avatar
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 Sonrisa

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 ^^

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Publicado el Vie 21 Nov - 19:30

avatar
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:

A 0 usuarios le gusta esto

Publicado el Sáb 22 Nov - 13:34

avatar
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í

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Publicado el Sáb 22 Nov - 17:42

avatar
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

A 0 usuarios le gusta esto

Publicado el Mar 25 Nov - 22:17

avatar
u.u

A 0 usuarios le gusta esto

Publicado el Mar 25 Nov - 22:43

avatar
Administrador
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!

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Mar 25 Nov - 23:14

avatar
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 Molo

A 0 usuarios le gusta esto

Publicado el Miér 26 Nov - 15:22

avatar
Administrador
¿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.

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Miér 26 Nov - 16:49

avatar
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 Sonrisa

A 0 usuarios le gusta esto

Publicado el Miér 26 Nov - 22:37

avatar
Administrador
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;
}

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Vie 28 Nov - 20:52

avatar
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 Triste

A 0 usuarios le gusta esto

Publicado el Vie 28 Nov - 21:40

avatar
Administrador
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.

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Mar 2 Dic - 21:41

avatar
Graxcias Bret
tema resuelto Sonrisa

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB