Viajar por Europa

mayo 07, 2011

como subrayar titulos widget

Como subrayar los títulos de los widget en las nuevas plantillas es fácil,  hay dos caminos. El camino más fácil es con el "diseñador de plantilla" pero hay plantillas que no ofrecen ésta posibilidad entonces para subrayar los widgets o los gadgets necesitamos unos retoques en el HTML de la plantilla del nuevo blogger.


Vamos a ver como subrayar los widgets o los gadgets en las nuevas plantillas, con el diseñador de plantilla y retocando el HTML y vamos a ver como  el subrayado en los widgets de las plantillas mínimas de blogger.

Si lo que pretendes es el subrayado completo del texto que integra el  titulo de los widgets de tu blogger entonces la solución (probada en plantilla nueva "simple" con doble columna: izquierda y derecha ) es muy fácil, simplemente entras en HTML y buscas ]]></b:skin>, justo antes de esta linea pegas lo siguiente:

.main-inner .sidebar .widget h2 {
text-decoration:underline;
}


Ejemplo:   

ESTE TITULO
DE MI WIDGET
     

Si lo que pretende es un subrayado consistente en una linea bajo los títulos de los widget entonces lee lo que sigue:

Ejemplo:

ESTE TITULO
DE MI WIDGET______________



Plantillas Nuevas

Método utilizando el diseñador de plantilla para subrayar los widgets o gadgets:
Subrayar los widgets con el diseñador de plantilla.

Solo tienes que acceder a diseño y entrar a diseñador de plantilla, una vez en la pantalla de diseñador de  plantilla entre las distintas opciones: fondo, ajustar ancho, diseño o avanzado, eliges "avanzado" tienes unas serie de opciones: Body text, background, enlaces, titulo del blog.....titulo de entrada y título del gadget, acentos y añadir CSS. Una aclaración acentos no tiene nada que ver con acentos ortográficos, acentos es una burda traducción de accents.



 a ésta pantalla se ha llegado a traves de diseño, diseñador de plantilla, Avanzado y Título del Gadget. No obstante hay plantillas de las nuevas que no aparece el Color de Biselado del Título
Fuente de título-color del titulo y biselado de título
En éste paso seleccionamos Titulos del Gadget y entonces en una nueva ventana aparece tres opciones: Fuente del texto, color del título y color del biselado. Si le das color de biselado, verás en la pantalla de muestra que aparece debajo la lineas debajo de los títulos de los Gadgets o Widgets.

No obstante hay otras plantillas que no tienen esta opción, y me imagino que es donde tenemos problemas para poner los subrayados a los titulos de los widgets.

Metodo para subrayar títulos de widgets o gadgets mediante ajustes de HTML y CSS.
Este método es igual de fácil simplemente porque hay que hacer unos ajustes en el HTML.
Tendramos que entrar en la edición HTML de la plantilla (ya sabes a traves de diseño)  sacar una copia de seguridad de la plantilla y despues buscar:


En caso de no poder subrayar el título del gadget mediante el
diseñador de plantilla, entraremos en código HTML y busca
la linea siguiente en azul y sigue las  instrucciones, es  fácil
Primero: Localiza la linea siguiente y después de localizarla sigue las instrucciones.

<Group description="Gadget Title" selector="h2">

Ir bajando las lineas hasta encontrar la linea que contiene widget.title.text

DESPUES DE ENCONTRAR LAS LINEAS SIGUIENTES:

<Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#2b3a66"/>

AÑADIR LO QUE INCLUYO A CONTINUACION

<Variable name="widget.title.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#2b3a66"/>

Segundo:

Hay que buscar /* Main o bien buscar las instrucciones siguientes:

.main-inner .sidebar .widget h2 {
  border-bottom: 1px solid $(widget.title.border.bevel.color);
}

Y a continuación de ellas copiar y pegar las siguientes:

.main-inner .sidebar .widget h2 {
 border-bottom: 1px solid $(widget.title.border.bevel.color);
}

Ejemplo de plantilla nueva de blogger que ya trae la opción de subrayar los Gadgets: Ethereal de Jason Morrow

Plantilla mínima.
Poner una linea o un subrayado al titulo del widget o gadget.

En las plantillas mínimas las propiedades para el titulo del widget las encuentras en #sidebartop h2 luego para poner una linea bajo el título creo primero tienes que buscar #sidebartop h2 (ya sabes lo de siempre Diseño, edición HTML y CTRL+F para buscar más rápido) a continuación de "sidebartop h2" vienen escritas todas las características  y propiedades incluye entre una de las lineas o al final lo que incluyo a continuación con rojo.  Puedes hacer una vista previa y si todo es correcto guardar plantilla.
 La línea a incluir es : border-bottom: 1px solid #ffffff; (por supuesto #ffffff lo cambias por el código que quieras para darle el color a la linea de subrayado que elijas y 1px es el grosor de la línea, si la quieres más gruesa puedes poner 2px, si prefieres puntos en lugar de una linea contínua entonces cambias solid por dotted ).

He intentado ser lo más claro posible. Todo lo que aquí expongo para subrayar los títulos de los gadgets o widgets, lo he probado previamente, así que salvo error u omisión, debe funcionar. Suerte.

17 comentarios:

  1. Hola! El codigo que debo modificar es :


    Group description="Gadgets" selector="h2">






    Es diferente al que pusiste como ejemplo... ¿en este caso como lo modifico?

    ResponderEliminar
  2. Si es ese al que tienes que añadirle lo que indico. Al final te queda.(ojo haz una copia de la plantilla antes que nada)
    Al final quedara así:






    Has tenido que añadiri las lineas que van desde name="widget.title.border.bevel......

    ok?

    ResponderEliminar
  3. Disculpame pero no puedo visualizar lo que me mandás.. al colocar "<" se pone en blanco el comentario..

    te mando el codigo a modificar de mi plantilla sencillo sin los "<" de apertura...

    Group description="Gadgets" selector="h2">
    Variable name="widget.title.font" description="Title Font" type="font"
    default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
    Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
    Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#000000"/>
    /Group>

    ResponderEliminar
  4. Pude añadir el primer codigo a pesar de que se diferenciaba en algunas pequeñeces.

    Pero ahora en el segundo paso no encuentro " .main-inner .sidebar .widget h2 {
    border-bottom: 1px solid $(widget.title.border.bevel.color);
    } "

    tal vez no esté en mi plantilla de ese modo.

    ResponderEliminar
  5. Hola. Aqui encontre el codigo a modificar del segundo paso, es el siguiente:

    /* Headings
    ----------------------------------------------- */
    h2 {
    margin: 0 0 1em 0;

    font: $(widget.title.font);
    color: $(widget.title.text.color);
    text-transform: uppercase;
    }

    le agregué el comando que sugeris en la guia, y subraya los gadgets.. pero de forma dispareja y un poco hacia abajo respecto del texto a subrayar.Talvez este modificando mal este ultimo paso...

    Te agradezco y disculpas por el spam.

    ResponderEliminar
  6. Si mujer esa linea es la que tienes que añadir segunindico en mi post.
    Espera un minuto te voy a dar una copia de la plantilla al final del post la copias y despues la borro.
    Avisame cuando la copies. Lo rojo es lo que se añade.

    ResponderEliminar
  7. Hos leido la copia literal de mi plantilla? le has sacado copia. No te puede quedar mal, mira mi blog,las lineas que estan bajo los titulos de los widgets las puse comprobando lo que te explicaba y solo falta ajustar un poco el color. Creo que la ultima parte la hicistes mal.
    Si ves que no te sale, dejalo y dentro de un rato o mañana vuelves a leer despacio el post.
    Cual es tu blog?

    ResponderEliminar
  8. Listo, ya lo copié..

    Te comento: no es tan facil como parece, yá que difiere en algunas cosas los códigos que publicás y los que tengo en mi plantilla, aún utilizando CTRL + F me resulta un poco complicado, ademas no soy experta en CSS.

    Por ultimo, funcionó el subrayado pero me queda desproporcional en algunos gadgets, y unicamente subraya la primer linea, (en algunos casos tengo textos de 2 lineas a subrayar...)

    ResponderEliminar
  9. http://deco-marce.blogspot.com

    Fijate...

    ResponderEliminar
  10. Hola, he visto tu codigo fuente, aun no tiene ninguna modificación, pero yo la incluiria entre as lineas 92 y la 93 (la primera) y las lineas 466 y 484 (la segunda). Veo que la diferencia es que tienes columna derecha e izquierda.
    De todas formas miraré la plantilla que usas por si tuviera alguna variación y te diré algo. Por cierto un blog y una editora muy bonitos.

    ResponderEliminar
  11. Hola! Ahora reviso tus sugerencias..
    Muchisimas gracias por todo.
    Muy útil tu blog y muy amable de tu parte. ¡100% recomendable!

    ResponderEliminar
  12. Por lo que me digistes que tienes titulos con dos lineas entonces posiblemente querrás un subrayado del titulo y no una linea bajo la cabecera. Mira otra vez el post y lee lo que he añadido en la primera parte.

    ResponderEliminar
  13. ¡Esto era lo que quería!, qué simple era...
    ¡¡Muchísimas gracias!!

    ResponderEliminar
  14. Una última consulta... yá que estamos con el tema del subrayado, y si no es mucha molestia..
    ¿Cómo hago para subrayar la cabecera de fecha?
    Creo que la variable a modificar es :
    Variable name="date.header.background.color" description="Background Color" type="color"
    default="transparent" value="#2b3a66"/>
    /Group>

    Muchas gracias!!!

    ResponderEliminar
  15. hola Marcela, deja que te vea lo de la fecha. Ya te contesto ¿vale?
    Me alegro que hayamos dado con la solución.Geacias por hacerme pensar. Tambien he aprendido algo.

    ResponderEliminar
  16. Ok! Aguardo tu respuesta,Muchas gracias!!

    ResponderEliminar
  17. Ya he pueblicado un post nuevo con el subrayado de fecha. Saludos.

    ResponderEliminar

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.