A veces nos gustaría que las distintas partes del blog estuvieran enmarcadas a fin de separar más claramente cada una de las demás, pero la plantilla que hemos elegido no es así.
No hay problema. Al igual que sucede con los fondos de los que os hablaba ayer, también cualquier zona del blog, por pequeña sea, es susceptible de ser enmarcada.
Pero hay más, ya que además de lo que veais en él, si pinchais, también es posible enmarcar de forma independiente, la fecha, el título de las entradas, el footer de las mismas, (allí donde se ve al autor, los comentarios etiquetas, etc) y el título de los gadgets de la sidebar.
Es más, en este último caso incluso podemos hacer que algunos se muestren enmarcados y otros no.
Por ende, cualquier zona del blog que pueda ser enmarcada puede tener un fondo propio.
Para enmarcar algo has de poner, en el código de definiciones de estilo de la zona que quieres enmarcar, la línea border de esta forma:
border: grosor estilo color;
Analicemos cada dato.
El grosor se expresa en píxels (Xpx) cuanto mayor sea la cantidad que haya en lugar de esta X más gruesa será la línea.
Por poneros un ejemplo práctico, la linea que enmarca la cabecera de este blog tiene 10 píxels de grosor, mientras que la que enmarca el pie de las entradas tiene solo 1 píxel.
El estilo. Hay 8 estilos de líneas. En el blog que os dejo enlazado al principio podeis ver una imagen con una muestra de esos 8 estilos.
Siguiendo con el ejemplo de este blog en el que estás, el borde de la cabecera es de estilo double mientras que el que enmarca el post-footer es estilo dotted.
El color. Como os comentaba dedicad0 a los fondos, podeis indicar el color del marco tanto con el sistema hexagesimal como a través de una variable.
Y también puedes crear distintas variables si quieres que distintas zonas dispongan de marcos de colores ditintos.
aquí puedes ver que la cabecera tiene el marco de color azul, mientras que el resto es de color gris.
Otra cuestión es si el marco estará completo o solo quieres enmarcar algo a medias.
Fíjate que le decimos que ponga un borde, no un marco. Al no especificar donde va a estar, el borde rodea totalmente la zona definida.
Pero podemos hacer que sea solo una línea abajo, o arriba o en uno de los laterales o en una combinación cualquiera de ellos.
En este caso has de darle tantas órdenes como lados quieras enmarcar, escribiendo las líneas así:
border-top: grosor estilo color; para la línea de arriba.
border-left: grosor estilo color; para la línea de la izquierda.
border-bottom: grosor estilo color; para la de abajo.
border-right: grosor estilo color; para la de la derecha.
Ésto también te permitiría enmarcar totalmente una zona en cuatro colores estilos y grosores distintos.
Para terminar os dejo un par de ejemplos. Son los dos bordes que he mencionado antes.
El de la cabecera está escrito así: border: 10px doble $headerbordercolor;
Y el del post-footer así: border: 1px dotted $bgcolor;
0 comentarios:
Marcos y bordes