Personalizar el CSS de Pagenavi

Escrito por el Sunday 10 de August de 2008 y archivado como Blogs & Webs. Puedes seguir los comentarios por medio de RSS 2.0. Participa dejando un comentario y no olvides hacerlo siempre con respeto ya que aparecen publicados automáticamente. Lecturas: 4092

Pagenavi es un popular plugin para WordPress programado por Lester Chan que sirve para realizar una paginación más vistosa y funcional en los blogs.

A pesar de que tiene sus limitaciones, su instalación y utilización son cosas muy fáciles de hacer y le dan buen aspecto a los websites.

1. Descargar la última versión del plugin.

2. Descomprimir el archivo en una carpeta local.

3. Subir el archivo a la carpeta de plugins de WordPress. /wp-content/plugins/

4. Activar el plugin en el Dashboard.

5. Poner <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> en la página en que deseen el navegador de páginas.

Ahora solo falta personalizar o configurar el estilo. El plugin trae su propio archivo de estilo pagenavi-css.css

Yo recomiendo copiar el CSS del archivo y ponerlo en el CSS general de la plantilla, luego borrar el archivo pagenavi-css.css

Es algo así:

/* Paginado */
div.paginado { margin-bottom:1em } //margen del paginador
div.paginado p a { //párrafos y links
font-family : Verdana, Serif; //tipo de letra
font-size : 60%; //tamaño de letra
}
div.paginado a {
padding:2px 4px 2px 4px;
//dimensiones de las cajitas
margin-left:4px; //espaciado entre las cajas
border:1px solid #0000ff; //tamaño del borde y color
text-decoration:none; //elimina todo estilo de otras clases
color:#0000ff //color de los numeritos
}
div.paginado a:hover {
//cursor sobre la caja
border:1px solid #0000FF; //borde y color
color:#FFF!important; //color del texto
background:#0000FF //color de fondo
}
div.paginado a:active {
//cuando está activa la página
border:1px solid #FF0000; //tamaño y color del borde
color:#FFF!important; //color del texto
background:#FF0000; //color del fondo
}
div.paginado a.actual {
//al hacer click en cursor sobre la cajita
border:1px solid #FF3333; //tamaño y color del borde
color: #FFFFFF ; //color del texto
background:#FF3300 //color del fondo
}
div.paginado a.actual:hover { color:#FFFF00!important }
//color del texto cuando se posa el cursor en la cajita de la página actual

Si no tienen muchos conocimientos de CSS como yo, pueden ir intentándolo a prueba y error.

Pueden ponerle imágenes de fondo y otras cosas.

Suerte!

Blog Widget by LinkWithin

2 Respuestas a “Personalizar el CSS de Pagenavi”

  1. José says:

    Hola, Muchas Gracias por la descripción de cada cosa, Necesito Saber como Puedo hacer que tengan un borde redondeado, creo que hace que tenga mas estilo.

    Gracias de antemano.

  2. Josue Ruiz says:

    Dios mio Por finnnnnnnnnnnnnnnnnnnnnnnnnn
    todos los demas pencos lo que hacen es compiar los post de ostros esto es lo que buscaba, como puercas cambiar cada cosas y con las descripciones ya se me hace facil, gracias loco, ta bueno el blog y no como ese montonde de blogs mierdas que hacen que uno se joda buscando lo que uno quiere.
    segui asi loco, y deverias poner un boton de para donaciones de paypal.

Deja un Comentario