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

[DaVidU]

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:


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