SPIP: Cambiar los colores y la cabecera del sitio

Lo último, por ahora, será personalizar un poco la apariencia que presenta el esqueleto Ahuntsic asignado al sitio. Primero modificaré la imagen de la cabecera del sitio y luego, para mantener la coherencia con la nueva cabecera, modificaré los colores definidos en las hojas de estilo del esqueleto.

Hasta este momento, la cabecera del sitio se ve así:

En realidad, esta cabecera está formada con dos archivos de imagen que se encuentran en tusitio/plugins/auto/ahuntsic/styles/img:

globe.jpg

y autre-monde.jpg

En Inkscape hice el siguiente diseño para la nueva cabecera:

Para realizarlo recolecté por la web varios logos relacionados con los temas mas habituales por aquí y, para mi "autorretrato", me basé en el dibujo que había generado para el saludo navideño del año pasado (que estaba hecho utilizando el servicio de Pocoyizate) aunque le hice algunas modificaciones y agregados (como el del mate).

Para utilizar esta imagen como la nueva cabecera del sitio, la tuve que partir y guardar con el mismo nombre que tenían las imágenes que forman la cabecera original. Hay que tener en cuenta que a la imagen del lado izquierdo hay que agrandarla hasta los 1200 píxeles de ancho. Esto es:

globe.jpg

y autre-monde.jpg

Luego, subí las nuevas imágenes al directorio tusitio/plugins/auto/ahuntsic/styles/img, sustituyendo a las originales.

En este momento la página principal del sitio se estaría viendo así:

Evidentemente no basta con cambiar la imagen de la cabecera, hay que hacer algunas modificaciones más:

• Cambiar la ubicación, el tamaño y el color del nombre del sitio en la cabecera.

  Si consultamos el código fuente de la página, veremos una línea que dice:
  <a href="http://..." title="Portada del sitio : JavierSam" class="nom-site"><span>JavierSam</span></a>
  Lo que nos indica que la clase que controla la apariencia del texto de la cabecera es nom-site. Para modificarlo, hay que encontrar la hoja de estilo (CSS) que la define.

  Buscando en el código fuente se encuentra que la hoja de estilos es plugins/auto/ahuntsic/styles/base.css. Al abrir ese archivo, a partir de la línea 110, se ve:
  #entete a.nom-site,
#entete a.nom-site:link,
#entete a.nom-site:visited
{
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: Verdana, 'Bitstream Vera Sans', Tahoma, 'Lucida Grande', 'Lucida Sans', Arial, 'Helvetica Neue', Helvetica, Lucida, Geneva, sans-serif;
text-decoration: none;
color: #EDDF5C;
font-size: 2em;
font-weight: bold;
padding: 0;
background-color: transparent;
/* background-image - voir/see : 'alter.css' */
}

#entete a.nom-site:hover
{
color: #ddd;
font-style: normal;
text-shadow: white 0px 0px 8px;
/* un peu de CSS3 pour les navigateurs qui le peuvent... */
}

#entete .nom-site span /* position du nom du site - position of the site's name */
{
display: block;
position: absolute;
bottom: 48px;
right: 200px;
}

  Modificando las líneas que a continuación se muestran en rojo:
  #entete a.nom-site,
#entete a.nom-site:link,
#entete a.nom-site:visited
{
display: block;
position: relative;
top: 0;
left: 0;
width: 113%;
height: 100%;
font-family: Georgia, 'Times New Roman', Times, serif;
text-decoration: none;
color: #006680;
font-size: 3em;
font-weight: bold;
padding: 0;
background-color: transparent;
font-style:italic;
text-shadow: white 0px 0px 8px;
/* background-image - voir/see : 'alter.css' */
}

#entete a.nom-site:hover
{
color: #784421;
font-style: italic;
text-shadow: white 0px 0px 8px;
/* un peu de CSS3 pour les navigateurs qui le peuvent... */
}

#entete .nom-site span /* position du nom du site - position of the site's name */
{
display: block;
position: absolute;
bottom: 36px;
right: 200px;
}

  ...y con una pequeña modificación más en el archivo plugins/auto/ahuntsic/styles/alter.css que consiste en modificar la línea 18 de background-position: right top; a background-position: 85% top;...el texto de la cabecera ahora se ve así:

  

Cambiar la paleta de colores para que se ajuste a los colores de la nueva cabecera

Básicamente podríamos probar cambiar en las hojas de estilo todos los colores, según la siguiente tabla:

color original	valor hexadecimal	nuevo color	valor hexadecimal
	#313c72		#036781
	maroon		#502d17

Además modifiqué el color de la imagen que se encuentra en el camino /plugins/auto/ahuntsic/styles/img/body_bg.png y en la hoja de estilos base.css, cambié el color de fondo del selector body, de #ddd a #2e2e2e, de manera de cambiar el color de fondo del sitio.

También en la hoja de estilos base.css, además de agregar la declaración
#bas a { color: white; }
incluí dentro de la definición del selector #bas, la regla: color: white; de manera que el texto que se muestra al pie de página quedara legible luego de oscurecer el fondo de la página.

Con todos estos cambios, ahora la página principal ahora se ve así: