FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Redondear las puntas de todo tu blog

12 may. 2013
Hola hermosas! Antes que nada, espero que tengan un buen domingo :) Yo les traigo este tutorial que me pidieron ayer por Ask y la verdad es que lo tenía bastante pendiente. Espero que les sirva!


Este tutorial esta pensado para la plantilla "Sencillo" ya que sólo esta y una más (que ahora no recuerdo el nombre pero que no es muy utilizada) tienen fondo para el contenido (sidebar+entradas). 

Para otras plantillas el procedimiento sería distinto ya que habría que ponerles fondo primero, antes de pensar en redondearlos; por esto es que si lo prueban en una plantilla distinta a la Sencillo no les va a salir bien (:

1. Vamos a "Plantilla" y entramos en "Editar HTML".
2. Damos clic a "Plantilla de formato" y luego apretamos CTRL+F.

3. Buscamos: .content-outer { y borramos esto que aparece justo debajo:
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
Fijense que les tiene que quedar la última línea: margin-bottom

4. Inmediatamente después les saldrá .content-inner { Allí agregamos:
-moz-border-radius: 25px;
-goog-ms-border-radius: 25px;
-webkit-border-radius:25px;
border-radius: 25px;
Le pueden cambiar el valor para que quede a su gusto. Recuerden que cuanto más grande sea el valor (hasta 100px) más redondo se verá.

5. Si quieren ponen 'Vista previa' para verificar que todo este bien y luego guardan los cambios :)

Y ya está. Cualquier duda que tengan, dejan un comentario :) Un besito!

11 comentarios :

  1. Respuestas
    1. De nada! Me acabo de acordar que te debo la portada que me habías pedido!!! Dios, que desastreeeeeeee :(

      Eliminar
  2. Cata me alegro mucho que volvieras y publicases cosas, ese tutorial es genial yo ya le tenia y queda perfecto.
    Yo venia a pedirte si puedes decirme como se puede hacer que quede el blog asi http://www.blogskins.com/apply.php?sid=395047&action=Preview
    es decir la cabecera debe quedar transparente con el photoshop,¿ pero que hay que hacer para hacer todo una cajita asi? ¿Se podria hacer? Es que lo vi hace mucho y ni idea de hacerlo, vi un post reciente tuyo pero es de separar entradas en cajas yo me refiero a todo el blog juntando gadgets y entradas como ahi se ve y que quede fondo.
    Buenomuchas gracias de todas formas, se te echaba de menos, besazos :)

    ResponderEliminar
    Respuestas
    1. Hola Sandra!
      Creo que estas usando la plantilla Sencillo, suponiendo que es la usas habitualmente te explico cómo debes hacer para lograr lo que quieres hacer :) Si tienes pensado usar otra plantilla, dejamelo saber y te cuento cómo hacerlo.

      Bien es así.
      Primero ve al código y busca:

      .content-outer {

      y borra lo que contiene que es esto:

      -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
      box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
      margin-bottom: 1px;

      Luego, apenas un poquito más abajo te sale esto:

      $(content.background.color.selector) {

      También borra lo que te sale (es una sola línea, antes de la llave, obviamente)

      Y después buscas .main-outer {

      background-color: #fff;

      Le cambias por el color de fondo que tu quieras, le puedes agregar un borde o todo lo que tu quieras y ya está. Dale a vista previa y prueba a que quede todo bien. Cualquier cosa que no salga bien, me avisas y me vuelvo a fijar :) Besos.

      Eliminar
  3. Graciias Cata.. ¿Me dirias por favor como se llama la chica de la foto ?

    ResponderEliminar
  4. ¡Hola Cata! Me encantó este tutorial, lo veo muy bonito y sencillo... Pero tengo un problema. Al buscar en mi plantilla esto: .content-outer { no me da ningún resultado por lo que no puedo hacer nada... ¿Sabrías decirme por qué pasa esto?

    ResponderEliminar
    Respuestas
    1. Puede ser por la plantilla, lo que pasa es que en las demás (este tutorial esta pensado para la "Sencillo") es bastante distinto, puesto que no tienen un fondo que ocupe entradas, sidebar y header. Si me dices que plantilla usas, te explico :)

      Eliminar
  5. Muchas gracias :) Por cierto, yo hice la propuesta en el Ask :)

    ResponderEliminar
    Respuestas
    1. Jo, de nada! Espero que te sirva!!! Un besazo :)

      Eliminar
  6. Porfavor me puedes decir como se pone a la imagen cuando lo subes a la entrada o sidebar :). Porfavor

    ResponderEliminar