Una vez instalado drupal lo primero en que pensamos es ¿como podemos personalizarlo a nuestro gusto?, lo normal es desde las zona «Información del sitio» ponerle titulo, slogan y misión a nuestro sitio, y desde la configuración del tema podemos subir un logo para sustituir el que lleva por defecto.
Pocos cambios más podemos hacer en el aspecto de nuestro tema elegido desde la administración, para hacer más retoques debemos hacerlo editando el archivo style.css que está dentro de la carpeta themes/garland(por ejemplo)/style.css, para ello hay que tener unos conocimientos básicos de css, en la red podrás encontrar muchos manuales.
Vamos a poner unos pequeños ejemplos modificando algunos aspectos del tema garland para ver lo fácil que resulta:
1. En éste primer ejemplo vamos a modificar el aspecto de la misión del sitio que es ese recuadro con texto que sale debajo de la cabecera del sitio y sirve para explicar un poco de que va nuestra web, éste texto se introduce desde la zona de «Información del sitio» en administración.
Bien, vamos en éste caso a modificar el archivo css para que el texto salga en negrita y le vamos a cambiar también el color de fondo del recuadro.
Con cualquier editor abrimos el style.css, yo suelo usar el dreamweaver o el PHP designer en su versión gratuita, buscamos el estilo donde pone #mission y le añadimos el atributo font-weight: bold como podeis ver a continuación:
#mission {
padding: 1em;
background-color: #EDF5FA;
border: 1px solid #e0e5fb;
margin-bottom: 2em;
font-weight: bold;
}Para cambiar el color de fondo que lleva por defecto simplemente le ponemos en HEX el que queramos modificando al línea
background-color: #EDF5FA;
2. En el segundo ejemplo vamos a modificar el tamaño del texto que aparece al pie de página, para ello buscamos ésta parte del código que es la que se encarga entre otras partes del pie de página:
#wrapper #container #footer {
float: none;
clear: both;
text-align: center;
margin: 4em 0 -3em;
color: #898989;
}Aquí lo que nos interesa es el #footer (pie), éste código lo dejamos tal cual ya que si modificamos aquí algo repercutira también en el wrapper y en el container, y como sólo nos interesa el footer añadimos las siguientes líneas:
#footer {
font-size:80%
}De ésta manera independizamos el pié de página para darle los atributos que nos interesen por separado, en éste caso modificamos el tamaño de la letra, lo ponemos con porcentaje para que se ajuste automáticamente a la resolución de pantalla, podéis ir variandolo y viendo como cambia en la web hasta dejarlo al gusto.
3. En el tercer ejemplo vamos a cambiar el tamaño del título de la web y el texto del slogan. Como en el caso anterior tenemos que separar parte del código por el tema de la repercusión, y vamos a añadir el siguiente:
#header h1 {
font-size: 130%;
}y también éste:
#header h1 span {
font-size: 180%;
color: #FFBF55;
}con el primero modificamos el tamaño del slogan y con el segundo modificamos el tamaño y el color del título de la web.
Pero para que funcione hay que eliminar el siguiente atributo para que nos deje modificar los anteriores:
font-size: 1.5em;
que va dentro del siguiente código:
#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
color: #fff;
font-weight: normal;
text-shadow: #1659ac 0px 1px 3px;
font-size: 1.5em;
}Actualización 20/05/09:
Llegados a éste punto quisiera comentar un módulo llamado CSS Injector que está disponible para la versión 6 de Drupal y que sirve precisamente para retocar el CSS de nuestro theme, pero sin la necesidad de tocar el que lleva el tema en cuestión, de ésta manera si actualizamos el tema porque haya una nueva versión no tendremos que volver a retocarlo ya que con éste módulo tenemos el código de retoque independizado del tema, realmente es muy útil y aconsejable, el único inconveniente es que solo está disponible para la versión 6 de drupal (en el momento de escribir ésto).
Como veis, sabiendo un poco de css podemos modificar un montón de aspectos, si os parece complicado os aconsejo algún manual de css que hay cientos en la red.
Para cualquier duda podéis hacer los comentarios que queráis.
Temática: Diseño gráfico
Nivel: Avanzado
