22 octubre 2014

COMO QUITAR PONER O MODIFICAR EL MARCO Y LA SOMBRA EN DISTINTAS PARTES DEL BLOG

    Si el otro día en el tutorial de diseño de blogger vimos cómoquitar, poner o modificar el marco y la sombra en una o varias fotos del blog , hoy vamos a ver cómo quitar, poner o modificar el marco y la sombra en distintas partes del blog.



    Es muy fácil, sólamente necesitamos ir a
PERSONALIZAR PLANTILLA>>AVANZADO>>AÑADIR CCS y copiar este código:



/* Sombra y borde 
----------------------------------------------- */
.content-outer

-moz-border-top-left-radius: 5px; 
-moz-border-bottom-right-radius: 5px; 
-moz-border-top-right-radius: 5px; 
-moz-border-bottom-left-radius: 5px; 

-webkit-border-top-left-radius: 5px; 
-webkit-border-top-right-radius: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 

border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
border-bottom-left-radius:5px; 
border-bottom-right-radius: 5px; 

-moz-border-top: 5px double #666666; 
-moz-border-bottom: 5px solid #666666; 
-moz-border-right: 5px double #666666; 
-moz-border-left: 5px solid #666666; 

-webkit-border-top: 5px double #666666; 
-webkit-border-bottom: 5px solid #666666; 
-webkit-border-right: 5px double #666666; 
-webkit-border-left: 5px solid #666666; 

border-top: 5px double #666666; 
border-bottom: 5px solid #666666; 
border-right: 5px double #666666; 
border-left: 5px solid #666666; 


-moz-box-shadow: 0 0 15px 5px #999999; 
-webkit-box-shadow: 0 0 15px 5px #999999; 
box-shadow: 0 0 15px 5px #999999; 



/* Fin sombra y borde 
----------------------------------------------- */


    La línea escrita en rosa nos indica a qué parte del blog le afecta el código del borde y la sombra, algunos ejemplos:


.main-outer
.post

.widget






    ¿Y cómo localizamos todas las partes del blog que queremos "ensombrecer"? Pues yo lo hago de la siguiente forma:
PLANTILLA>>HTML>>Ctrl+F para abrir el buscador y buscamos: /*
    Nos saldrán varias partes escritas así:

/* Posts
----------------------------------------------- */

    Esas son las partes principales: cuerpo, cabecera, columnas, widgets... Justo debajo nos saldrán partes así:

                .date-header span {
               background-color: $(date.header.background.color);
               color: $(date.header.color);
               padding: $(date.header.padding);
               letter-spacing: $(date.header.letterspacing);
               margin: $(date.header.margin);
               }

               .main-inner {
               padding-top: $(main.padding.top);
               padding-bottom: $(main.padding.bottom);
               }

               .main-inner .column-center-inner {
               padding: 0 $(main.padding);
               }

              .main-inner .column-center-inner .section {
              margin: 0 $(main.section.margin);
              }

              .post {
              margin: 0 0 $(post.margin.bottom) 0;
              }

    Esas son las subpartes. Por ejemplo puedes poner sombra a la fecha (date) de las estradas (post) en vez de a toda la entrada. Si nos fijamos algunas subcategorías están escritas así:

              .main-inner .column-center-inner .section

    Eso serían tres subpartes diferentes escritas así porque comparten las mismas características.

    La parte de código escrita en verde corresponde a las esquinas redondeadas, la azul al estilo del borde y la morada a las sombras (pincha aquí para ver estilos de bordes y de sombras). Los números precedidos de # indican el color.  (Las líneas que empiezan por -moz o -webkit sirven para que se vea en todos los navegadores igual y deben llevar los mismos valores.) Ahora a trastear y a descubrir mil y una combinaciones y diseños con los marcos y las sombras. Y recuerda guardar una copia de la plantilla antes de modificarla.




Sígueme en:



http://eepurl.com/bct2DT

2 comentarios:

  1. Gracias! Muy útil y bien explicado, lo guardare por si lo necesito!

    ResponderEliminar
    Respuestas
    1. Gracias a ti Lianxio. Ay eso espero, haberme explicado bien jaja. Un saludo.

      Eliminar

Related Posts Plugin for WordPress, Blogger...