Wiki_Paideia_Titles_Colores.png

Uno de los puntos importantes del aspecto un sitio web es la elección de los colores, así como la combinación de los mismos. Para personalizar un wiki mediante el uso de diferentes colores, debemos tener presente tanto el tema o contenido que va a tratar como los principales destinatarios del wiki. No es igual diseñar un wiki para adultos que dirigido a niños. Del mismo modo, puede condicionar el tema o contenidos del wiki a la hora de elegir una paleta de colores. Hay algunas páginas web que nos pueden ayudar a realizar esta elección y personalización de los colores. Generalmente nos ofrecen distintas paletas que podemos elegir. Posteriormente, obtendremos el código de cada uno de los colores. Los valores que más nos pueden servir para la edición de imágenes y edición web son los valores RGB y los valores hexadecimales.

ADOBE COLOR CC (Antes Adobe Kuler)

Procedimiento:
  • Una vez en la página de Adobe Color CC (Clic en el enlace anterior) buscar una paleta de colores que nos guste y seleccionarla pasando el cursor por encima de ella.
  • Aparecerán cinco posibilidades encima de los colores de la paleta. Hacer clic en "Edit".

Adobe Kuler_2014 01 def.jpg

  • Aparecerá la paleta elegida con los valores cromáticos en código de distinto tipo. Nos servirán mejor para el wiki los valores hexadecimales.

Adobe Kuler_2014 02 def.jpg

  • Nos conviene guardar en una carpeta de nuestro ordenador ('Datos', por ejemplo) una captura de pantalla en jpeg o pegada en un documento de word. Nos servirá para futuros ajustes con esta paleta de colores.


Personalización de los colores del wiki:

- Cabecera y Pie del wiki (Header y Footer)

- Fondo y Barra Lateral (Background y Sidebar)

- Encabezamientos de las páginas (Headings)


  • Una vez elegida la paleta y guardados los valores (por ejemplo capturando la pantalla), se debe decidir que color de la paleta aplicamos a cada parte del wiki. Por ejemplo, la cabecera (Header) y el pie del wiki (Footer) pueden ir del mismo color, que podría ser el más oscuro de la paleta de colores. La barra lateral (Sidebar) puede ir en el siguiente color oscuro. El fondo (Background) debería ir en el más claro de todos. El resto de colores se pueden destinar a los encabezamientos de las páginas (Headings).

  • Para personalizar los encabezamientos de las páginas (Headings) se puede copiar el siguiente código y pegarlo en el recuadro "Adiciones a la hoja de estilo personalizada" (Administrar wiki - Aspecto Visual - Hoja de estilo del wiki - Editar la hoja de estilo de tu wiki - Adiciones a la hoja de estilo personalizada). Se ofrecen los valores sacados de la paleta de colores de la parte superior de esta página. Hay que cambiar los valores RGB por los propios, según el gusto de cada uno/a.


Texto plano para pegar. Modelo de encabezamientos con código hexadecimal.

.wiki h1 { padding: 3px 0 0 0; font-size: 145%; color: #6ab7cc; background-color: #0d63a9; text-align: center; }
.wiki h2 { padding: 3px 0 0 0; font-size: 125%; color: #0d63a9; background-color: #6ab7cc; text-align: center; }
.wiki h3 { padding: 3px 0 0 0; font-size: 125%; color: #edb434; background-color: #ff6e12; text-align: center; }
.wiki h4 { padding: 3px 0 0 0; font-size: 125%; color: #0d63a9; background-color: #edb434; text-align: center; }
.wiki h5 { padding: 3px 0 0 0; font-size: 125%; color: #ff6e12; background-color: #b6cabc; text-align: center; }


Texto plano para pegar. Modelo de encabezamientos con código RGB.

.wiki h1 { padding: 3px 0 0 0; font-size: 150%; color: rgb(194, 207, 205); background-color: rgb(48, 64, 61); text-align: center; }
.wiki h2 { padding: 3px 0 0 0; font-size: 135%; color: rgb(48, 64, 61); background-color: rgb(114, 135, 131); text-align: center; }
.wiki h3 { padding: 3px 0 0 0; font-size: 135%; color: rgb(48, 64, 61); background-color: rgb(194, 207, 205); text-align: center; }
.wiki h4 { padding: 3px 0 0 0; font-size: 135%; color: rgb(194, 207, 205); background-color: rgb(149, 33, 58); text-align: center; }
.wiki h5 { padding: 3px 0 0 0; font-size: 135%; color: rgb(194, 207, 205); background-color: rgb(166, 85, 91); text-align: center; }
.wiki h6 { padding: 3px 0 0 0; font-size: 115%; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); text-align: center; }


Se pueden elegir paletas así como valores RGB y hexadecimales, de manera similar, en las siguientes páginas: