Poner borde a los elementos de la sidebar de forma independiente

¡Hola!

Hoy os enseñaré a como poner borde a los gadgets/widgets de la sidebar (barra lateral del blog) de vuestro blog, de forma independiente. Para ver un ejemplo puedes ir a mi blog.

Para poder agregarle los bordes solo tenéis que ir a Plantilla >> Editar HTML >> apretar CTRL+F y buscar ]]></b:skin>



A continuación, arriba de lo que hemos buscado, insertamos el código que os dejo aquí abajo.

.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 30px 0;
}

Si queréis cambiar el color del borde, solo tienes que cambiar el código #000 por el código que corresponda al color que quieras.  AQUÍ tenéis una página para elegir colores.
Los códigos -moz-border-radius:0px; y -webkit-border-radius:0px; sirven para poner los bordes redondeados. Si aumentamos el valor de 0px, el borde se irá redondeando progresivamente.

Espero que os haya servido, y ahora sí, me despido (¿menuda rima que me acaba de salir, no?)


El autor.



John Grey

Estudiante de letras y futuro proyecto de corrector. Amante de los buenos libros acompañados de una buena trama. Me caí por la madriguera del conejo blanco... y desde ahí escribo. Curioso del HTML y algo parecido a un intento de escritor. Ya que has hecho el esfuerzo de leer mi pequeña bio, solo decirte ¡HOLA :D! Twitter  Blog



12 comentarios:

  1. Hola! Hace tiempo que cuando intento seguir los pasos de un tutorial, al buscar lo que hace falta, en este caso ( ]]>) no me aparece...el buscador me dice 0/0 y en este caso me ha pasado exactamente lo mismo.
    ¿Sabrías decirme por qué me pasa esto?
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Eso es porque busca el dato en la página de Blogger. Tienes que dar click a el cuadro dónde esta todo el código y luego darle al buscador. Así el buscador buscará en el cuadro del código, y no en la página. Un beso y espero que te sirva !!^^

      Eliminar
    2. Hola! lo he probado y me ha servido! Intentaré hacer el tutorial porque ahora ya puedo seguir los pasos sin problemas^^
      Muchísimas gracias, llevaba mucho tiempo preguntándome por qué no me aparecían y ya veo que era mucho más sencillo de lo que pensaba.
      Un beso y millones de gracias :)

      Eliminar
  2. Muchas gracias por este tutorial! Este no lo conocía.
    Un beso

    ResponderEliminar
  3. Una cosa, a mi no me funciona, te dejo aquí parte del código a ver si puedes ayudarme,
    porfavor.

    .column-right-outer .widget, .column-left-outer .widget {
    border: 1px solid #8C3F00;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:10px;
    margin: 30px 0;
    }
    ···

    ResponderEliminar
  4. Una preguntica, ¿es posible dable grosor al borde?

    ResponderEliminar
    Respuestas
    1. En esta parte del código:
      border: 1px solid #000;
      Cambia el 1 px por el valor que quieras (yo suelo usar 5, pero como tú veas) y solucionado :3

      Eliminar
  5. ¡Hola!
    Tengo una preguntilla... ¿Para aplicar el estilo SOLO a un widget, cómo sería? Si pongo ese código se aplica a todos :/ ¡Gracias!

    ResponderEliminar
    Respuestas
    1. http://soykarma.blogspot.com/2015/03/tutorial-poner-borde-solo-un-elemento-o.html

      Espero te sirva :) igual andaba buscando este tutorial...

      Eliminar
  6. Hola.

    ¿Cómo podría poner una imagen que tengo yo como bordes?

    Gracias.

    ResponderEliminar
  7. Sirve de todos modos si ya tengo una plantilla descargada de otra pagina(por ejemplo themexpose) la cual estoy editando ahora ?

    ResponderEliminar

 

Facebook

Si tienes algún problema con tu plantilla, quieres recomendarnos algún tutorial o simplemente quieres estar al tanto de todas las novedades de HTML Para Torpes, puedes seguir nuestra página en Facebook.

Torpes

Seguir por e-mail

We use...

A veces el HTML y el CSS producen verdaderos dolores de cabeza. Aquí intentaremos solucionarlos de la forma más sencilla posible.

HTML para Torpes está formado por un grupo de blogueros interesados por el diseño web que colaboran de forma desinteresada, por lo que pedimos comprensión a la hora de evaluar el contenido y agradecemos cualquier sugerencia.

Siempre con la tecnología de: