.post img {
border:1px;...
border:1px;...
Si queremos eliminar el borde, o lo que es más correcto, hacerlo de tamaño 0 (invisible), hay que sustituir el 1 (o el número que tenga tu plantilla) por un 0.
Si en lugar de hacerlo desaparecer lo que queremos es que salga con otro aspecto, podemos usar las propiedades de ancho, estilo y color:
- Para el estilo: none, dotted, dashed, solid, double, groove, ridge, inset, outset... mejor que vayais probando para ver los resultados de cada uno.
- Para el color: #xxxxxx... una almohadilla (#) más los seis dígitos que representan el color que queremos. Teneis una tabla de códigos para los colores en este enlace.
- Para el ancho: 10px ...o el número de pixels que querais. Para algunos de los estilos, es necesario un grosor de 3 o más pixels para que se pueda apreciar el efecto.
Unos ejemplos:
.post img {
border:5px #990000 dotted;
...
border:5px #990000 dotted;
...
...daría este resultado...
...mientras que con 10px, color #993300 y estilo OUTSET en lugar de DOTTED, la imagen queda...
¿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...
Muchas gracias por el post, me ha sido de gran utilidad Ctrl+D
ResponderEliminarHola
ResponderEliminarEn mi plantilla no está el código: .post img {
¿Qué puedo hacer?¿Puedo agregarlo y en qué parte?
Gracias
Puedes agregarlo sin ningún problema Abril. Por ejemplo, detrás de
ResponderEliminar.post {
margin-top:8px;
margin-right:0;
margin-bottom:24px;
margin-left:0;
}
pero sólo por dejar la cosa un poco ordenada. Mientras esté antes del cierre de SKIN (/b:skin), en cualquier sitio vale.
No olvides cerrar la clase con una llave
.post img {
border:1px solid blue;
}
Listo!
ResponderEliminarMuchísimas gracias.
Pues igual cada vez que se cite algo de CSS que hay que cambiar. Se pueden alterar los atributos de una clase (selector) o se puede añadir una clase completa con sus atributos.
ResponderEliminarhola amigo, ya q estamos te felicito por tu blog, increible lo completo... mi pagina es esta http://www.radiouno885.com.ar/ tiene plataforma blogger con mis modificaciones, 2 cositas...
ResponderEliminarNo estoy pudiendo poner el borde en las imagenes del post en la pagina principal, y tampoco se como modificar el tamaño de la fuente en el mismo lugar... cuando creo la entrada le doy el tamaño, pero lo utiliza una vez q entro al post...
nose si me explico bien.
saludos
Hola Matías.
ResponderEliminarEso es porque tienes el sistema de sumarios instalado mediante un script que he visto que se llama autoreadmorethumb.txt Ese fichero es el que te genera los resúmenes con un formato determinado. Tendrías que descargarte el script, modificar lo de los bordes y el tamaño de fuente y luego volverlo a alojar. Por último, sustituir la dirección del nuevo fichero por la del que tienes ahora.
Hola Oloman, gracias por guiarme, no es q sea comodo pero esto de los scripts me mato... mira ese es el link pero no entiendo mucho, si podes guiarme un poco mas t agradeceria.
ResponderEliminarhttp://sites.google.com/site/bloggertricksjs/Home/autoreadmorethumb.txt
estoy en bolas...
Matías, acabo de darme cuenta viendo el script, de que hay una clase para poder configurar la miniatura (imagen). Es .thumbnail. Actualmente la tienes anulada con símbolos de comentarios /* - */. Con que los quites, ya podrás hacer modificaciones en esa clase y ver los resultados.
ResponderEliminarCon respecto al tamaño de letra, ya sí que tendrías que modificar el script. Para ello, descargas y abres ese TXT por ejemplo con Notepad. En la parte que reproduzco, incluyes un CLASS="RESUMENES", por ejemplo. Lo nuevo lo he marcado en negrita:
var summary = imgtag + '<div class="resumenes">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
Una vez modificado el script, tendrías que subirlo a algún alojamiento tuyo. Obtienes la nueva dirección y la cambias por la que me indicaste. Hay sitios desde dónde no funcionan los scripts y no sabría recomendarte ninguno, pero por lo que veo en la dirección que me envías, los de Google Sites funcionan. La ventaja de alojarlo tú mismo es que no dependerás de si el dueño del fichero lo borra o lo modifica (ahora mismo no lo controlas tú).
Por último, tienes que crear en tu parte CSS la clase que hemos añadido con el estilo que quieras. Por ejemplo:
.resumenes {
font-size:12px;
}
Cuesta más explicarlo que hacerlo, así que ¡ánimo!
gracias olo, funciono excelente el tema del tamaño de la fuente, pero con respecto al formato de las imagenes en la clase .thubnail le saque los /* de comentario y no afecta en nada a
ResponderEliminarmi plantilla:
.thumbnail {float:left; margin:15px 10px 10px 40px ;width:125px;height:125px;border:5px #f4d701;}
lo tengo asi... y sigue como siempre
saludos y disculpa las molestias
¡Ooops! Se me olvidó marcar en negrita el cambio, pero ya veo que lo has visto igual.
ResponderEliminarCon respecto a los bordes, para que sean visibles te falta indicar el tipo de borde:
border:5px #f4d701 solid;
Puede ser cualquiera de los que se explican en este mismo post.
sos un capo papa, una consultita mas... viste que tengo un menu arriba, como hago para alinearlo a la derecha pegado al cuadro de busqueda?
ResponderEliminarPrueba a cambiar aquí el LEFT por un RIGHT:
ResponderEliminar#menu-wrap { display:inline;float:left;margin:10px 0 10px 0;overflow:hidden;width:698px; }
mil gracias campeon... disculpa las molestias
ResponderEliminarHola olo... estoy con un proyecto nuevo http://www.misionesnight.com.ar/ y nose donde poner el borde para las imagenes ni donde poner el "hover" para q cambie de color el titulo de los post cuando paso el mouse... gracias capo
ResponderEliminarPara las imágenes, en tu caso creo que tendrías que crear la clase
ResponderEliminar.entry img, de la misma manera que aquí se explica para .post img.
Para el título de los posts, esta es la clase
.post-title h2 a{
color:#fff;
}
... y la que tines que hacer nueva es
.post-title h2 a:hover {...
Hola! Estoy trasteando un poco con los bordes de las fotos en mi blog. Me gustaría saber si existe la opción de que se enmarquen sólo las fotos que subo a los posts porque lo que me pasa es que tengo una imagen a modo de separador entre posts y también se me enmarca. Muchas gracias por tu ayuda! un saludo
ResponderEliminarHola Naoko. Podrías cambiar de ubicación la imagen que hace de separador, pero creo que lo más rápido es que, en tu caso, en lugar de usar .post img, el borde lo apliques a .post-body img
ResponderEliminarSi no tienes ese selector, simplemente lo añades a tu código:
.post-body img {
border...etc.
Gracias,
ResponderEliminarMe Sirvio Mucho,
Ya Coloque el Borde,
Se Ve Muy Bien,
Suerte !
Hola Oloman.
ResponderEliminarMuchas gracias por tu blog, pues a los supernovatos nos ayuda a crear nuestro blog.
Mi duda:
Tengo un blog dedicado a mis fotografías y quiero ampliar el margen de las mismasm, pero no encuentro la secuencia .post image por ningún sitio.
Solo me permite, a través del diseñador de plantillas, cambiarle el color, no el tamaño.
Espero puedas ayudarme.
Un saludo
Hola Nacho.
ResponderEliminarMe dan yu-yu las plantillas del diseñador, pero prueba con .post-body img
Si no lo tienes, simplemente añádelo con las propiedades que te interesen, en la parte CSS.
Hola Oloman ;)
ResponderEliminarMe gustaria poner en las imagenes del blog un efecto, como si estuvieran pegadas con celo. habia pensado en sustituir el marco por defecto, por una imagen que se sobreponga y me haga esa funcion. ¿Me podrias dar un poco de ayuda, o expicarme como podria hacerlo?
Muchas Gracias Nuevamente por adelantado ;)
Codobess@ eso estaría muy bien, pero no se me ocurre cómo hacerlo de una forma eficaz. Me explico.
ResponderEliminarLa única forma que conozco para hacerlo automáticamente es precisamente alterando las propiedades de .post img. Se podría poner un fondo como tu dices, pero tendrían que ser todas del mismo tamaño para que quedara bien, ya que de lo contrario, la cinta quedaría descentrada en muchas ocasiones.
Por otra parte, si se trata de un fondo, no se podrían superponer a la imagen nada, por lo que la cinta quedaría parcialmente por detrás.
Quizás se podría hacer manualmente, es decir, añadiendo a las imágenes a las que se quiera dar este efecto una clase que la haga cambiar de aspecto.
Otra posibilidad es un script que realice la tarea, pero también habría que añadir al menos una clase manualmente a las imágenes.
En cualquier caso le voy a echar un vistazo, porque es algo que siempre he querido solucionar.
Buenas, buscando por la web he visto que hay un tipo de borde llamado "double". El problema es que yo quiero establecer el tamaño del borde interior, del espacio intermedio y del borde exterior ¿eso es posible? Por ejemplo, quiero que el borde interior sea de 1px, el espacio intermedio de 8px y el borde experior de 1px.
ResponderEliminarNo me sé todas las reglas CSS al dedillo, pero yo juraría que no se puede controlar ese espacio.
EliminarSin embargo, para lo que quieres puede que te sirva padding: Ver enlace
Hola Oloman
ResponderEliminarcreo que este es el post indicado para hacerte esta pregunta:
necesito eliminar los bordes/sombras de las imagenes del sitio (tanto de las entradas como de las paginas) en una plantilla dinamica de blogger.
aquí se aprecia el problema (las imagenes con borde, las que no lo tienes es porque han sido copiadas de otro blog y han mantenido su formato sin borde)
he probado muchos codigos css y nada, por favor ayudame, muchas gracias!!
ah! la página es http://www.mistahdijah.blogspot.com
ResponderEliminarhe podido ocultar los bordes agregando en el codigo html de la respectiva entrada este codigo justo despues del de la fuente de imagen:
style="border-width: 0px; margin-top: 5px; overflow: hidden; padding: 0px;
y me ha funcionado, pero es demasiado engorroso hacer esto imagen x imagen
existe un codigo css para eliminar los bordes de todas las imagenes?
Ayer te contesté en otro hilo en el que dejaste la misma pregunta ;)
EliminarHola Oloman, lo de los bordes en imagenes ya lo se hacer pero lo que no se es poner bordes solamente en las imagenes que aparecen en una etiqueta en concreto.
ResponderEliminarNo se en qué parte de la plantilla ni qué condición hay que poner para que salga así.
Ya me ayudaste para que el botón Pint apareciese en esa etiqueta pero, en el caso de los bordes, no se construir la condición, me puedes ayudar?
Salu2
Esa etiqueta donde aparecen las imagenes que quiero poner borde, está dentro de una de las subpestañas del menú, es decir, que al ser un elemento html y darle estilo a esa subpestaña, lo que se bordea es la subpestaña, no las imagenes.
EliminarPues la manera es la misma que vimos en 11.1 de aquel post, pero dentro de la condición habría que poner unas etiquetas STYLE con ese CSS especial que quieres:
Eliminar<style>
.post img {border: 1px solid blue;}
</style>
Eres un crack!!!! funcionó de maravilla... lo estaba haciendo manualmente en cada una de las imagenes de los post y quería eso, hacerlo en la plantilla para que fuera automático.
EliminarGracias de nuevo Oloman
Acabo de entrar y veo que todas las imagenes del blog estan enmarcadas con la etiqueta que metí dentro de la condición que, en teoría sólamente vale para una determinada etiqueta.
EliminarHe buscado y eliminado la condición general para los post img pero me sigue apareciendo
Pues eso es porque la condición no está bien hecha o bien porque el estilo para .post img no lo pusiste dentro de la condición. No hay otra y no puedo ser más concreto porque desde aquí me es imposible ver nada que esté condicionado.
EliminarPerdona que no te comenté pero sí que puse bien la condición pero se ve que era un problema de blogger. Al dia siguiente ya estaba todo solucionado y se veía bien
ResponderEliminarSalu2