Yo que pensaba que esta era una plantilla de lo más corriente, incluso tirando a cutre, y resulta que ya llevo unas cuantas peticiones centradas en cómo hacer el efecto bloc. En concreto, parece que el fondo de las entradas gusta bastante.
Pues nada, aunque ya lo he pasado varias veces por correo electrónico, ahora lo colocaré de manera pública y notoria, haciendo honor al "No rights reserved" de la sidebar.
La que se utiliza aquí está pensada para un fondo negro y es el jpg de la derecha (imagen original pinchando). Pero como la gran mayoría de blogs tienen fondo claro, he confeccionado 12 variaciones con otros tantos colores y formato gif para que los podais usar a discreción.
Pinchando en cada una, accedeis a la imagen original alojada en Photobucket.
Por si las flies, la manera de implantar este tipo de fondos es incorporando a la clase que controla el bloque de post (normalmente llamada de esta misma manera), el atributo BACKGROUND. Si ya lo teneis, sólo hay que cambiar la dirección de la imagen pre-existente, por la de la que se pretende poner nueva. Más o menos, tendreis algo parecido a esto...
...y la línea en negro es la que hay que añadir/modificar para que se quede como es debido. Importante colocar el REPEAT-Y y LEFT TOP. Seguramente, también tengais que modificar los pixels del PADDING para la izquierda y la derecha (cuarto y segundo número, respectivamente)
La que se utiliza aquí está pensada para un fondo negro y es el jpg de la derecha (imagen original pinchando). Pero como la gran mayoría de blogs tienen fondo claro, he confeccionado 12 variaciones con otros tantos colores y formato gif para que los podais usar a discreción.
Pinchando en cada una, accedeis a la imagen original alojada en Photobucket.
Por si las flies, la manera de implantar este tipo de fondos es incorporando a la clase que controla el bloque de post (normalmente llamada de esta misma manera), el atributo BACKGROUND. Si ya lo teneis, sólo hay que cambiar la dirección de la imagen pre-existente, por la de la que se pretende poner nueva. Más o menos, tendreis algo parecido a esto...
.post {
margin:5px;
font-family: Arial, Comic;
background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;
}
margin:5px;
font-family: Arial, Comic;
background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;
}
...y la línea en negro es la que hay que añadir/modificar para que se quede como es debido. Importante colocar el REPEAT-Y y LEFT TOP. Seguramente, también tengais que modificar los pixels del PADDING para la izquierda y la derecha (cuarto y segundo número, respectivamente)
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
hola! ak pasando!
ResponderEliminarbuen blog!
pasaTE x el mio! ;)
t espero!
Blog estupendo...dueño de el mejor aún.Gracias por enviarme la imagen de fondo y las instrucciones.Quedo muy bien.No solo copie el background si no también el resto del código y mejoró mucho,eso sí;Tuve que ampliar un poco el ancho para que se viera mas elegante.El único detalle pendiente es que el título de la entrada me quedo muy al borde superior de la imagen.Y buscando soluciones me he llevado la sorpresa de este post.De verdad de mucha ayuda.Felicidades,
ResponderEliminarNo me extraña que te pidan el fondo del bloc ¡No es para nada cutre! Mola bastante, jaja.
ResponderEliminarMe encanta el blog^^ Lo sigo para hacer trapicheos en el mío... Aunque me he dado por vencida con la nube de etiquetas ésa, que algunas no las encuentra xD Pero bueno, cuando se me pase la perrería ya veré qué hago.
Saludos^^
Me he pasado para agradecerte oficialmente tu ayuda con mi blog.
ResponderEliminarHasta que te llegue mi agradecimiento en forma de pincho tortilla y cañas, te he dedicado la entrada de hoy.
Gracias
Luis: Para que el título del post se separe un poco del borde superior, tienes que cambiar el padding de la clase POST H3, que es la que controla los títulos. Es el primer número del atributo (arriba, derecha, abajo, izquierda)
ResponderEliminar.post h3 {
margin:.25em 0 0;
padding:10px 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
Sucre y Bipxivia: Me alegro de que os guste. Gracias.
Chiti: Ahora mismo me paso a dar una vuelta por allí.
Oloman me encanta que hayas librado tus secretos, probaré en mi plantilla que tál queda!!! gracias y besos!!!
ResponderEliminarGracias.Por tu ayuda.Con ese detalle ya solucione el problema.Queda pendiente el enlace de mi blog al tuyo.Te he enviado un mail explicándote como me gustaría que fuese pero no se como hacerlo.
ResponderEliminarUn Abrazo y Felicidades.
Hola oloman.
ResponderEliminarpasaba a saludar, y aprovechar de hacerte una pregunta. en mi blog (http://clinicaysalud.blogspot.com/) algunos gadget quedan con letras fuera del espacio de la sidebar, y como esta tiene un borde, se ve mal, y no logro encontrar donde esta lo que tengo que modificar.
te invito a que pases por el blog y veas lo que te digo. Ojala me puedas ayudar
Que bien... Gracias por compartirlas...
ResponderEliminarSaludos!
Luis: Mail contestado.
ResponderEliminarAlexis: Prueba a reducir los pixels de ancho de #sidebar{ a una cifra entre 300 y 315px. Aunque no he analizado la plantilla completa, creo que la línea WIDTH de #sidebar li a{ se podría eliminar completa.
Antony: ...no hay de qué.
Hola Oloman, hice lo que me dijiste, y se arreglo aunque no del todo, pero revise mas abajo, dentro de la misma sidebar, donde dice margin y cambie algunos valores de los pixeles, y se arreglo de inmediato. Sinceramente como soy nuevo, no se si fue eso lo que quisiste decir, pero ya esta arreglado.
ResponderEliminarGracias
Hola Alicia.
ResponderEliminarPrueba a quitar el color de fondo que tengas puesto en las entradas del blog a ver si te gusta más.
mmm... no entiendo, el color de fondo que tengo es blanco...
ResponderEliminarperdon me equivoque la direccion era http://dineroplataenlaweb.blogspot.com
ResponderEliminaren el comentario anterior te di otra :$
un saludo
Siempre me pareció un fondo elegante porque al fin y al cabo son nuestros bloc de notas.
ResponderEliminarUn abrazo.
Genial fondo, pero como hahgo para instalar el atributo BACKGROUND en mi plantilla?
ResponderEliminarDesde ya muchas gracias
Alicia: Era simplemente una idea. Pretendía que probaras a ver si te gusta más quitando el color de fondo, no cambiándolo. Es decir, quitando el background de los posts. Y si vi tu blog, ya puedes imaginar que encontré la direccion buena :)
ResponderEliminarLys: Estoy acostumbrado a verte por otros lares, pero también me alegro de verte por aquí.
Luk!tass: La última parte del post explica como colocar el atributo para el fondo de los post, aunque en muchas plantillas pudiera no cuadrar a la primera.
jaja, tu blog es el mas bueno de todos, sin duda.
ResponderEliminargracias por el consejo.
Este comentario ha sido eliminado por el autor.
ResponderEliminarAlicia: No es el más bueno de todos, pero gracias. Ponlo en duda.
ResponderEliminarLuk!tass: Ya veo que lo resolviste y anulaste tu pregunta.
mira si estrene el directorio de blogs que hice con tu pagina.
ResponderEliminarhttp://blogsdirectorio.blogspot.com/
Me encanta gracias, tiene este blog muchas cosas
ResponderEliminarAle, ya tienes un seguidor más... andaba buscando un código que no encontraba ni por casulidad hasta llegar aquí, gracias y a seguir así...
ResponderEliminarun saludo!!
A ver Alexis. Tienes en la página principal esto:
ResponderEliminar<h2 class='date-header'>22/02/09</h2>
<div class='post uncustomized-post-template'>
<div align='left'><table><tr><td align='left' valign='top' width='100px'><a href='javascript:void(0)' onclick='javascript:toggleIt("4247127834254117653");' style='text-decoration:none' title='Desplegar esta entrada'><img id='data:post.id' src='http://alexis.moya.googlepages.com/cerebro-entrenearCustom2.jpg'/></a></td>
<td><h3 class='post-title'><a href='http://clinicaysalud.blogspot.com/2009/02/manual-del-cuidado-primario-de.html'>Manual del Cuidado Primario, de pacientes con Demencia</a></h3>...
Y en las páginas individuales de cada post, esto otro:
<h2 class='date-header'>22/02/09</h2>
<div class='post uncustomized-post-template'>
<div class='title'>
<a name='4247127834254117653'></a>
<div class='date'><span>
22/02/09
</span></div>
<h2 class='title'>
<a href='http://clinicaysalud.blogspot.com/2009/02/manual-del-cuidado-primario-de.html'>Manual del Cuidado Primario, de pacientes con Demencia</a>
</h2>...
Verás que en el segundo caso, hay programado que salgan dos fechas y además, la segunda con una clase que no es la buena (DATE). La correcta es H2 CLASS='POST-DATE'. Lo que está en negrita, sobra.
Con respecto al título, también usas en el segundo caso una clase incorrecta para tu plantilla. Para el título no está duplicada, pero hay que cambiar la que utilizas (en negrita) por H3 CLASS='POST-TITLE'
Seguramente tienes una condición IF para definir un estilo distinto según los casos. Sería algo así como
<b:if cond='data:blog.pageType == "item"'>
Por tanto, busca esto último e intenta localizar las clases equivocadas para cambiarlas tal y como te he explicado. Puede haber varios sitios donde haya condiciones de este tipo.
Dentro de mi ignorancia, he tratadoi de todas las formas posibles para una persona que no entiende nada de codigos html, y no puedo corregir mi problema.
ResponderEliminarLo que mas me complioca es que justo estaba tratando de acreditar mi blog como Web Medica Acreditada, y con esta imagen no se veria muy bonito que digamos.
Estaré sin internet unos días, Alexis. Ve mandándome tu plantilla por correo y si no lo has solucionado, te lo veo cuando vuelva a tener conexión. Un saludo.
ResponderEliminargracias Oloman por tu buena voluntad. Ten por seguro que en menos de lo que canta un gallo te envio mi plantilla, y por supuesto, espero lo que tenga que esperar...
ResponderEliminarMuuuuchas gracias de nuevo...
Buenas noches Oloman, me encanta tu fondo y te lo querría toma prestado, pero soy incapaz después de mucho intentarlo que se me ajuste a la izquierda la imagen de fondo de entrada.
ResponderEliminarMi blog es este:
http://sentadoenlatrebede.blogspot.com/
Supongo que no sea la misma plantilla qeu tu tienes porque la parte de .post no me sale igual a la tuya.
Gracias de antemano por la ayuda.
Saludos
He conseguido hacerlo despues de unas horillas intentándolo, pero ahora lo que no nconsigo es cambiar los espacios entre el título y ,la parte superior del post y los comentarios y la parte inferior del post. Se me amontona demasiado para mi gusto. ¿Alguna sugerencia?
ResponderEliminarGracias ota vez de antemano por la ayuda
Salu2
Lagu, para los márgenes del contenido general del post, creo que ya has descubierto que es variando los valores del PADDING de esta parte:
ResponderEliminar.post {
margin:0px 0px 20px 0px;
padding: 0px 30px 0px 80px;
background:url(http://i252.photobucket.com/albums/hh27/olomansan/blocamarillo1200x35-1.jpg) repeat-y left top;
}
Para el título y la parte inferior (comentarios), tendrás que hacer algo parecido con el padding de
.post-title {
margin: 100;
padding: 10;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
1º, 2º, 3º y 4º cifra corresponden al espacio en pixels arriba, derecha, abajo e izquierda, respectivamente. Esto sirve tanto para PADDING, como para MARGIN, caso de que te haga falta en otra ocasión.
Oloman, finalmente cambie la plantilla de mi blog, asi que te agradesco mucho el querer ayudarme. te invito a que la veas (http://clinicaysalud.blogspot.com), aunque me falta agregar las fechas a las entradas, pero estoy mas tranquilo ahora con esto. Hay un pequeño mensaje para ti en la sidebar.
ResponderEliminarNos vemos
Me alegro Alexis. Ya he leído tu referencia y me gusta mucho. Gracias.
ResponderEliminarOloman, lo ultimo que me queda, y que es lo que te dije que ya me tenia mas tranquilo, es lo de las fechas en los articulos. Aun no puedo hacerlo y lo he intentado de distintas formas y no aparece. Podrias prestarme esta ultima ayud, y prometo dejar de molestarte.
ResponderEliminarGracias de veras, y que bueno que te haya gustado el pequeño mensaje
Buenasss!!, en vista de que la ultima vez me ayudasteis: Y GENIAL!!. Venía a haceros otra consulta, y a FELICITAROS!!.
ResponderEliminarMi blog, lo he configurado viendolo todo el rato con Firefox, hasta que lo ví con Internet Explorer, y... NO COMMENT.
De repente el blog, solo tiene borde por un lado, entre banner y cuerpo, aparece una línea gorda magenta que no debería ser así (si lo veis con Firefox, veréis lo que os digo), los enlaces los configuré de manera que se tacharan al poner raton encima, y en IE lo hacen, pero tarda un rato, y un enlace que tengo como "INICIO" está subrayado perennemente (T__T). Por no hablar del sangrado en la Sidebar... a su rollo!. Todo lo demás... respetable.
¿Hay alguna manera de que IE interprete los valores como hace Firefox, o al menos, no complique tanto el diseño?. Os pediría un poco de ayuda para cada cosita que os he puse antes (que si el subrayado, sidebar, bla bla bla), pero me temo que estais bastante ocupados... así que una referencia general, me vendría de escandalo.
Muchisimas gracias de antemano!.
Por cierto, teneis algun correo donde mandar este tipo de consulta que no tenga relación con nada?.
UN SALUDO!
Oloman, se que dije que lo unico que me faltaba era las fechas, pero se me ocurrio otra cosa, existe la posibilidad de que me digas como poner los titulos de las entradas como las tienes al pinchar sobre una etiqueta? donde sale la fecha, cuantos comemtarios, entradas relacionadas, etc, sin imagenes. Puede ser?
ResponderEliminarMuchas ghracias por la ayuda Oloman, me ha sido de gran ayuda.
ResponderEliminarSalu2
lagu
Alexis, no entiendo del todo lo que quieres hacer ¿Por qué no haces un montaje en una imagen para que me haga una mejor idea? Me la puedes mandar por correo o colgarla en algún alojamiento.
ResponderEliminarOloman, esot es lo que ,e gustaria que apareciera en la pagina principal, tal como tu lo tienes en las paginas de etiquetas.
ResponderEliminarAca va ua imagen
http://rodrigomoyaromero.googlepages.com/oloblogger.jpg
Ok. Ya lo pillo. Mándame una copia de seguridad de tu plantilla actual para verlo más fácil.
ResponderEliminarOloman, recien te envie mi plantilla al correo.
ResponderEliminarespero...
Gracias
Tienes que reconstruir toda la tabla que muestra ahora mismo el +/- y el título del post. Debe quedar así:
ResponderEliminar<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table>
<tr>
<td width='100px'>
<b:if cond='data:post.dateHeader'>
<span class='date'><data:post.dateHeader/></span>
</b:if>
</td>
<td width='400px'>
<h3 class='post-title'><a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a> <a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr>
<tr>
<td>
<span class='date'><b:if cond='data:post.numComments == 1'>1 Comentario<b:else/><data:post.numComments/> Comentarios</b:if></span>
</td>
<td>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a>||</b:loop>
</td>
</tr>
</table>
La clase DATE configura el aspecto de la fecha y el número de comentarios. Si quieres cambiar algo, elimina de este trozo la clase y pon una etiqueta STYLE con el formato que quieras, o bien crea una nueva clase y sustituye DATE por el nombre que le pongas.
Es increible lo que sabes de estas cosas... Espectacular, impresionante, y todos los adjetivos calificativos relacionados para usted, amigo mio... Funciono de inmediato, y con justo lo que queria...
ResponderEliminaresta vez te pasaste, eres el mejor...
graciaaaaaaaaaaaassssssssss
MUCHISIMAS GRACIAS!!!!, de verdad. De momento, con voy a ir corrigiendo esos fallitos que me dices!!. Ya te iré contando!
ResponderEliminarHola de nuevo Oloman...
ResponderEliminarQueria preguntarte como hacer para redondear el borde derecho del bloc, como tu lo tienes...
Espero tu respuesta...
Un saludo!!
Aquí se usa una imagen de fondo (background), alineada a la derecha, dentro de la clase POST H3, o sea la clase del título del post, que por estar definida posteriormente a la clase POST, se superpone a esta última.
ResponderEliminar.post h3 {
font-size:20px;
...
background:url("http://farm2.static.flickr.com/1075/1296745478_34407e65b3_o.gif") no-repeat right top;
}
MUCHAS GRACIASSSSSSSSSSSSSSSSSSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
ResponderEliminarme sirvio mucho, es increible todo lo que sabes sobre esto...
Un saludo
Una cosa Luk!tass... bueno dos.
ResponderEliminarPara que la esquina quede en su sitio, añade en la clase .post H3 un margen derecho negativo. Así se desplazará para la izquierda. Después puede que también tengas que retocar el margen izquierdo.
Por ejemplo, yo tengo esto:
margin:0px -30px 30px -15px;
La segunda cuestión es sobre el fondo de la fecha. Me parece que has usado un .png, porque en IE se ve con fondo blanco. Para que no haya problemas, es mejor que utilices un .gif
OK gracias por decirme lo de el fondo de la fecha, te agradezco mucho...
ResponderEliminarTe hago una pregunta mas y no te molesto mas: se puede redondear la parte de abajo tambien?...
Y otra vez gracias por lo de la fecha.
Un saludo
Ya que no utilizas las líneas 2 y 3 del footer, prueba a colocar allí una imagen de la esquina pero invertida (simétrica en vertical), de la misma manera como hiciste con el H3 para la esquina superior.
ResponderEliminarTendrías que cambiar la clase
.post-footer-line post-footer-line-3 {
...
}
Si no la tienes la creas en tu CSS y ya está.
:o ! NO HABIA VISTO un comentario anterior donde explicas como hacer para arreglar mi problema....ya lo arregle...muchas gracias por tener un blog tan genial!
ResponderEliminarJoé, me encanta el formato de tu plantilla, pero no sé como ponerla en el mio.
ResponderEliminarMe gustaría que pareciese el bloc de notas de indiana jones jejeje pero no se como ponerlo, porque no me aparece lo mismo que tú en el ejemplo.
Es una faena, porque tu fondo es una pasada. Si me pudieses hechar una mano...
Muchísimas gracias de antemano, porque me has ayudado mucho sin pedirtelo siquiera, gracias.
Mi blog es este, si tienes tiempo para echarle un ojo, gracias otra vez.
http://jonathangarcialopez.blogspot.com/
JOhnny, en tu plantilla actual, la clase que debería contener el fondo que aquí se facilita es la WRAP2, no POST. Prueba a ver, aunque seguro que tendrás que hacer algún ajuste en cuanto a bordes y quizás márgenes.
ResponderEliminarTío eres un pedazo de crack¡¡¡
ResponderEliminarTenias razón, pero ahora tengo que buscar la manera de hacer el bloc de notas mas ancho y quitar los bordes de la plantilla que tengo debajo. Muuuuuuuuuuchas gracias
Hola crack, he intentado redondear las esquinas, y no puedo, al hacerlo, no se redondea la parte superior, sino que me sale algo raro a partir de la primera entrada.
ResponderEliminarPor lo demás, he seguido tus instrucciónes y zás, justo como yo quería.
Gracias por todo amigo (si no fuera por ti...)
Por cierto, que se me olvidaba, mi blog es
ResponderEliminarhttp://jonathangarcialopez.blogspot.com/
Gracias otra vez.
Johnny, has usado el fondo para todos los contenedores (post, cabecera,...). Así no es fácil explicar cómo hacer la esquina redondeada, porque hay que modificar bastante la plantilla.
ResponderEliminarSi quieres, puedes probar poniendo ese fondo sólo en el cuerpo del post y luego añadir la esquina en el H3, tal y como ya se ha comentado por aquí.
Suerte
No hay manera de redondear la esquina, joé que complicado es todo esto¡¡¡¡
ResponderEliminarLo he intentado de mil maneras, quitando el fondo de la cabecera, del post etc... y na de na.
Lo dejaré por imposible.
Por cierto, sabes como puedo separar el muelle del bloc de lo que tengo escrito a la izda??
Donde sale el numero de visitas, archivo del blog, mi perfil etc.
Es que parece que se me van a escapar de la libreta. Gracias otra vez.
No conozco bien tu plantilla Johnny, pero juraría que es aquí:
ResponderEliminar#sidebar-wrapper {
clear:left;
margin-left:20px;
}
Sobre lo de la esquina, en cuanto tenga un rato voy a preparar una plantilla completa con fondo bloc para que os la podais descargar.
Eso funcionó a la perfección, muchísimas gracias!!!
ResponderEliminarHola genio! Me encanta tu blog asi que me convertirè en una seguidora más.Tengo un blog literario (cuentos cortos, reflexiones etc.) y apliqué lo que enseñas en esta entrada pero me encantaría por la temática, que los renglones no fuesen cuadriculados sino renglones simples horizontales, me podrías ayudar? http://delavivi.blogspot.com. No entiendo mucho aùn pero poco a poco y con maestros como tú, la mayoría de las veces resulta sencillo. Muchas gracias y espero tu respuesta
ResponderEliminarHola Vivian. En primer lugar, de todos los diseños que se dan aquí, has escogido el que tiene el fondo negro. A tu blog le quedaría mejor cualquiera de los otros que tienen transparencia en el lado del muelle.
ResponderEliminarPor otra parte, para conseguir lo que quieres, tienes dos opciones. La segunda es la más fácil:
- bajar a tu disco duro una de las imágenes y con un editor de idem, quitar las líneas verticales
- buscar en internet algún diseño que te cuadre más
Hola siempre aprendiendo contigo asi que nuevamente te doy las gracias (merecedor de un gran baner en mi blog)Lo malo es que no he encontrado ningun lugar que tenga diseño con renglones. Si lo conoces te agradezco me comentes.
ResponderEliminarVivian, con más tiempo te haría algo mejor, pero de momento prueba con esta imagen a ver si te gusta.
ResponderEliminarhttp://i252.photobucket.com/albums/hh27/olomansan/cuaderno-1.jpg
Oloman, gracias por tu dedicación a los problemas que todos te planteamos a diario. En realidad no pude ubicar esa direc, la busque en google y en http://photobucket.com y no tuve suerte tal vez no anotaste bien la url que me diste? Un saludo para ti desde Uruguay
ResponderEliminarOloman gracias ya lo entendí!! pero por ahora dejo el que estaba porque me encanta el borde con el rulo. Gracias!!
ResponderEliminarOk, Vivian, pero intenta con tiempo crear tus propios diseños y verás como te gustan más los resultados.
ResponderEliminarHola, es la primera vez que te escribo, te encontré en el Escaparate, tu blog es genial, me encanta el diseño... quiero hacerte una pregunta, como puedo hacer para poner este efecto de blog pero solo en algunos de mis post, no en todos, ya que algunos son videos y queda mal, mi blog es: enlaviadoc.blogspot.com
ResponderEliminarGracias María (c)
María, a bote pronto, sólo se me ocurre que lo puedes solucionar a mano. Creas una clase con el fondo "distinto", aquel que vayas a usar menos veces. Luego, cada vez que redactes un nuevo post, si es de ese tipo, metes todo el post todo entre <DIV CLASS="Nuevaclase"> ... </div>
ResponderEliminarMuchas Gracias por responderme, veré que puedo hacer, María (c)
ResponderEliminarhola oloman
ResponderEliminarhice los cambios en la plantilla pero el fondo no me sale en los comentarios y cada entrada me sale con fondo propio quisiera que me ayudaras para que me quede el fondo en todo el campo de las entradas como el tuyo
.post {
padding:35px;
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
background:url(http://lh3.ggpht.com/_TBh4zqHgV9g/StdMm6aMqbI/AAAAAAAAAko/05xuzB5wRoM/Dibujo.jpg)repeat-y left top;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
http://amoalplaneta.blogspot.com
Si quieres el fondo bloc (o papel) para todo menos la sidebar, deberás usar el background en el contenedor #main-wrapper. Si lo quieres para todo incluso la sidebar, entonces en #outer-wrapper.
ResponderEliminarmuchas gracias oloman me ha funcionado muy bien
ResponderEliminartienes un exelente blog
Me alegro de que te haya funcionado Sebastián.
ResponderEliminarHola oloman, ante todo felicitaciones por los premios20blogs te los merecias.
ResponderEliminarpodrias ayudarme con mi blog la seccion de etiquetas en mi blog se encuentra en la parte izquierda y al fijarme en el tuyo es diferente y mas bonito, encontre en otras paginas como cambiarle el fondo al cuadrado de etiquetas pero no me gusta mucho, podrias ayudarme a cambiar mi seccion de etiquetas con una imagen así el de tu blog ?
Pues es un poco largo. Mejor echa un vistazo a Secciones con estilo I y los dos posts sucesivos.
ResponderEliminarsi bien dices que hay que cambiar la direccion
ResponderEliminar"preexistente"
en el BACKGROUND de .post {
es aplicable para otra imagen???
e el caso que asi fuera....
tendria que ser de algun tipo o tamaño en especial???
estare pendiente de la respuesta....
que tengas un buen dia!!!1
o (si no fuera de dia que duermas bien ...)
jaja...
Hecgabor, en un background puedes poner siempre la imagen que quieras y del tamaño que quieras. Sólo depende del efecto que quieras conseguir. Si la imagen es muy pequeña, se repetirá hasta cubrir el "hueco" a rellenar. Si es muy grande, sólo se verá una parte.
ResponderEliminargracias por tu respuesta...
ResponderEliminarte felicito excelente blog
me saco de apuros muchas veces ....
:)
HOla que tal oloman gracias por lo de adsense ya lo cheque a ver keme dicen,Bueno hice lo qeu dice en este post pero ahora la imagen que puse porque cambie las que tu pusiste como diseño por unamia pero no sale toda completa la imagen no se que pueda hacer ayudame porfavor ,y otra cosa como puedo centrar el nombre del titulo del post esque queda muy a la izquierda.GRACIAS
ResponderEliminarDE:OROCHIMARUSAMA MI BLOG:animeycaricatura.blogspot.com
Todo eso lo controla este selector
ResponderEliminar#main .post h3 {
margin:0 .5em;
padding:5px;
font-family: palent,arial black;
font-size:10px;
font-weight:bold;
line-height:1.4em;
color:#999999;
background:url(http://www.fileden.com/files/2010/4/23/2837705//SHA.jpg) repeat-y left top;
}
Tendrás que añadirle un ancho y alto igual al de la imagen de fondo y cambiar el padding a un valor mayor de 5px para generar un pequeño margen y que no se te quede el título pegado al borde. Por últimoo, centra el texto.
Añadir:
width:504px;
height:99px;
text-align:center;
Cambiar:
padding:15px;
Hola, Oloman
ResponderEliminarMe Facina el diseño de tu Blog y ya soy tu seguidora.
He puesto en practica este efecto y quisiera saber como hacer para juntar las entradas,es decir, que la hoja del bloc se vea continua.(como lo veo en el tuyo)
soy novata.....
http://miztutorialez.blogspot.com/
Hola Miztutoz. En las plantillas clásicas sería cómo se explica en el comentario #73, pero tú usas una plantilla de las del nuevo diseñador. Eso quiere decir que hoy por hoy... no tengo ni idea.
ResponderEliminarJajajajajaja...
ResponderEliminarOloman yo no encuentro esa zona pre-existente
ResponderEliminarmira:
.post {
margin: 0 0 25px 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
.........
.........
.........
Alomejor es por que mi plantilla es "de las nuevas" pero no me aparece lo de "font-family: Arial, Comic;"
ResponderEliminarA lo mejor no. Seguro que no te aparece por ese mismo motivo.
ResponderEliminarPrueba a poner el fondo en .post-body. Si no lo tienes en tu plantilla, que creo que sí, lo añades sin problemas a tu parte de estilo (CSS):
.post-body {
background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;
}
asi si me sale pero me sale como un cuaderno por entrada y un poco corto y me gustaria que fuese como el tuyo, osea que el blog entero sea un bloc
ResponderEliminar(excepto el fondo)
¿Raúl de cual de tus blogs se trata?
ResponderEliminarDe Galaxia Humor
ResponderEliminarNuevo diseñador = Casi imposible para mí... de momento ;)
ResponderEliminarPrueba un experimento. Localiza esto...
.content-inner {
padding: 10px;
}
.content-inner {
background-color: #ffffff;
}
Y lo sustituyes por esto:
.content-inner {
padding: 10px 10px 10px 50px;
background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top #ffffff;
}
A ver si hay suerte.
Si gracias!!
ResponderEliminary ahora una ultima pregunta
El espacio donde estan las anillas esta en blanco
para entenderme mejor entra en el blog
¿Como lo quito?
Bueno contesta cuando puedas si encuentro la respuesta te lo digo
ResponderEliminarNo tuve tiempo antes. Simplemente cambia #ffffff (color blanco) por la palabra "transparent" ;)
ResponderEliminarOloman, una vez más necesito tu ayuda.
ResponderEliminarEncontré esta entrada mientras buscaba alguna otra que me ayude con mi cuestión, pero no.
El asunto es el siguiente: Quiero que el blog tenga sólo dos colores: uno de fondo general (voy a mantener el actual, el más oscuro, cuyo color es #c0a159) y otro para los interiores de los gadgets (el más claro, el de las entradas #eeddbb). Quiero lograr un diseño uniforme como tiene Rosa en: El escaparate.
No estoy pudiendo conseguir que los fondos (backgrounds) de mis gadgets sean iguales a los de mis entradas. Hay algo, como un efecto, que cambia la textura y el color de fondo aclarándolo y dándole un tipo de "rugosidad"; como si fuera algo translúcido claro (y no transparente). El ejemplo más claro (en mi blog) es el agregado que indica en donde estás, sobre las entradas individuales. Ahí llegué hasta el borde y no consigo el background correcto.
Estuve buscando pero no sé donde encontrar el estilo de mis entradas y si lo hago, encuentro cosas tales como:
background: $(post.background.color) $(post.background.url) repeat scroll top left y no sé como seguir.
¿Podés orientarme un poco?
Muchas gracias.
José.
Pero se me queda como una linea con sombra,
ResponderEliminar¿se puede quitar?
José, creo que te dije que lo del diseñador nuevo no lo controlo todavía ¿verdad? :D
ResponderEliminarBueno, pienso que pueden ser dos cosas. Una es que algunas de las plantillas incluyen "de serie" fondos semitransparentes. En ese caso, se podría arreglar probando con otra plantilla.
Otra cosa que puede ser es que estas plantillas usan box-shadow para crear sompras degradadas. Quizás esas sombras sean lo que a tí te parecen transparencias.
Lo siento pero no te puedo ayudar más en este tema. Al contrario... si descubres algo, lo comentas, por favor.
Raúl, el problema que tienes ahora es el mismo que plantea José justo antes que tú. Por tanto, la respuesta es la misma :(
Sí, me lo habias dicho.
ResponderEliminarComo nuevo, no encontré nada; pero, leyendo tus varias entradas sobre TRANSPARENCIAS, imaginé que esto (o eso) era lo que no podía "descular" (léase desenmarañar). Quité la imagen de fondo de mi blog (todo en mi blog de pruebas) y así se expuso la transparencia en cuestión. Luego, siguiendo las instrucciones de tu entrada: "Fondos de entradas transparente" hice un css para toda la sidebar y fui probando el grado de opacidad hasta llegar al deseado.
Aviso: hay que hacerlo con un color plano (o pleno) y sin texturas, éstas confunden.
La "rugosidad" que mencionaba antes era fruto de mi imagen de fondo.
Hasta ahí llegué. Me queda ver como hago para que los textos e imágenes queden sobre la capa transparente, y cómo hago para alternar secciones con y sin esta transparencia (puesto que ésta me entrega ese segundo color pretendido).
Espero esto le sirva a alguien.
Por si acaso, mi blog de pruebas es: http://elpdlv.blogspot.com
Gracias, Oloman.
Saludos a todos.
Puff menudo lio me e hecho en la cabeza :P
ResponderEliminarhaber si lo consigo
Raúl, si te sirve, en mi blog de pruebas, el que meciono arriba, hay un css que se llama. #sidebar-right-1. Al aplicarlo, pegándolo donde corresponde para tu plantilla, si tu sidebar tiene el mismo nombre (id) que la mía, y si además tu sidebar está a la derecha debería aclarársele el color, como pasa en mi caso.
ResponderEliminarMucho mas no puedo decirte, yo, apenas recién, terminé de hacer esto.
Fijate también la entrada que menciono, de Oloman, es muy clara.
Saludos.
José, para intentar quitar la transparencia del contenido de la sidebar, añade la clase .widget-content -si no la tienes- e incluye las mismas propiedades de transparencia pero con una opacidad total. Estas propiedades sólo afectarán a los gadgets de la barra lateral, pero no al resto, no a lo que queda alrededor.
ResponderEliminarSi funciona, haz lo propio con .blog-posts hfeed, que es la clase que engloba las entradas.
Suerte
Ok, lo pruebo. Gracias.
ResponderEliminarOloman, acá estoy.
ResponderEliminarEl truco .widget-content, por ahora no fincionó (o no supe dónde ponerlo)
Todo lo estoy haciendo en mi blog de pruebas.
Lo que sí hice fue ponerle borde a todo para ver las diferentes supeficies que quedan: Borde al .widget-content, borde al #sidebar-right1 y borde al #HTML7 (Cortitas); te pregunto:
¿Puede hacerse de esta combinación (#color+valor de transparencia) un color o un atributo (?) para aplicarlo directamente como background? Pregunto esto porque evidentemente esta forma afecta la transparencia de las letras, pero las letras se ven bien sobre todos los colores cuando estos van de background. Y si se puede hacer este color podría ser asignado a las superficies deseadas.
Pensaba también si se pueden hacer marcos translúcidos para no tener que sacar nada de adentro de los widgets.
Inquietudes.
Voy a seguir intentando mañana.
Saludos.
Voy a rebobinar porque me he perdido... y perdona por ello :( ¿Cual es el problema exacto y dónde en la plantilla de pruebas tal y como está ahora mismo?
ResponderEliminarOloman, ahora mismo no hay problemas.
ResponderEliminarDecidí dejar de lado, por unos días, las opacidades para hacer el diseño de la sidebar con colores. Una vez que consiga dejarla como quiero, me las veré con las primeras nuevamente para conseguir un óptimo resultado.
Estuve leyendo mucho y todavía me parece muy complicado, para mí, lo que quiero conseguir con transparencias.
Cualquier duda vuelvo a consultarte.
Gracias por contestar.
José.
PD: No hay nada que disculpar, fueron muchas preguntas en varias entradas; imposible no perderse.
Gracias por entenderlo ;)
ResponderEliminarNo entiendo !!!! lo q pasa es que no encuentro el lugar donde debo pegar las lineas negras !!! ayudame !!c xfa
ResponderEliminarEsto está explicado para plantillas anteriores a las del nuevo diseñador. En tu caso, habría que sustituir la imagen http://www.blogblog.com/1kt/transparent/white80.png que forma el fondo de tus entradas, por la dirección de cualquiera de estas.
ResponderEliminarHola, muy buenas, ante todo, eres una maquina tio, me encante tu blog, te escribo por que tengo un problema, con el blque de las entradas,hay un espacio dentro de ellas, que se me queda en blanco y no puedo aumentar de tamaño para acercarlo a la sidebar, y ya no se que hacer que cambiar para que m quede bien, decirte que no tengo ni idea de esto, y me esta costando bastante trabajo, muchas gracias, por todo,un saludo.este es mi blog
ResponderEliminarhttp://p-ortigal.blogspot.com/
Anónimo, busca estas clases e IDs y cambia los valores de cada WIDTH por los que se indican a continuación:
ResponderEliminar#main-wrap1
width:600px;
#main-wrap2
width:600px;
.main
width:600px;
.main .Blog
width:600px;
Esos cambios le darán un mayor ancho a la columna de las entradas. Echa un vistazo también a esta entrada:
http://oloblogger.blogspot.com/2007/01/blogger-ancho-de-columnas.html
Hola Oloman, lo primero felicitarte por tu blog, ¡es genial!
ResponderEliminarLo segundo, he intentado colocar las anillas como las tienes tú, pero no me sale :( Y es que yo de programación cero. A ver si me puedes echar una mano. Mi blog es: http://sunshinesgalery.blogspot.com/
¡Gracias de antemano!
Tienes una plantilla de las nuevas, Sunshine y yo odio esas plantillas :(
ResponderEliminarDe todas formas, prueba a añadir esto:
.blog-posts {padding:5px 10px 5px 50px;
color:#000000;background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;}
Creo que lo logré por ahí toqueteando jeje
ResponderEliminarLo único que no atino a cambiar es que empiece justo debajo de la cabecera. Tuve que cambiar la cabecera a formato .jpg para que tapase los renglones. ¿Es posible bajar el fondo para que no se coloque tras la imagen principal?
Muchas gracias :)
Sunshine, prueba a incluir esto otro más:
ResponderEliminar.widget Blog {margin-top:30px;}
¿Puedo redondear las esquinas de la derecha en mi plantilla?
ResponderEliminarLo pregunto por que es de las nuevas o del nuevo diseñador o algo asi y no se si podre :S
Sí Raúl, pero es un poco comoplicado, así que no sé si se podrá hacer con las nuevas plantillas:
ResponderEliminarFondos cuando la longitud es variable.
En tu caso, la imagen del centro sería la misma que usas, pero la de arriba y abajo tendrían qeu ser retocadas para que formaran las respectivas curvas.
Oloman. Gracias por tu aporte, realmente me sirvio mucho. Quisiera preguntarte algo. Soy nuevo en esto de los blogs y he creado un sitio usando las herramientas de blogger,el tema es que hice algunos cambios en el encabezado de mi blog y cuando lo cargo parece que ubiese guardado configuraciones anteriores de tipo de letra y fondos; esto se ve al cargar el blog. Habria forma de que cuando lo cargue solo se vea la ultima configuración de letra y fondo que escogi; o mejor como lo hago??.
ResponderEliminarVisita mi sitio:http://mbexcel.blogspot.com/
Gracias..
Yo no aprecié nada al cargar tu blog, pero puede que con una conexión más lenta se vea cómo -por ejemplo- los títulos salen con una letra normal y luego se cambia a esa que pusiste. Si es eso lo que ocurre, esto se debe a que esa tipografía no es estándar y todo lo que no lo es, siempre se "pinta" tras la carga normal, encima de lo estándar. Bueno, más o menos este es el motivo :)
EliminarGracias. Oloman, que buen sitio web. Quisiera preguntarte como puedo instalar un sidebar como el tuyo es que me parece excelente y con la plantilla "tipo block de notas" que nos facilitaste me parece que necesito el cambio..
ResponderEliminarEso no es nada fácil como para explicarlo en un comentario y por otra parte, depende de cada plantilla. Vamos, que no voy a poder satisfacerte. Tendrás que experimentar con un blog de pruebas.
EliminarEstoy toda loca, no logro cambiar el fondo de mis entradas, no se como ni donde, poner el backgraund cada vez que lo inserto, se me pone el fondo transparente, ayudame porfa, quiero insertar una imagen. Gracias.
ResponderEliminarHola. En tu plantilla deberías tener esto:
ResponderEliminar.post-outer {
padding: 35px 15px;
margin: 0 0 40px;
background: #f6eed9 url(//www.blogblog.com/1kt/watermark/post_background_birds.png) repeat scroll top left;
etc.
Ese background es el que tienes que cambiar para que se cambie el fondo de las entradas. Puedes cambiar la imagen y/o el color (#f6eed9)
Hola Oloman,
ResponderEliminarquiero preguntarte como puedo hacer para quitar la imagen de pajaritos del fonde de plantilla watermark?
Gracias
Pásame la dirección dónde la tienes instalada y la veo para que no tenga que montarla yo aparte.
Eliminar