Guía para colorear un foro prosilverTema Solucionado

[mmfilesi]

// Nota para los moderadores: no sé si esto va aquí o en estilos gráficos. De no ser así, perdonad y movedlo, gracias //

Más o menos, creo que todos los que empezamos con PHP seguimos los siguientes pasos: lo instalamos gracias a la guía de Mitch, instalamos el maldito automod, que desaconsejo por completo, subimos cuatrocientos mods, revienta todo por todos los lados, descubrimos que conviene leer las cosas antes de instalarlas, borramos todo, volvemos a instalar el foro y nos entra una necesidad irrefrenable de cambiar los colorinches a nuestro gusto. Esta guía es para eso, para colorear nuestro foro. Doy por sentado que ya estás en la fase que indicaba y en la que me encuentro, es decir, la fase "he husmeado un poquillo" y tengo unas nociones básicas.

Otra cosa, esto es válido sólo para prosilver según la versión que viene por defecto en el pack de instalación. No sé si sería válido con subsilver.

Introducción colores en html+css

Antes de empezar, conviene recordar que en html los colores conviene especificarlos en una cadena de texto compuesta por 3 pares de números hexadecimales; es decir, algo así. 336699. Donde el primer par especifica el rojo, el segundo el verde y el tercero el azul (es un sistema, que se dice, en RedGreenBlue). Para no liarte, lo mejor es que emplees alguna utilidad de las que hay legión por Internet, como esta:

http://html-color-codes.info/codigos-de ... adecimales

Además, debemos saber que los colores se especifican precedidos por una almohadilla: #333333

+ información en la wiki: http://es.wikipedia.org/wiki/Colores_HTML

Vale, ya podemos empezar a tunear colores...

1. Ediciones gráficas

Hay dos archivos gráficos que se deben cambiar con un programa de edición gráfica, como el photoshop o similar.

styles/prosilver/theme/images/bg_header.gif
styles/prosilver/theme/images/bg_list.gif

Estos dos archivos gráficos son los que, respectivamente, se muestran en la barra superior, donde va el titular del foro, y en los marcos de las categorías y foros.

guiacolor01.jpg

Además, quizás nos interese cambiar la imagen

styles/prosilver/theme/images/gradient.gif

que es la que va en el fondo del listado de temas o foros del foro.

IMPORTANTE. Para las tres imágenes mencionadas:

- Si las dejas lisas, apunta el valor hexadecimal del color que has escogido. Por ejemplo, 990000 en la imagen anterior.
- Si las dejas en degradado, que queda más bonito, apunta el valor del final del degradado, el que hay justo en la parte inferior.

Luego lo necesitaremos.

Cambias esos archivos y los sustituyes en el servidor.

2. Ediciones de código

Hay muchos valores que cambiar, pero, más o menos, con esto puedes cambiar los elementos de diseño básicos. No marco lo que hay que reemplazar (el replace). Lo que debes hacer es ir cambiando los valores RGB que quieras.

Cambiar estos archivos de styles/prosilver/theme

1. color del fondo del foro

Abrir open common.css

Buscar

Código: Seleccionar todo

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF; /* <- estilo, cambia el color de fondo del foro. */
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

2. Líneas de abajo y arriba de las cajas (los marcos de las listas de foros).

Sugerencia: Poner del mismo color que el tono dominante

Abrir open content.css

Buscar

Código: Seleccionar todo

li.row {
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #8f8f8f;  /* <- estilo, cambia el color por el tono dominante */
}

3. Borde de los mensajes privados

Abrir open cp.css

Buscar

Código: Seleccionar todo

/* PM panel adjustments */
.pm-panel-header {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px dashed #A4B3BF; /* estilo. Borde de los mensajes privados  */
}

+ Buscar

Código: Seleccionar todo

#cp-main .pm-message-nav {
	margin: 0;
	padding: 2px 10px 5px 10px;
	border-bottom: 1px dashed #A4B3BF; /* estilo. Borde de los mensajes privados  */
}

4. Color del fondo del titular
Nota: Poner del mismo color que el final del degradado de bg_header.gif

Abrir colours.css

Buscar

Código: Seleccionar todo

.headerbar {
	background-color: #12A3EB; /* <- estilo. Color del fondo del titular */
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

5. Color de la barra de navegación superior

Abrir colours.css

Buscar

Código: Seleccionar todo

.navbar {
	background-color: #cadceb; /* <- estilo.  */
}

6. Cambia el borde de la lista de los foros
Nota: Poner del mismo color que el final del degradado de bg_list.gif

Abrir colours.css

Buscar

Código: Seleccionar todo

.forabg {
	background-color: #0076b1;  <- estilo. Cambia el borde de la lista de los foros */
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

7. Color de fondo de la lista de subforos
Nota: Poner del mismo color que el final del degradado de bg_header.gif

Abrir colours.css

Buscar

Código: Seleccionar todo

.forumbg {
	background-color: #12A3EB; /* <- estilo. Cambia el color de fondo de la lista de subforos */
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}

8. Color de fondo del Panel de respuesta

Abrir colours.css

Buscar

Código: Seleccionar todo

.panel {
	background-color: #ECF1F3;  /* <- estilo. Cambia el color de fondo del panel de respuesta */
	color: #28313F;  /* <- estilo. Rótulos del panel de respuesta */
}

9. Color de fondo de las respuestas
Sugerencia: dejar bg1 algo más oscuro que los otros dos.

Abrir colours.css

Buscar

Código: Seleccionar todo

.bg1	{ background-color: #ECF3F7; } 
.bg2	{ background-color: #e1ebf2;  } 
.bg3	{ background-color: #cadceb; } 

10. Enlaces generales barra de arriba y abajo
Sugerencia: No modificar los visitados (visited) porque en este caso no tiene sentido diferenciar.

Abrir colours.css

Buscar

Código: Seleccionar todo

a:link	{ color: #105289; } <- estilo. normales */
a:visited	{ color: #105289; } <- estilo. visitados */
a:hover	{ color: #D31141; } <- estilo. al pasar */
a:active	{ color: #368AD2; }

<- estilo. al pulsar */

11. Color enlaces listado de foros.
Sugerencia: Aquí sí conviene diferenciar los visitados.

Abrir colours.css

Buscar

Código: Seleccionar todo

/* Links for forum/topic lists */
a.forumtitle {
	color: #105289;
}

/* a.forumtitle:visited { color: #105289; } */

a.forumtitle:hover {
	color: #BC2A4D;
}

a.forumtitle:active {
	color: #105289;
}

12. Color enlaces listado de subforos.
Sugerencia: Aquí sí conviene diferenciar los visitados.

Abrir colours.css

Buscar

Código: Seleccionar todo

a.topictitle {
	color: #105289;
}

/* a.topictitle:visited { color: #368AD2; } */

a.topictitle:hover {
	color: #BC2A4D;
}

a.topictitle:active {
	color: #105289;
}

13. Color del fondo de la lista de foros.
Importante: Poner igual que el final del degradado claro de la imagen gradient.

Abrir colours.css

Buscar

Código: Seleccionar todo

ul.forums {
	background-color: #eef5f9;
	background-image: url("{T_THEME_PATH}/images/gradient.gif");
}

14.Cambia los rótulos que describen el foro.

Abrir colours.css

Buscar

Código: Seleccionar todo

ul.topiclist li {
	color: #4C5D77;
}

15.Cambia las líneas de abajo y arriba de las cajas de respuesta.
Sugerencia: Poner la inferior del mismo color que el tono dominante

Abrir colours.css

Buscar

Código: Seleccionar todo

li.row {
	border-top-color:  #FFFFFF;
	border-bottom-color: #00608F;
}

16.Cambia el roll over sobre el listado de foros.
Sugerencia: Poner la inferior del mismo color que el tono dominante

Abrir colours.css

Buscar

Código: Seleccionar todo

li.row:hover {
	background-color: #F6F4D0;
}

........ Y ahora la ñapa final ........

Para no tener que rehacer todos los iconos, sobre todo esos que nunca cambiamos, como el botón imprimir, la forma más rápida de colorearlos es ir a esta página:

http://beta.colorizeit.com/index.php?style=prosilver

Desplazas la segunda barra del editor hasta que afina el color de los botones que necesitas:

botognapa.jpg

Le das a download y bajas el archivo.zip a tu ordenador.

Luego, te vas a las carpetas:

prosilver/theme/images
y
prosilver/imageset

y subes, en su lugar correspondiente, los que necesites. OJO: no te pises los bg_header, el gradient y el bg_list.

Espero que os sea de ayuda.