Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

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

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
Cerrado
Avatar de Usuario
DaVidU
Ex Staff
Mensajes: 776
Registrado: 08 Oct 2009, 12:24
Edad: 47

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

#1

Mensaje por 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:
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 :ok:

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

Datos de mi foro en caso de soporte:
URL: http://coloreatuforo.com
Versión phpBB: phpBB 3.0.8
MODs Instalados: + de 100 MODs
Plantilla(s) usada(s): Prosilver modificada
Servidor: Linux
Actualización desde otra versión: 3.0.1
Conversión desde otro sistema de foros: No

Cerrado

Volver a “Soporte para Estilos phpBB 3.0.x”