24 febrero 2010

Colocar bordes a la estructura del blog

 
Primero, antes de comenzar a decirte como colocarle los bordes a la estructura del blog, debes conocer como es la estructura del CSS de un blog... Mira la siguiente imagen.

#Outer-wrapper: Encierra todo el contenido del blog
#header-wrapper: Es la cabecera del blog
h1.title: Es el titulo de nuestro blog
p.description: es la descripcion del blog
#main wrapper: Encierra todo el contenido principal del blog, ejemplo; las entradas, links de feeds, etc.
.post: Encierra todo el contenido de las entradas
.post-title: Es el titulo de nuestras entradas
.post-body: Es el contenido de nuestras entradas.
.feed-links: Son los enlaces hacia el feed en nuestros blog (Suscribirse a: Entradas atom, etc)
#blog-pager: Es todo lo que se muestra al entrar a la pagina individual de las entradas (Comentarios)
#sidebar-wrapper: Encierra todo el contenido del sidebar o barra lateral.
#widget: Encierra el contenido de cada widget en nuestro blog.
.widget h2: Es el titulo del widget
.widget-content: Es el contenido del widget
#footer-wrapper: Encierra todo lo colocado en el pie de pagina.
.footer: Es todo lo que aparece en el pie de pagina
(imagenes, creditos, links hacia los feed, etc)

Ahora, prosegimos, si ves muy bien la imagen, todos las palabras escritas con color naranja tienen un borde que las encierra, tambien hay algunos que escritos con color negros, igualmente las encierra, y a esas son a las que se les puede añadir el borde, ya yo antes probe con el titulo del widget y el contenido y si me sirvio pero la que me hizo crear este post fue Paulette, ella me comento lo siguiente:


Hola.quetal encantanda soy paulette , Excelente este post, sos mas que claro, didàctico y saliò de primera intenciòn Gracias
Me pregunto si tendràs algo emitido que explique como crear los bordes que deseamos en las sidebars o en el #main-wrapper {
Por Ejemplo no he encontrado la forma de crear los bordes en EL TITULO ESPECIFICO DEL POST..sì en la fecha.Como asì tampoco crear dobles bordes si es posible si?
Pero por lo que veo se maneja en POST y post h3 { para darte un ejemplo de uno solo de los bordes deseados)
Sè que es cuestiòn de probar pero no doy en el punto vale?porque no se que parte de todos los sub rubros de Post maneja que?
Espero haber sido clara!!!
Gracias..me voy ahora a crear post en dos partes!!..encantada nuevamente ya me suscribo
Adeu!!!!:)

Probe con con ponerle los bordes al titulo pero me fue imposible, no se si sera el blog, de todos modos paulette este post es dedicado a ti y a todos aquellos que tengan la misma duda...
Solo debes colocar el siguiente codigo en una linea nueva debajo de cada codigo CSS

border: 1px solid black;
De modo que quede de esta forma

Para entender el codigo.

Border: Este se refiere al borde que queremos colocar, si quisieramos solo colocar un borde derecho deberias colocar Border-right:, si fuera izquierdo (left), abajo (bottom) y arriba (top).
1px: Hace referencia al grosor de la linea, mientras mas grande sea el numero, la linea sera mas gruesa.
Solid: Hace referencia a el tipo de linea que aparecera, en este caso seria una linea solida, es decir recta, pero si quieres colocarle una linea punteada debes sustituir solid por dotted.
Black: Hace referencia al color de la linea, black; negro en ingles, puedes colocarle cualquier color con su nombre en ingles para que lo reconozca, de igual forma puedes visitar esta pagina de codigo de colores, puedes sustituir black por un codigo de color, ejemplo; el codigo de color de negro es#00000.

Siempre acuerdate de ver la vista previa, luego si esta todo bien, podras guardar los cambios, espero haberlos ayudado.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo