AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

La plantilla de un blog (3ª parte) El CSS

domingo, 30 de marzo de 2008

En la anterior entrada ya hemos visto las diversas secciones que aparecen en el CSS.
En casi todas ellas puedes modificar los parámetros para reacomodar las zonas del blog, sobre todo cuando añades una sidebar o decides ensanchar la zona útil.
No todas las plantillas responden de igual manera a una misma orden, así para equilibrar el reparto de zonas mi consejo sería que primero le pongas un fondo al body o al outer wrapper y luego le pongas un color de fondo al main-wrapper o main y a sidebar-wrapper y newsidebar-wrapper si la tuvieras.
De esta manera resultará más fácil reacomodar las tres zonas.
Se pueden añadir órdenes tipo padding-$startSide o pading-$endSide para que la separación entre ellos se equilibre.
---
Un ejemplo:
Estuve añadiendo una sidebar a una tictac y me encontré con este problema.
Pese a que ambas sidebars medían lo mismo, la zona de las entradas tendía a quedarse pegada a la sidebar de la izquierda, en este caso la nueva.
Fui probando con los padding y los margin de las tres zonas, añadiendo y quitando píxels e incluso órdenes, hasta dar con la medida idónea que equilibraba las separaciones.
---
Otra cuestión es la separación del contenido al borde.
Suele suceder que las entradas queden muy pegadas al borde del espacio que ocupa. También se soluciona modificando los paddings y margins, en este caso de .main .widget
---
J Miur de Vagabundia tiene varios tutoriales en los que explica con mucha claridad la diferencia entre ambos y, aunque no tengo ni su habilidad ni su experiencia intentaré explicarlo.
Simplificando mucho,
margin designa la distancia desde el borde hasta el contenido
padding la distancia del contenido al borde.
Así si varías el padding el contenido se alejará o acercará al borde, mientras que variando el margin será el borde el que se moverá.
A veces es conveniente que sea una cosa, a veces es preferible que sea la otra.
No puedo dar un sistema exacto, pues cada plantilla requiere un método, dependiendo de su construcción.
Afortunadamente disponemos de la vista previa para ir viendo el efecto de los cambios y de Borrar cambios si éstos no son efectivos.
Es por este motivo que suelo aconsejar guardar plantilla a cada cambio que hagamos que vaya bien. Nos ahorramos repetir cosas que ya hemos arreglado.
---
Cuando añadimos una orden a un código hay que tener en cuenta no olvidar ningún signo.
Así siempre cerraremos la línea con un punto y coma, pondremos el símbolo del dólar delante de una variable y la almohadilla delante de un código de color.
Si olvidamos alguna de estas cosas puede suceder que no se aprecie cambio alguno o que de error.
---
Modificaciones mas habituales
La cabecera.
Si añadimos una imagen a la cabecera, ya sea desde Editar o desde el CSS, puede suceder que quede descentrada. En este caso basta con variar la distancia a la izquierda del blog, ya sea mediante la orden padding-$startSide o padding-left, aplicada a #header, .Header o #header-wrapper, depende de la plantilla, que suele ser la primera de las definiciones que hay de header.
La segunda suele corresponder al título y la tercera al subtítulo o descripcion.
En estos últimos podemos variar la posición de las letras, o con las medidas o con su situación, añadiendo, si no estuviera, text-align:$startSide; o text-align:$endSide o text-align:center; dependiendo de donde queramos ponerlo.
Pero ¡Cuidado! si la plantilla es de las más antiguas las definiciones serán left, right o center.
Por plantilla antigua no me refiero a que sea uno de los modelos que hay en blogger, sinó que la tengas desde antes de su modificación, pues ahora todas salen con la nueva definición.
Sucede lo mismo con el footer. También podemos definir como queremos que salgan los elementos, que por defecto saldrán colocados a la izquierda, añadiendo la orden de que los centre.
---
Si queremos que las letras que salen habitualmente en mayúsculas, título, subtítulo, etc, salgan de manera normal, es decir tal como las escribas, has de buscar en cada zona esta línea text-transform: uppercase; y eliminarla. Verás que a partir de ese momento dejan de salir en mayúsculas.
Y como he comentado en el post anterior, aquí es donde añades la orden de que una variable se aplique en un sitio concreto, ya sea de color o de fuente.
---
Por ejemplo la scribe tiene pocas variables de fuentes, con lo que todo acaba teniendo una fuente y un color iguales. Añadiendo las correspondientes a las distintas zonas de escritura, puedes diferenciarlas y variar la medida de las letras, el color etc. desde fuentes y colores.
---
El CSS permite también añadir códigos completos para una zona en especial. Así, por ejemplo, si en la plantilla no está la disposición de los navegadores, (newer page, older page, y home o home page), se le pueden añadir.
También se le puede añadir el código para colocar iconos de autor y de etiquetas, o para definir el blockquote si no lo tuviera.
Como de casi todo esto hay alguna entrada, no me extiendo más.
Si en mis trapicheos con las plantillas descubro algo más que piense que debiera incluir, actualizaré la entrada.

Imprime esta entrada

10 comentarios. ¿Quieres añadir el tuyo?

  1. Anónimo ha dicho
  2. SABES QUE ES SEPARAR PARRAFOS? PUUUUFFFF QUE AGOBIO

  3. Marian ha dicho
  4. Cuanto más leo, más me lio. Tengo la cabeza llena de palabrejos. Llevo toda la tarde para terminar de acomodar el triple footer en mis páginas y ya no se que mover.Por hoy desisto pero ¿en algún lugar de tu blog tienes un diccionario de palabros? o explicaciones de diferencias entre margin y padding, startSide y endSide...etc que me enrollo.¡¡Ah!! sigo pensando que me gusta la seda azul.
    Besos. Marian

  5. Eulalia ha dicho
  6. Anónimo:
    Si, se lo que es separar párrafos, pero acabé estas entradas a las tres de la madrugada y no se si te has percatado que están justificadas. Al hacerlo, las separaciones se esfuman y has de retocar la entrada a través del HTML. Como comprenderás a esas horas no estaba para muchos retoques. Pensé hacerlo hoy, pero se da el caso de que trabajo, entro a las 7:30 de la mañana y acabo de llegar. Así que ¡tranqui! que en cuanto me apetezca lo haré.

  7. Eulalia ha dicho
  8. Marian: Me acabas de dar una idea genial. ¿Porqué no? Dame tiempo y montaré un diccionario de palabros. Jeje.
    Si te gusta la seda azul ya sabes donde está. Besos.

  9. ysK ha dicho
  10. hola Eulalia, de verdad esta muy interesante tu blog... lo recorri entero pero no logre la respuesta a lo que busco, ojala me puedas ayudar
    tengo mis imagenes en photobucket y quiero agregarlas a la pagina para que se vean como parte del diseño no como una entrada. He visto que en algunos blog pasan como marquesinas de fotos.
    Te agradeceria inmensamente si me orientas... es que soy nueva en esto

  11. Eulalia ha dicho
  12. ysk:
    Lo que he visto en algunos blogs es un slide colocado en un elemento y añadido encima de las entradas. No sé si te referiras a esto.
    Yo tenía uno en otro blog, colocado debajo de las entradas.
    Si no es esto, déjame la dirección de algún blog donde lo hayas visto, le echaré un vistazo y te diré como hacerlo.
    Besos.

  13. ysK ha dicho
  14. hola, por ejemplo en http://www.mefb.blogspot.com/ hay algo como a lo que me refiero, en la columna derecha de la pagina
    Te invitaria a mi blog pero estoy recien empezandolo y no tiene casi nada, asi es que te agradeceria mucho si pudieras ayudarme :-)
    soy mas que principiante...
    SALUDOS

  15. Eulalia ha dicho
  16. Si, Ysk es lo que me pensaba. Es un Slide. Este está montado con photobucket. Hay varios sitios donde puedes preparar uno y te dan un código para ponerlo en un elemento HTML/Javascript. El que yo usé me parece que era de esta página.
    Saludos.

  17. ysK ha dicho
  18. hola, por ejemplo en http://www.mefb.blogspot.com/ hay algo como a lo que me refiero, en la columna derecha de la pagina
    Te invitaria a mi blog pero estoy recien empezandolo y no tiene casi nada, asi es que te agradeceria mucho si pudieras ayudarme :-)
    soy mas que principiante...
    SALUDOS

  19. ysK ha dicho
  20. gracias Eulalia
    intentare lograr hacerlo

    estan buenisimas las ayudas en tu blog

    saludos

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.