miércoles, 3 de junio de 2009

ENMARCAR

En esta ocasión veremos como modificar nuestra plantilla para crear marcos en las distintas partes del blog, tan solo tendremos que añadir unas línea de código. Haremos uso de la propiedad border que pondrá un borde a aquella parte que nosotros queramos y background que dará color a nuestra área seleccionada. En primer lugar vamos a diferenciar las distintas partes de la plantilla en la que podemos poner los marcos. Deberéis fijaros en la parte punteada de color azul, que representa el marco.

1.Parte central:
Se corresponde con la parte central del blog, abarca todos los post.


2.Sidebar:

Se corresponde generalmente con las columnas dispuestas a los laterales del blog.


3.Footer:
Parte inferior de los post, donde suelen aparecer las etiquetas correspondientes a la entrada, fecha, firma...


Una vez tenemos claro cuales son las partes en las que podemos insertar los marcos, deberemos ir a Diseño->Edición HTML, aquí es donde encontraremos el código de nuestra plantilla. Dependiendo de donde queramos crear el marco buscaremos la parte de código donde insertar la siguiente linea de código:

border: dotted #3300CC; 2px;
-------------------------------------Propiedades---------------------------------------------

dotted:
Tipo de marco, podéis probar los distintos tipos de linea modificando este valor. Tipos de marcos:dotted, solid, dashed, double, ridge, inset, groove, outset.

#3300CC:
Se corresponde con el color del marco, podréis modificar el color modificando este valor.

2px:
Se corresponde con el grosor de la línea, podréis aumentar o disminuir el grosor modificando este valor.

-------------------------------------------------------------------------------------------------

Si además queréis rellenar el fondo de color, como en el ejemplo número 2, deberéis añadir también la siguiente línea:
background-color: #3300CC;
-------------------------------------Propiedades---------------------------------------------

#3300CC:
Representa el color del fondo.

-------------------------------------------------------------------------------------------------

Esta o estas lineas las insertaremos debajo de las siguientes partes dependiendo de donde queramos crear el marco.

Para el primer caso:#main-wrapper {
Para el segundo caso:#sidebar-wrapper {
Para el tercer caso:.post-footer {
Para ponerle marco a todo el blog:#outer-wrapper {

2 Comentarios:

SiMoN RoV dijo...

Men mira publica esta pag esta muy buena es para que te puedan contactar desde tu blog http://kontactr.com/ mira el ejemplo esta aqui http://simonrov.blogspot.com/

caxitos dijo...

SiMon Rov Gracias, hice una entrada comentando el sistema, lo cierto es que yo quería hacer uno más personalizado ya que con código no es muy complicado, cuando lo haga lo pondré para que lo podáis hacer todos. Nuevamente muchas gracias ;)

Publicar un comentario en la entrada

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.