Estilo personalizado para sistema de paginación pagenavi

gbr · 19 Sep 2012

Buenos días.

Quiero añadir un estilo personalizado a mi sistema de paginación pagenavi pero no sé cómo se hace. Esta web ofrece varios estilos:

10 estilos de navegaciÃ³n gratuitos listos para usarse con WP-PageNavi

¿Cómo puedo extraer uno de ellos e instalarlo en mi blog?

Muchas gracias :=)

jonay · 19 Sep 2012

Desactiva el css del plugin desde el wp-admin, en las opciones del plugin está la opción.

Edita el style.css de tu theme y debajo del todo añade el código que te voy a decir.

Entras aquí http://infectedfx.net/wp-content/ejemplos/wp-pagenavi/pagenavi-css.css y si te fijas hay 3 #ejemplo1, #ejemplo2 y #ejemplo3, si te gusta el ejemplo1 en la página demo pues coge todo el codigo que empiece por #ejemplo1.

En este caso todo esto:

Insertar CODE, HTML o PHP:

/*EJEMPLO1*/
#ejemplo1 .wp-pagenavi {
	background-color:#333;
	overflow:hidden;
	color:#FFF;
	text-align:center;
	padding:0 0 5px 0;
}
#ejemplo1 .wp-pagenavi span.pages {
	display:none;
}
#ejemplo1 .wp-pagenavi a, #ejemplo1 .wp-pagenavi span {
	padding:3px 10px;
	margin:3px 3px 0 3px;
	display:inline-block;
	line-height:14px;
}
#ejemplo1 .wp-pagenavi a {
	border-width:1px;
	border-style:solid;
}
#ejemplo1 .wp-pagenavi a:link, #ejemplo1 .wp-pagenavi a:visited {
	color:#CCC;
	border-color:#222;
}
#ejemplo1 .wp-pagenavi a:hover {
	color:#fff;
	border-color:#666;
	background-color:#444;
}
#ejemplo1 .wp-pagenavi span.current {
	font-weight:bold;
	background-color:#FFF;
	color:#333;
	padding-top:7px;
	line-height:16px;
	margin-top:0;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
}

y lo pegas en el style.css de tu theme, al final del todo, pero... debes quitar del código ese todo los #ejemplo1 en este caso o si coges otro todo el #ejemplo2 o #ejemplo3.

Por ejemplo esto:

Insertar CODE, HTML o PHP:

#ejemplo1 .wp-pagenavi span.current {

quedaría así

Insertar CODE, HTML o PHP:

 .wp-pagenavi span.current {

Eso lo debes hacer en cualquier sitio que aparezca ese #ejemplo1 en el código nuevo que haz copiado, espero que lo entiendas. :encouragement:

gbr · 19 Sep 2012

jonay

Ostrás tío. Pedazo de respuesta.

Muchísimas gracias por tu ayuda, de verdad 🙂

Estilo personalizado para sistema de paginación pagenavi

gbr

jonay

gbr

Temas similares