#outer-wrapper es lo que envuelve a todo nuestro blog
#main-wrapper es donde escribimos nuestros artículos o entradas
#sidebar-wrapper es la columna en donde insertamos los gadgets.
#header-wrapper es la cabecera de nuestro blog
#footer-wrapper es el pie de página de nuestro blog
Repasados los conceptos, para poner bordes en el blog debemos hacer lo siguiente:
1) Vamos a Diseño
2) Edición HTML
3) Buscamos la parte a la que le queremos añadir bordes (outer-wrapper, main-wrapper ...). Recuerda que para agilizar la búsqueda podemos teclear las teclas Ctrl + F.
4) Situados en la parte que queramos modificar por ejemplo main-wrapper (donde escribirmos las entradas) veremos que nos encontramos con algo así:
Pues deberemos añadirle otra línea con esto: border: 1px solid black; quedando así:
Si queremos modificar los valores de la línea debemos saber que:
border hace referenica al brode que queremos poner. Si quisiéramos poner sólo una línea a la derecha (right) deberíamos poner border-right, al igual que haríamos si quisiéramos a la izquierda (left), bottom (abajo) y arriba (top).
1px hace referencia al grosor de la línea. Cuanto más valor le demos, más gorda será la línea.
solid hace referencia al tipo de línea. En este caso será una línea sólida. Podemos cambiarla por dotted y será con puntos en lugar de una línea recta.
black hace refencia al color de la línea, podemos cambiarla por otro color como grey (gris) o el que nos guste más. También podemos cambiarlo por un color en código como por ejemplo #152435.
Recuerda que debe acabar siempre con ;
5) Damos a vista previa y si nos gusta guardamos la plantilla.
Hola!, quisiera saber cómo puedo hacer para agregar un borde izquierdo en el sidebar, sin que quede pegado al texto.
ResponderEliminarDesde ya muchas gracias, y como es vox-populi, excelente tutorial!!!!
Ariel
Hola Ariel. Mira estas dos entradas, ahi tienes las soluciones:
ResponderEliminar1) http://www.quierocrearunblog.com/2009/08/anadir-una-linea-de-separacion-entre.html
2) http://www.quierocrearunblog.com/2009/08/todo-sobre-los-bordes-y-lineas-en-tu.html
Recibe un fuerte saludo.
hola! muy bueno tu blog! me a ayudado en mucho!te queria preguntar.. como puedo hacer para tener bordes en cada elemento de la sidebar? porque puse todo lo que me decias y aparecio el borde y todo pero de toodaa la sidebar..
ResponderEliminarqueria saber si se puede y que es lo que tengo q hacer...
desde ya,muchas gracias!
Hola Tio Alegria. A ver que me aclare. Tu quieres que cada elemento de la sidebar sea como un bloque con todos sus bordes. Es decir, tal y como esta en este blog en la sidebar derecha. ¿Es esto?
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola tienes una página muy interesante ahora entiendo la estructura de un blog
ResponderEliminarTengo un blog (http://comoarreglomipc.blogspot.com) al que quiero incluir una sección fija dentro de la plantilla en la parte entradas del blog
¿Me podrías ayudar?
Gracias
Hola efveto. Gracias por tus palabras y por tu visita. ¿Lo que me comentas serían hacer un menú? Emplea el buscador de arriba a la derecha buscando menú. Te aparecerán varios muy interesantes para tu fenomenal blog.
ResponderEliminarUn saludo.
Hola! genial el tutorial!! añado un borde a mi sidebar pero la línea queda PEGADA al texto. Cómo puedo separarlo para que quede un espacio entre la línea y lo que hay dentro?
ResponderEliminar(creo que te lo preguntó alguien esto mismo, pero en tus dos enlaces no encuentro la solución, al añadir el comando border-left: 1px solid #000000; se vuelve a desaparecer toda la barra que he añadido usando border: 1px solid black;
Gracias!
Hola Beatriz. Gracias por tus palabras y gracias por comentar. Prueba a añadir el siguiente código a continuación de border: 1px...
ResponderEliminarpadding-left: 10px;
margin:0 0 1.0em;
}
Coméntame los resultados.
holaa! muy buena tu pagina!!
ResponderEliminarquisiera saber como hago para que estos bordes de las entradas (main-wrapper) no vayan de arriba hasta abajo sino de la manera como está en tu sidebar derecha... muchas gracias espero tu respuesta
Hola Niko Kool. Me apunto tu pregunta y cuando pueda publicaré una entrada sobre padding y margin, que es lo que se necesita para lo que me preguntas.
ResponderEliminarUn saludo y gracias por tu visita y comentario.
a mi si que me gustaria saber como hicistes para que cada elemento de la sidebar derecha sea como un bloque
ResponderEliminarHola David Rubio. Gracias por tu visita y gracias por comentar. Es muy largo explicarlo por un comentario. En cuanto pueda crearé una entrada sobre ello. Pero te anticipo que se hace con padding y margin (modificando la plantilla).
ResponderEliminarSaludos.
suena complicado pero viendo el resultado creo q merece la pena
ResponderEliminarsaludos
Hola David. En cuanto pueda lo haré. No puedo decirte cuándo, ya que tengo muchas cosas pendientes en este blog y apenas tengo tiempo para ello. Espero que lo entiendas. Un saludo, gracias por tu visita y por tu comentario :)
ResponderEliminarhola. no encuentro como colocar una colunma a la izquierda de mi blog? ayuda...
ResponderEliminarholaa, mira puse un borde pero solamente se ve en la parte de arriba y de abajo pero se corta en una parte la linea, como hago para que quede toda seguida ?
ResponderEliminarhttp://www.already-bad.blogspot.com
asi me kedo el codigoo:
#sidebar-wrapper {
width: 400px;
float: $endSide;
border-left:5px dotted white;
que hice mal ? desde ya muchas gracias.
@RD-Juegos. Por favor, acuérdate de respetar las normas. Tengo pendiente crear esa entrada. Pido un poco de paciencia ;) Gracias
ResponderEliminar@Anaa. Hola Ana, fíjate bien en la explicación que di en la entrada. En el código que me has puesto el borde hace referencia a left (izquierda). "border hace referenica al brode que queremos poner. Si quisiéramos poner sólo una línea a la derecha (right) deberíamos poner border-right, al igual que haríamos si quisiéramos a la izquierda (left), bottom (abajo) y arriba (top)." Un saludo
hola! tengo un problema, cuando intento aumentar el grosor de la linea esta no aparece, sólo me deja ponerla de 1px y yo quería poner 5, como se puede solucionar?
ResponderEliminargracias de antemano.
como puedo hacer para que mis elementos en mi sidebar ocupen todo el espacio por ejemplo como el tuyo..ya que en el mio queda espacio que sobra en la sidebar...
ResponderEliminarojala me puedas ayudar y muy buen dato
saludos
http://todoespoker.blogspot.com
Hola, buscando ayuda llegue aqui xD. Quiciera saber como puedo hacer de que ma cabecera de mi blog encaje en los bordes, porque por mas grande que sea la imgaen, no termina de encajar en la parte de arriba. http://img59.imageshack.us/img59/1999/ell.png ¿como puedo lograr que mi imagen encaje perfectamente en los bordes?
ResponderEliminarHola tengo el mismo problema que Pedro no encuentro main-wraper !!!!
ResponderEliminargracias d antemano y x tu gran blog
Hola, no entiendo de lenguaje html, pero he intentado hacer esto en el blog q estoy haciendo para mis alumnos y no encuentro esto de main wrapper. Con q otro lenguaje puedo encontrarlo?
ResponderEliminardoy expandidas y sin expandir en diseño antiguo y nuevo cntrl F, busco #main-wrapper, main, wrapper... pero no me sale nada que tenga que ver... puede ser por la plantilla?? que hago? D:
ResponderEliminarrespóndeme en alguno de mis blogs si es posible para que me pueda enterar