phpBB España Oficial

Publicado: **14 Oct 2014, 19:51**

Nombre Tutorial: Como cambiar la paginación del foro por imágenes
Autor: DaVidU
Url del Autor http://www.coloreatuforo.com

Basado en: PROSILVER
Descripción y uso: Cambia la paginación del foro por otra con CSS + imágenes

Screenshot:
Imagen

Tutorial:

Primero de todo subir estas 3 imágenes a la carpeta:
root/styles/tu estilo/theme/images/aqui las 3 imágenes

Botón derecho del mouse y guardar como, ya tienen el nombre puesto:

bg_pag.gif

bg_pag_hover.gif

bg_pag_strong.gif

Después abrimos el archivo:
root/styles/tu estilo/theme/colours.css

buscamos esto: (Código del prosilver original)

Código: Seleccionar todo

/* Pagination
---------------------------------------- */
 
.pagination span strong {
    color: #FFFFFF;
    background-color: #4692BF;
    border-color: #4692BF;
}
 
.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
    color: #5C758C;
    background-color: #ECEDEE;
    border-color: #B4BAC0;
}
 
.pagination span a:hover {
    border-color: #368AD2;
    background-color: #368AD2;
    color: #FFF;
}

y lo reemplazamos por este otro:

Código: Seleccionar todo

/* Pagination
---------------------------------------- */
 
.pagination span strong {
    color: #000;
    background-color: #dddddd;
    border-color: #555;
    background-image: url("{T_THEME_PATH}/images/bg_pag_strong.gif");
}
 
.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
    color: #165ba9;
    background-color: #FFF;
    border-color: #555;
    background-image: url("{T_THEME_PATH}/images/bg_pag.gif");
}
 
.pagination span a:hover {
    border-color: #555;
    background-color: #dedede;
    color: #165ba9;
    background-image: url("{T_THEME_PATH}/images/bg_pag_hover.gif");
}

ahora abrimos el archivo:
root/styles/tu estilo/theme/common.css

y buscamos esto:

Código: Seleccionar todo

.pagination span strong {
    padding: 0 2px;
    margin: 0 2px;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #bfbfbf;
    border: 1px solid #bfbfbf;
    font-size: 0.9em;
}
 
.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
    font-weight: normal;
    text-decoration: none;
    color: #747474;
    margin: 0 2px;
    padding: 0 2px;
    background-color: #eeeeee;
    border: 1px solid #bababa;
    font-size: 0.9em;
    line-height: 1.5em;
}
 
.pagination span a:hover {
    border-color: #d2d2d2;
    background-color: #d2d2d2;
    color: #FFF;
    text-decoration: none;
}

y lo reemplazamos por esto otro:

Código: Seleccionar todo

.pagination span strong {
    padding: 0 2px;
    margin: 0 2px;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #FFF;
    border: 1px solid #bfbfbf;
    font-size: 1.2em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
 
.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
    font-weight: normal;
    text-decoration: none;
    color: #747474;
    margin: 0 2px;
    padding: 0 2px;
    background-color: #FFF;
    border: 1px solid #bababa;
    font-size: 1.2em;
    line-height: 1.5em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
 
.pagination span a:hover {
    border-color: #d2d2d2;
    background-color: #FFF;
    color: #FFF;
    text-decoration: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #000;
}

Guardamos archivos, actualizamos la galería de imágenes de nuestro estilo, actualizamos el tema de nuestro estilo, limpiamos el cache del foro y refrescamos el navegador para ver los cambios

El CSS usado en este tutorial es de la versión 3.0 cosa que el Internet Explorer usa aún la 2.0 y por ejemplo el efecto de las sombras no se verá en Internet Explorer pero si en el resto de navegadores

phpBB España Oficial

Como cambiar la paginación del foro por imágenes

Como cambiar la paginación del foro por imágenes Tema Solucionado