Plantilla Blogger. Borde imágenes | Oloblogger Este truco es muy fácil. Buscamos el siguiente código en la plantilla. Con CTRL+F se localiza muy rá...

24 de octubre de 2007

Plantilla Blogger. Borde imágenes

Este truco es muy fácil. Buscamos el siguiente código en la plantilla. Con CTRL+F se localiza muy rápido.

.post img {
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;
...

...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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

35 comentarios :

  1. Muchas gracias por el post, me ha sido de gran utilidad Ctrl+D

    ResponderEliminar
  2. Hola
    En mi plantilla no está el código: .post img {
    ¿Qué puedo hacer?¿Puedo agregarlo y en qué parte?
    Gracias

    ResponderEliminar
  3. Puedes agregarlo sin ningún problema Abril. Por ejemplo, detrás de
    .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;
    }

    ResponderEliminar
  4. Listo!
    Muchísimas gracias.

    ResponderEliminar
  5. 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.

    ResponderEliminar
  6. hola 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...
    No 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

    ResponderEliminar
  7. Hola Matías.

    Eso 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.

    ResponderEliminar
  8. 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.

    http://sites.google.com/site/bloggertricksjs/Home/autoreadmorethumb.txt

    estoy en bolas...

    ResponderEliminar
  9. 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.

    Con 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!

    ResponderEliminar
  10. 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
    mi 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

    ResponderEliminar
  11. ¡Ooops! Se me olvidó marcar en negrita el cambio, pero ya veo que lo has visto igual.

    Con 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.

    ResponderEliminar
  12. 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?

    ResponderEliminar
  13. Prueba a cambiar aquí el LEFT por un RIGHT:

    #menu-wrap { display:inline;float:left;margin:10px 0 10px 0;overflow:hidden;width:698px; }

    ResponderEliminar
  14. mil gracias campeon... disculpa las molestias

    ResponderEliminar
  15. Hola 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

    ResponderEliminar
  16. Para las imágenes, en tu caso creo que tendrías que crear la clase
    .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 {...

    ResponderEliminar
  17. 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

    ResponderEliminar
  18. Hola 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

    Si no tienes ese selector, simplemente lo añades a tu código:

    .post-body img {
    border...etc.

    ResponderEliminar
  19. Anónimo14/6/10 2:06

    Gracias,
    Me Sirvio Mucho,
    Ya Coloque el Borde,
    Se Ve Muy Bien,
    Suerte !

    ResponderEliminar
  20. Hola Oloman.
    Muchas 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

    ResponderEliminar
  21. Hola Nacho.

    Me 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.

    ResponderEliminar
  22. Hola Oloman ;)
    Me 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 ;)

    ResponderEliminar
  23. Codobess@ eso estaría muy bien, pero no se me ocurre cómo hacerlo de una forma eficaz. Me explico.

    La ú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.

    ResponderEliminar
  24. 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.

    ResponderEliminar
    Respuestas
    1. No me sé todas las reglas CSS al dedillo, pero yo juraría que no se puede controlar ese espacio.

      Sin embargo, para lo que quieres puede que te sirva padding: Ver enlace

      Eliminar
  25. Hola Oloman
    creo 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!!

    ResponderEliminar
  26. ah! la página es http://www.mistahdijah.blogspot.com

    he 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?

    ResponderEliminar
    Respuestas
    1. Ayer te contesté en otro hilo en el que dejaste la misma pregunta ;)

      Eliminar
  27. Hola 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.

    No 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

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
    2. Pues 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:
      <style>
      .post img {border: 1px solid blue;}
      </style>

      Eliminar
    3. 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.

      Gracias de nuevo Oloman

      Eliminar
    4. 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.

      He buscado y eliminado la condición general para los post img pero me sigue apareciendo

      Eliminar
    5. 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.

      Eliminar
  28. Perdona 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

    Salu2

    ResponderEliminar