Barras verticales de separación
Se pueden añadir a la plantilla barras verticales, por ejemplo, para separar las entradas de la sidebar, para destacar la sidebar, para destacar las entradas, en fin, para conseguir efectos estéticos diferentes...
En realidad estas barras, son un borde que añadimos desde el CSS y que podemos aplicar tanto a las entradas como a la sidebar, según nos interese.
En esta entrada vamos a ver como aplicar una barra a la derecha de las entradas, lo que hará que se vea como una "marca" que separe lo que son los post de la sidebar.
Barra vertical para separar entradas/sidebar:
[1] Desde Edición HTML y sin expandir las plantillas de artilugios, localizamos este código:
#main-wrapper {
[2] Añadimos en ese código (siempre antes de la última llave de cierre } del bloque) esta línea de código :
border-right: 1px solid #000000 ;
[3] Vista previa y guardar cambios.
Notas:
* Si cambiamos el valor "solid" en esa línea, por "dashed" la barra se verá punteada (como en mi blog):
border-right:1px dashed #000000;
* Aumentamos el grueso de la barra si colocamos en 1px un valor mayor.
* Cambiamos el color de la barra en #000000, sustituyendo ese código por el del color que necesitemos.
border-right:1px dashed #000000;
* Aumentamos el grueso de la barra si colocamos en 1px un valor mayor.
* Cambiamos el color de la barra en #000000, sustituyendo ese código por el del color que necesitemos.
a las
Etiquetas:
Trucos Blog
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
62 comentarios:
rosa:
¿puedo poner de borde una imagen en vez de un color sólido?.
gracias.
No, gabriela, supongo que lo dices por el blog que me mostraste de ejemplo...ese blog está hecho con tablas por eso pueden ponerle el borde, en Blogger has de escoger una imagen que ya lo tenga incluido para ponerla como fondo del #outer-wrapper {, puedes hacerla tu misma en el paint, poniendo una debajo y otra mas pequeña encima, asi la de abajo hace de borde, luego guardas y es como si fuera una sola imagen.
¿Es posible que en la plantilla 'scribe' no se pueda hacer?
Porque no lo consigo y la verdad se ve muy fácil.
Pero claro quizá es porque tiene esa imagen de fondo (que ampliaste para que pudieramos ensanchar el blog...)
saludos,
Mrevenga, no tiene nada que ver, acabo de probar y si sale, solo que has de ponerlo, para las entradas en
#main{
Hola Rosa y perdón por esta metralleta de dudas en tan poco tiempo... La verdad es que no tengo muchas más. Quizá esta sea la última (de momento).
Hace ya unos días que me hice con un truco para recuadrar los textos de los post como indicas en este post. Lo que quería era separar un poco mas el texto de esa caja. Aquí explicas que hay que hacerlo con el padding pero a mi no me lo respeta. Tampoco me redondea la caja de texto ni me la encierra por el lateral inferior.
Quizá sea por haber introducido un HTML diferente al que sugieres aquí...
¿Habrá alguna otra manera de hacerlo?
PD: Mi blog sigue sin funcionar correctamente. Espero que esto sea cosas de blogger... Ya he puesto su publi abajo (la de blogger) no vaya a ser por eso... jijijij
gracias
Toxicboy, la forma redondeada no se verá si usas IE.
No te cierra abajo porque has puesto el código en .post{
y has de ponerlo en #main-wrapper { que es el "contenedor" de los post y así también se evita que el texto se pegue.
En .post{ el padding no varía, o mejor dicho, no lo notas porque donde lo has colocado, la línea sigue al texto al modificar el padding.
lo he puesto en el main y me ha borrado la sidebar!!1
Da igual Rosa, así tampoco esta mal... thank you
Toxicboy, mira mi blog de pruebas, y lo unico que hice, fue añadir esto en
#main-wrapper {
border: solid #ffffff 1px;
padding:10px;
http://sabinomendezsabinada.blogspot.com/
ok Rosa. Eres un sol. Lo intentaré luego desde casa.
Sigo sin poder hacer cambios en la plantilla de diseño (concretamente en la sidebar)... espero que esto sea mas o menos normal....
No obstante ¿a quien puedo dirigirme?
ok rosa. lo he hecho pero me recuadra todos los post. no uno por uno... tal y como lo tengo ahora me gustaría que el texto se separara un poco de mi caja...
Ultima duda (lo prometo) Suelo incluir los post en etiquetas pero al final de los post (donde se pone publicado por... a las horas tal...) no me aparece etiquetas: lo que sea
¿por qué me pasa eso?
Hola toxic, mira de nuevo en el blog de pruebas:
http://sabinomendezsabinada.blogspot.com/
Si es eso lo que quieres has de hacer esto:
Situate en .post{
Para separar el texto, añades esta línea : padding:10px;
Si quieres más separación, aumenta el número 10.
Ahora para que por abajo no salga la línea de puntos y salga unalínea como las otras, ahi mismo, en .post{ elimina esta línea:
border-bottom:1px dotted $bordercolor;
En cuanto a lo de las etiquetas, ve a plantilla donde añades los elementos, pincha en "editar" en la caja de entradas y asegurate que tienes marcada la casilla de "etiquetas"
Lo del contacto con Blogger, telo miro en cuanto pueda ¿ok? se que hay un email, pero ahora mismo...¡he de buscarlo!
¡Suerte!
Rosa. Muchas muchas gracias. Lo probaré luego (estoy en el curro. Por cierto muy interesantes tus comentarios en el otro blog que tienes.
Por fin lo conseguí, efectivamente era en el #main{.
Queda mejor.
Gracias mil..
Conseguido!!!! (la separacion del texto)
Lo de las entradas lo tengo marcado pero no aparecen al final del post...
extraño ¿verdad?
Toxic, mira a ver si pos alguna razón has borrado el código de las etiquetas, suele estar después de:
<p class='post-footer-line post-footer-line-1'>o
<p class='post-footer-line post-footer-line-2'>
Es este:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'>
<data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
Para solicitar asistencia del servicio técnico de Blogger, mira aquí:
https://www.blogger.com/problem.g
Hola Rosa!
Me ha resultado muy útil este truco, pero me gustaría saber si es posible separar las entradas del blog una a una, en lugar de tenerlas todas dentro del recuadro...
Otra cosa es que me gustaría que me salieran los comentarios como a tí, en recuadros y con los míos propios resaltados (ese truco lo probé y no me funcionó U_U)...
Bueno, muchísimas gracias :)
¡Otro par de cosas! Que si las dejo me olvido...
Una vez hechos los recuadros, ¿se puede cambiar el color dentro de él? O sea, que quede la sidebar dentro de un recuadro y dentro un color de fondo distinto al del resto del blog...
¿Y por qué al poner el borde de la sidebar punteado, si le pongo las esquinas redondeadas se vuelve continua la línea? ¿No se puede dejar redondeada y punteada?
¡Gracias!
Te escribí un comentario y ni idea de donde habrá quedado, pensé que acá pero bue...era para darte las gracias por responder tan pronto (como siempre) y para decirte que definitivamente los códigos para redondear las esquinas (los que señalas en el post)no funcionan con IE...acaso conoces (o alguien más conoce) alguna forma para hacerlo funcionar con Internet Explorer???...La otra vez me dijiste que una forma podía ser usando gráficos, pero siempre he tenido la misma duda que no he sido capaz de resolver: cómo le hace uno para que sin importar el tamaño del post (breve o muy extenso, éste encaje perfecto en la "caja", sin que además la imagen de fondo se modifique.
Perdona si me extiendo, pero quiero aprovechar para hacerte otra pregunta y de paso compartirla con todos cuantos trnasitamos a diario por aquí: viste que muchas de las plantillas de "wordpress" tienen el outwraper (espero que esté bien escrito) limitado con un borde y a su vez este pareciera tener una sombra, crees que se pueda lograr los mismo en blogger?
Gracias.
Carlos Javier, creo que no vi el comentario que dices...Blogger me está dando algún fallo con el envío de los comments a mi correo, tal vez se me pasó...
Es cierto, en IE se ven cuadrados, el ejemplo lo tienes en este mismo blog, si usas Firefox, lo verás con los bordes redondos y en IE cuadrados.
Para hacer como tu dices la "caja" de las entradas con imágenes y que se adapte al texto, hay que usar tres imágenes distintas, la de arriba, la central y la de abajo, que además han de tener el mismo ancho que tiene el "main" (entradas) en el html de la plantilla. (Esta forma es la que usan las plantillas Rounders)
Lo que dices de las plantillas en Wordpress y que también se usa a menudo en Blogger, también es una imagen, que va en el background (fondo) del Outer-wrapper.
Hola Rosa, antes de nada felicitarte por el magnífico trabajo que realizas en tu blog. El problema que tengo es que en mi plantilla de Routers 3 me aparece #main-wrap1 { y #main-wrap2 { pero no me aparece #main-wrapper { por ningún lado. En este caso, ¿dónde colocaría ese valor para que las entradas me aparezcan en una caja en el sidebar?.
Perdón, quería decir Rounders 3 jeje
Ivan, no entiendo que quieres conseguir, en realidad las plantillas Rounders ya tienen este "efecto", precisamente se trata de hacer que una Mínima, por ejemplo, se parezca a la Rounders...
En fin...en la Rounders3 la parte que forma el cuerpo de los post, está compuesta por tres imágenes:
#main-wrap1 {
width:485px;
float:$startSide;
background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:url("http://www.blogblog.com/rounders3/corners_main_top.gif") no-repeat $startSide top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y;
padding:0;
}
No hay main-wrapper, ya que está sustituido por todo eso para poder incluir las tres imágenes.
Rosa esto sirve para cada elemento de la sidebar aparte?
Ejemplo en tu elemento de: Blog de ayuda .. pss lo tienes rodeado de bordes por los 4 costados, es decir está en un recuadro cada elemento.. y es lo que yo quiero :)que cada elemento que vaya agregando a la sidebar pss este encerrado en su propio recuadro..
Como podría hacer eso Rosa? .. estoy en el tutorial indicado?.. gracias, saludos desde Venezuela
Carledens mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/01/entradas-y-widget-enmarcados-por.html
Hola, Rosa. Al final tengo que hacer consulta... :$
Me he leído el post y los comentarios, y parece que no se puede poner una imagen para separar las entradas. Lo que yo quiero es separar una entrada de otra (quería imagen, jeje, pero qué le vamos a hacer) con una barra, como dices, pero he probado el código, he probado variantes... y no me sale, y al final ya no sé si lo que explicas en el post es lo que yo quiero...
¿Me echas una mano? Gracias. :)
Ilión, creo que lo que tu buscas es esto:
http://elescaparatederosa.blogspot.com/2007/03/cambiar-las-barras-de-separacin-por-una.html
Gracias. :) El finde le echo un vistazo.
Hola querida Rosa!!
me puse muy feliz cuando encontré a través de tu buscado este post porque era lo que andaba buscando pero me he llevado un chasco muy grande pues por lo que veo, en vez de ser barras horizontales de separación entre entradas, son barras PERPEDICULARES no???? O_O o yo no he pillado para nada el mensaje de esta entrada O_O
no encuentro otra entrada que tenga este título y que trate de barras HORIZONTALES de separacién entre entradas (y entre elementos de la sidebar) que es lo que yo buscaba...
¿me podrías orientar, si eres tan amable???
muchas gracias de antemano, linda
Mary, ay dios:$ Y mira que esta entrada lleva tiempo online y nadie me había advertido del error...¡gracias!
Tengo algo sobre eso aquí:
http://elescaparatederosa.blogspot.com/2007/03/cambiar-las-barras-de-separacin-por-una.html
Si no es eso exactamente lo que buscas me dices lo que quieres y veré de ayudarte.
Ya pude colocar las líneas de separación :D
Muchísimas gracias Rosa! ^^
Amparo ¡Gracias a ti!
Hola ROsa!!
Tanto tiempo.. =)
Te cuento que cambie nuevamente el formato de mi blog.. http://corazondenuez.blogspot.com y me hace falta poner una barra de separacion entre las columnas.. intente con este truco.. pero la barra me queda pegadisima a las letras... intente ponerla en la columna de la sidebar.. pero lo mismo.. queda tan pegada a las letras.. que molesta..
Como hacer para que quede al centro del espacio entre las dos columnas??
Me ayudas??
Mil gracias!
San....
San.. Además de añadir la barra a las entradas, debería añadir un padding a los post para que se separen un poco de ella.
Lo haces en:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ffffff;
padding-bottom:1.5em;
}
Añadiendo, si la barra está a la drecha, una nueva línea antes de la llave ultima de cierre, algo como esto:
padding-right: 10px;
Hola Rosa, me gusta el efecto que hace. He tenido que reducir el #main a width:460px;pero solo me sale la barra en la sidebar derecha. Pero tengo otro problema mucho peor. Me gustaria (si se puede) ensanchar un poco más el blog, y la sidebar izquierda ensancharla a width:450px; mas o menos.¿Entiendes lo que quiero hacer?.Que el blog me quede tal cual, un poco más ancho para poder hacer la sidebar izquierda bastante mas ancha.¿Se puede?.¿me puedes ayudar?...Gracias.
Millaró El problema de la Scribe (tu plantilla) es que usa varias imágenes de fondo, que si ensanchas el blog, tendrás que construir esas imágenes al nuevo tamaño también...
Hola Rosa... estoy emezando a rediseñar mi blog y ya he hecho algunas cosas tuyas... como el enchancar la plantilla minima, ahora estoy tratando de poner esta linea de separacion, y simplemente no me sale, probe tanbien colocandola en el bloque del sidebar y tampoco :(
es tan facil y no me sale... :$
desde ya Gracias! y espero tu respuesta!
aqui te dejo el enlace del blog
http://meridaenronald.blogspot.com/
Ronald Gordon Localiza esto:
#main-wrapper {
Y pon la línea del borde justo debajo de esa línea
si! si me salio, pero me queda muy pegada al texto de las entradas... no se podra crentar un poco mas entre las entradas y el sidebar? no se si es mucho pedor! y graciar por la rapida respuesta!
ah, asi quedo Blog
Ronald Gordon Coloca debajo de la línea que pusiste para el borde, esta otra:
padding-right: 10px;
O quizá algo más, 15 0 20px, pero no te pases o se podría "caer" la sidebar.
No dejes enlaces a tu blog en los comentarios, por favor, con el enlace de tu perfil me vale para comprobar las cosas en tu blog...
No, no funciono... de hecho queto la linea, probe con varias cantidades de 5px y 15px, pero nada, solo desaparece...
Ronald Gordon El que desaparece? Es fácil de implementar esto, no se que puedes estar haciendo mal...
listo ahora si me sirvio, colocando la linea sobre el margen al lado del borde y no debajo...
hay alguna manera, Rosa, de que empiecen las lineas mas abajo, algo asi como ponerle un pading superior, para que empicen por debajo de el titulo de la entrada?
gracias.
ra.
wwww.tragavientos.com
ra. No, no la hay.
Se puede hacer esto mismo pero en vez de hacer vertical la linea, que sea horizontal para el comienzo de cada entrada, o para el final de cada entrada??
Kano.0 Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/03/cambiar-las-barras-de-separacin-por-una.html
Gracias Rosa :)
Hola Rosa. He aplicado esta entrada y me ha salido perfecta, pero quisiera que la línea terminase justo a la altura de la columna de la derecha (que no llegase hasta abajo) y que se expandiese si expando algún gadget ¿Sería posible? :D
Muchas gracias de antemano. He descubierto el blog y me pasaré más veces.
Marino Si en lugar de aplicar el borde en #main-wrapper { lo haces en #sidebar-wrapper{
Cambiando eso si, la posición del borde, el efecto será el que dices (tal como en mi blog)
Tendrías que localizar el sidebar-wrapper{ y colocar el borde tal que así:
#sidebar-wrapper {
border-left: 1px solid #000000;
Hola, Rosa:
He leído todos los comentarios antes de hacer mi consulta, y también buscado en tu blog (y en otros), pero... no lo encuentro o no lo sé ver.
Estoy subiendo botones en la sidebar, y usando el "añadir gadget" de imagen, con asociación a "urls".
El caso es que me queda mucha separación entre botón y botón, y es esto lo que me gustaría poder controlar: la distancia de separación entre imágenes/elementos en la sidebar.
Muchas gracias y disculpa las molestias.
NOTA:
No es para mi blog, sinno para unos amigos que tienen una casita rural y están intentando salir del bache.
Gracias de nuevo.
:)
¡Ya lo solucioné!
Gracias, igualmente.
exelente blog, yo soy principiante y eso de las lineas el slo que estaba buscando gracias por el aporte, quiesiera saber como ponerlas en horizontal, mi blog www.herguf.blogspot.com
hola.. mi pregunta es he puesto las lineas laterales perooo... no logro hacer que la entrada se separe un pelin de la linea ya que me queda pegada del todo que puedo hacer? gracias. de momento la he quitado asi que en el blog no se mirara.
HERGUFPara ponerlas en horizontal donde?... si es para separar las entradas una de otra sería algo así:
border-bottom:1px solid #000;
Y lo tendrías que colocar debajo de:
post {
Para la separación que dices, mira en el comentario comentario número 49
Hola Rosa!!!
Al final conseguí poner las barras de separación entre entrada y entrada!!! Ahhora me gustaría cambiar la línea vertical que separa las entradas de la sidebar por una imagen. ¿Es eso posible?
Por cierto muchas gracias por tdos los truquillos que nos das, gracias a ti mi blog está quedando estupendo!!!
Naiara Eso solo es posible usando una imagen adecuada... por ejemplo una que cubra todo, main y sidebar con un color de fondo apropiado y lo que sea que hará de barra de separación... por supuesto todo eso construido (la imagen de fondo) a medida del blog para que "case" con todo lo demás...
excelenteeeee toy mejorando mi blog, y seria xevere que postees sobre el slideshow
hola tengo una pregunta, es que yo tengo dos sidebars y quiero separar el de la izquierda porque uno siempre tiene mas espacio entre el y la entrada que el otro, pero no se como hacerlo y queda muy unido a la entrada >.<
Help!
kassiPrueba añadiendo aqui la linea que ves en negrita:
#main-wrapper {
width: 400px;
margin-left: 10px;
margin-right: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
thaaks!!!!!!!! MUXAS GRACIAS WIII
hola queremos consultar si podemos colocar( una sola entrada en blogger -luego colocar otras cosas diferentes y luego otras entradas debajo del material - por ejemplo no deseo tener 3 entradas consecutivas -me hago entender-saludos- cris
Hola Rosa, muy bueno este post, era lo que buscaba, pero lamentablemente no logro encontrar la línea con el código #main-wrapper { en mi plantilla, tal vez figure de alguna otra manera o directamente no esté (la plantilla es iEducation). Por favor si me puedes ayudar a encontrar el código te lo agradesco mucho. MIL GRACIAS.
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo