SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
PRÓXIMO CURSO

CREA TU CANAL DE YOUTUBE

Empieza y no te compliques
¿Te interesa?
Suscríbete y envíame un e-mail para informarte y/o reservar tu plaza.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


26 ago. 2014

Codigo CSS para personalizar titulos de gadget en tu sidebar


Personaliza los titulos de los gadgets y widgets


Feliz Martes a todxs¡¡


Hoy traigo un tutorial de El perro de papel que lo uso muchísimo, pero no solo para lo que realmente se explica en el tuto si no que uso los códigos que proporciona para aplicarlo en otras posibles ocasiones y poder personalizar texto. Como por ejemplo en el menú de páginas.

Aquellos que estéis empezando o llevéis poco en esto os recomiendo visitar directamente el tutorial de El perro de papel para ver su post alucinante para personalizar la sidebar de vuestro blog. Es increíblemente bueno este post, no lo perdáis y guardarlo bien. 

Después de visitar a Celia podréis volver y encontrar cierta utilidad en mi post. Si por el contrario ya tenéis algo de conocimiento en este mundo podéis quedaros sin visitar a Celia todavía, pero tarde o temprano debéis entrar en su espacio ;)

Yo os voy a resumir el código total explicando para qué sirve cada código, ya que a mi me vendría mejor para otros usos que estuviera tal como os lo voy a exponer, porque su post es extenso y tengo que subir y bajar constantemente para poder realizar ciertos cambios concretos. Pronto me comprenderéis :)



EL CÓDIGO para personalizar títulos de gadgets

(para ver dónde se coloca ve al post de El perro de papel, gracias):


.sidebar h2 {

font-family: 'Waiting for the Sunrise', cursive; /*Tipografía de texto*/
font-size:(nº)px; /*Tamaño de texto*/
color: #color; /*Color de texto*/
text-transform: uppercase; /*Texto en mayúscula*/
      text-transform: lowercase; /*Si quieres minúsculas*/
letter-spacing: (nº)px; /*Espacio entre letras*/
text-align: center; /*Alineación centrada del texto cambia según prefieras a right-derecha left-izquierda*/
background-color: #color; /*Color de fondo*/
border-radius: 50px; /*para bordear todas las esquinas*/
      border-radius: 50px 0px 0px 0px; /*Si prefieres redondear la esquina arriba a la izquierda*/
      border-radius: 50px 50px 0px 0px; /*Para redondear las dos esquinas superiores*/
      border-radius: 50px 0px 50px 0px; /*Para redondear la esquina arriba izquierda y abajo derecha*/
      border-radius: 50px 0px 0px 50px; /*Para redondear las dos esquinas de la izquierda.*/
border: (nº)px solid #color; /*Para poner un marco de línea sólida alrededor.*/

Sustituye “solid “ para a conseguir el efecto deseado;
solid → solida
dotted → punteada con cuadraditos
dashed → punteada con rayas
double → doble línea sólida

O con efecto de botón, con sombras:
groove → marco con sombra oscura
ridge → marco con sombra clara
inset → sombra a la derecha abajo
outset → sombra arriba a la izquierda

Si lo que quieres es poner el borde solo en ciertas partes presta atención


Tal y como lo tenemos a continuación solo tendríamos
LÍNEA ARRIBA Y ABAJO



border-top: (nº >0)px double #color;
border-bottom: (nº >0)px double #color;
border-right: 0px double #color;
border-left: 0px double #color;

top → arriba
bottom → abajo
right → derecha
left → izquierda


SOLO A LOS LADOS

border-top: 0px double #color;
border-bottom: 0px double #color;
border-right: (nº >0)px double #color;
border-left: (nº >0)px double #color;

DERECHA DOBLE Y ABAJO SÓLIDA

border-top: 0px double #color;
border-bottom: (nº >0)px solid #color;
border-right: (nº >0)px double #color;
border-left: 0px double #color;
padding: (nº)px; /*espacio entre los bordes para que se alejen del texto*/

→ Si queremos que quede más pegado abajo y más alejado de arriba o viceversa, persolanizamos por separado cada espacio:

padding-rigth: (nº)px;
padding-left: (nº)px;
padding-top: (nº)px;
padding-bottom: (nº)px;


Si de fondo prefieres poner una imagen que has diseñado para el fondo de tu menú entonces anota;

IMAGEN DE FONDO

Este es el código para sustituir por el background-color: #FFFFFF; si queremos insertar de fondo una imagen:

background: url(URL de la imagen) bottom no-repeat; 


Por último os pego un código que usé hace un tiempo , el cual su resultado es este :

Si te gusta puedes usarlo, quizás le cambiaría el tamaño del texto porque queda muy grande, pero en fín, ahora ya puedes modificar lo que quieras! :)

.sidebar h2 {
font-family: 'Amatic SC', cursive; /*Tipo de letra*/
font-size:30px;
/*Tamaño de texto*/
color: #ffffff; /* Colore del texto*/
text-transform: uppercase;/*Para que el texto se transforme a mayúsculas*/
letter-spacing: 3px;/*Espacio entre carácteres*/
text-align: center;/*Situación del texto en el recuadro, he puesto centrado*/
background-color: #ffd0c4;/*Color de fondo*/
padding-top: 5px;/*Separación arriba*/
padding-bottom: 5px;/*Separación abajo*/
border-radius: 50px 0px 0px 50px;/*Efecto redondeado a la izquierda, en las esquinas de arriba y de abajo*/
}




ATENCIÓN

-Son importantes los ; (puntos y comas)del final de cada personalización y detalle, porque es como el punto que lo cierra, si no te dará error.

-Son importantes los } de abrir y cerrar, por el mismo motivo que el anterior.

-No son importantes los “no números”, de hecho si no pones nada aquí 

border-radius: 50px 0px 0px 0px;

no va a pasar nada, simplemente no aparecerá. De hecho yo tengo casi todos los códigos en cero, por si quiero cambiarlo he decidido dejarlo ya copiado. Pero queda mucho más limpio si lo eliminamos.


- Eso mismo que comentaba, si no queremos ningún borde, o marco, basta con eliminar ese detalle, esa línea.

- Para conseguir códigos de colores HTML ve a este enlace donde puedes sacar códigos, pero te recomiendo que tengas los códigos anotados de tu paleta de colores para el blog. Así cuando necesites usarlos para este tipo de cosas sólo tendrás que escribirlo ;) Si necesitas más ayuda sobre el diseño inicial de tu blog entra en mi post Como empezar un blog II.

- Si vas a usar una imagen de fondo en vez de un color deberás tener cuidado con las medidas, Celia ya nos lo explica. Además podemos saber el ancho de nuestro sidebar de la siguiente manera:

Abrimos la ventana de Ver Blog → en nuestro blog colocamos el ratón sobre alguno de nuestros títulos de la sidebar y damos click con el botón derecho → buscamos inspeccionar elemento y le hacemos click.

Entonces aparecerá seleccionada la zona y un cuadradito con la medida. Además en el cuadro que se abre abajo a la izquierda encontrarás la selección concreta del título y así, al pasar el ratón por encima directamente te saldrá la medida :) 

Esta también es muy buena manera para copiar los códigos de colores que existen en el blog. Estos están en el recuadro derecho que sale abajo. Es algo que uso muchísimo. Espero que este truquillo te ayude también a ti ;)


- Recordar que donde poner COLOR hay que escribir el código del color elegido, donde pongo (nº) o algo parecido es siempre sustituido completamente por el número. En el caso de (URL de imagen) la imagen va entre esos mismos paréntesis, esos sí que permanecen.


Por último adelantaros que si no queréis tener en todos los títulos iguales de la sidebar también es posible a través de otro código que próximamente os prepararé.

Una frase para reflexionar hoy :)

Casi todo lo que realice será insignificante, pero es muy importante que lo haga.

Mahatma Gandhi



Espero que os haya gustado mi post y que os sea útil. 





Blogger Paso a Paso

  







C O M P A R T I R   Y   C O M E N T A R es gratis y a mi me ayudas mogollón!!
1 comentario
© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.