Además de servir para poner un fondo personalizado a las distintas partes del blog, el background también sirve para poner una imagen que haga las veces de línea inferior y/o lateral.
La única pega en este caso es que solo se puede colocar un background en cada zona.
Por poner un ejemplo claro:
Si has decidido enmarcar el título de los gadgets y ponerle de fondo una imagen, no vas a poder poner otra como línea inferior.
En este caso tendrás que decidir entre ambas. Podrás ponerle un color a la zona que ocupe dicho título, pero tendrá que ser solo un color.
Puedes ver un ejemplo de fondos de los títulos en este blog que acabo de crear para dejar muestras de algunas de éstas cosas.
En él podrás ver 5 gadgets con los títulos enmarcados y/o con distintos fondos.
Para realizar algo así hay dos caminos, dependiendo de que quieras aplicar los cambios a todos los gadgets por igual o a cada uno, o solo a algunos, en particular.
En el primer caso tendrás que añadir este código:
.sidebar h2 {
añadir aqui la linea de border o de background,
}
Por supuesto donde no está en negrita tendrás que poner lo que vayas a querer que se vea y la/las órdenes se aplicarán a todos los gadgets.
Si quieres que el título de cada gadget tenga un fondo o un borde (ya sea de color o de imagen) distinto, has de añadir un código para cada gadget.
En este caso has de averiguar la id del gadget y añadir un código semejante a éste:
(el ejemplo sería el del último gadget, la lista de blogs, que tiene de todo)
#BlogList1 h2 {
background: #acd4fb url(la dirección de la imagen) no-repeat center bottom;
border: 1px solid #000000;
height: 20px;
}
Explicación del código.
#BlogList1 es la id del gadget, h2 indica que las órdenes se aplicarán al título del gadget, { es la llave de apertura de las órdenes.
Con background: le decimos que aplicará un fondo, #acd4fb es el color que tendrá este fondo, (en lugar del código del color puedes poner una variable si la has creado específicamente para ello), url(direccion) para que sepa que ahí va a ir una imagen, no-repeat para que no la repita a lo largo y ancho de la zona del título, center para que la imagen se vea centrada, de esta forma, si es más pequeña que el ancho del gadget y se trata de una línea que tenga la parte más importante o más bonita en el centro, no se verá desplazada, bottom para que la muestre abajo.
Con border: le decimos que la zona del título estará enmarcada, 1px es el grosor de la línea que lo enmarca, solid es el estilo de dicha línea y #000000 es el código hexagesimal del color negro. Este dato podemos cambiarlo por la variable del resto de los bordes, con lo que en lugar de este código hexagesimal pondríamos $bordercolor o lo que corresponda.
Con height: le damos una altura concreta a la zona del título.
Este dato no es necesario si solo vas a enmarcarlo o a ponerle un fondo, pero no una imagen que subraye el título.
Pero si vas a ponerle una imagen/línea como background has de darle altura suficiente para que la imagen no salga detrás de las letras, sinó debajo. La cantidad de px (pixels) dependerá de la altura de tu imagen a la cual le tendrás que sumar los suficientes para que el título salga encima.
Con } cerramos las órdenes que le hemos dado, así el navegador sabrá que todas ellas corresponden a esta zona concreta.
IMPORTANTE
No olvidar el punto y coma al final de cada línea ni el espacio que separa cada orden distinta en una misma línea.
0 comentarios:
Más utilidades del background (los títulos de los gadgets)