JMiur [E]

Hace unos dias, Sidhe and Darky Dragonseeker preguntaba la forma de colocar los títulos tal como se ven en la sidebar, utilizando dos colores o dos tipos distintos de fuentes. Es una técnica bastante simple. Basta agregarle una etiqueta extra al encabezado.

Gem@ se suma a la pregunta y, curiosamente, da la respuesta cuando en su último artículo, habla de la etiqueta span y los estilos porque, en realidad, de eso se trata.

En HTML, hay dos etiquetas que podrían llamarse de usos multiples, que no hacen nada por si solas pero que sirven para "contener cosas", especialmente estilos CSS. La que siempre vemos es DIV pero hay otra similar llamada SPAN. La diferencia entre una y otra es que DIV es un bloque (crea un salto de línea) y SPAN no, es lo que se llama una etiqueta inline así que si uno escribe:
un texto con una <span>etiqueta span</span> no veremos nada particular
Entonces ¿para que sirve? Por ejemplo, para cambiar el estilo de cierto texto:
un texto con una <span style="color:red;">etiqueta span</span> que se verá diferente
Usamos SPAN para cambiar las propiedades de una parte sin cambiar las del resto.

Lo mismo ocurrirá con los encabezados de la sidebar aunque allí, lo que deberíamos hacer primero es quitarle el código que pone Blogger.

Cuando agregamos un elemento siempre nos da la posibilidad de agregarle un título. Aunque no nos interese mostrarlo, es útil ponerlo porque de esa manera, identificamos los distintos elementos cuando los queremos editar. Si no queremos que se vean, lo que debemos hacer es ir a la plantilla y editarla expandiendo los artilugios. Por defecto, suele verse esto:
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
Lo único que hace eso es mostrar el título del elemento si es que existe. La clase class='title' suele no estar definida jamás y <data:title/> es el texto del título que le colocamos al elemento. Si no queremos mostrarlo, basta eliminar ese código y listo.

Si lo vamos a mostrar, podemos cambiarlo utilizando el criterio anterior, por ejemplo, cambiamos todo y lo reemplazamos por una línea más simple:
<h2>este es <span>mi título</span></h2>
Ahora, lo que faltaría es agregar o modificar las definiciones CSS genéricas que suelen encontrarse en alguna parte entre <b:skin> y </b:skin>:
.sidebar h2 {
.......
}
Necesitamos dos definiciones:
.sidebar h2 {
... serán las propiedades generales del título ...
}
.sidebar h2 span {
... serán las propiedades de esa parte modificada ...
}
¿Qué propiedades podemos usar? Las que que quieran, imágenes de fondo, colores, tipos de fuente, etc. Por ejemplo, podríamos usara algo así:
.sidebar h2 {
color: DarkSalmon;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: Tomato;
}

este es mi título


Hay propiedades que no solemos usar frecuentemente, una de ellas es letter-spacing que establece la distancia extra entre las letras de un texto.

Como esta propiedad acepta valores negativos, con ciertas tipografías se logran efectos interesantes colocando valores de -1 o -2 pixeles para "acercar" las letras entre si. Claro que nada impide hacer cosas más extrañas como colocar valores muy altos, tan altos que el texto se ve invertido:

letras
letras

Más ejemplos:
.sidebar h2 {
-moz-border-radius: 5px;
background-color: DarkRed;
color: yellow;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 40px;
line-height: 40px;
text-align:center;
width: 300px;
}
.sidebar h2 span {
color: YellowGreen;
font-family: Arial;
font-size: 40px;
}

este es otro título


.sidebar h2 {
-moz-border-radius: 5px;
background-color: #444;
color: white;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 45px;
line-height: 41px;
text-align: center;
width: 300px;
}
.sidebar h2 span {
-moz-border-radius: 5px;
background-color: #000;
color: #BB0;
font-family: Arial;
padding: 0 5px;
}

y este es otro título


Otra propiedad poco común que podemos usar es line-height. Con ella es posible controlar la posición de las letras con respecto a un fondo:
.sidebar h2 {
background-color: #345;
color: #999;
font-family: 'Times New Roman';
font-size: 24px;
height: 30px;
line-height: 5px;
text-align: center;
width: 370px;
}
.sidebar h2 span {
color: #CCC;
font-size: 56px;
}

otro título más

55 comentarios:

Anahí  

Muy bueno, voy a armarme de paciencia (digo porque últimamente me aparecen muchos bx-...) y a jugar con los títulos de la sidebar, me gusta la idea. :D
JMiur, quiero solicitar su ayuda en otro tema, si me permite: resulta que anduve con eso de los backlinks, y me parece que hice lío porque me desaparecieron... :( ¿me echa una mano?
Saludos y gracias desde ya.

Responder
Sr. D. Javier de García  

Gracias, Jmiur! Tú base es genial!!

Responder
Unknown  

Bien J, jugaremos hasta encontrar nuestro propio estilo Muackkk

Responder
Sr. D. Javier de García  

Hola, Jmiur y demás familia!

Sólo quería compartir con todos vosotros este "campo de entrenamiento" que he encontrado y que me está resultando bastante útil. Se trata de HTMLplayground. Te permite juguetear con tu página sin arrasarla :P

Es pero que os guste y os resulte provechosa!!!

Responder
Gem@  

Que vergüenza :$

Responder
Antony  

Muy pero muy interesante... ;) Sera muy útil... :) El tercer ejemplo esta muy bueno... Saludos!

Responder
Sr. D. Javier de García  

Hola, Jmiur!

He aplicado lo que explicas en este post a los títulos de entrada, pero el problema es que a veces el título es la largo y me ocupa más de una línea.
¿Cómo podría hacer para que el -moz-border- se igual de extenso que el título?

Gracias, espero con ansia tu respuesta!

Responder
JMiur  

Anahí: Aparentemente, el código está ¿Hay algún post donde deberían verse backlinks y no los ves? Puede ser que falte el bucle donde se listen, eso es lo que debería comprobarse. Sino, cualquier cosa, me mandas la plantilla.

Graciela: A jugar se ha dicho!!! :D

Gem@: ¿Vergüenza por qué?

Zonzo: Para eso, elimina la propiedad height y eventualmente, la propiedad line-height.

Responder
Anónimo  

Genial ;)
Muchas gracias JMiur por la explicación... voy a probarlo inmediatamente!
Me ha encantado!!

Responder
Anónimo  

Hola una pregunta qusiera saber que paso con wowzio yo tenia una web que se llamaba P2P.corp http://p2pcorp.blogspot.com/ pero ya no uso esa mi nueva direccion es http://p2pcorporation.blogspot.com/ pero al poner mis widgest de wowzio sale las fotos de la antigua direccion y cuando entro a wowzio me dice que no pudes crear widgets que tienes que esperar 24 horas o algo asi mi pregunta es como modificar los widgets antiriores que tenia pero quiero que salgan las fotos d emi nueva direccion

se que este tema que pregunto no tiene nada que ver con esto disculpen espero su respuesto gracias de antemano saludos

Responder
Gem@  

No me hagas caso, lo dije porque tenía la respuesta delante mía ;)
Por cierto.. está genial la explicación : :) :)

Responder
Sr. D. Javier de García  

:) Gracias! Me bastó con eliminar la propiedad heigth

Responder
JMiur  

Suerte Sidhe, ya ves que he cumplido :D

P2P: No sé como resuelve el servicio esas cosas, tal vez editándola o tal vez creando una nueva.

Gem@: Usted me leyó la mente :D

Responder
Botxero  

Buenas noches Jmiur. Aparte de que esta entrada es muy pero que muy interesante y que tomaré nota, me paso para darte las gracias en este día tan especial para mi. Mi Blog cumple su primer año y gracias a ti y a los que se dedican a enseñarnos los submundos de blogger todo esta siendo la mar de fácil.

Un saludo y me voy a probar esto que nos cuentas, jejejeje...

Responder
Bonzu Pipinpadaloxicopolis III  

Hola JMiur
Oye que es proevedor?

Responder
JMiur  

Saludos Botxero: Feliz cumpleblog! :D

Bonzu: No sé, imagino que un error de tipeo.

Responder
Anahí  

JMiur, le mandé un e-mail con la plantilla, espero la haya recibido, porque sí, hay varios post que deberían tener enlace. Yo creo que debí borrar algo que no debí borrar... :$
Saludos.

Responder
Bonzu Pipinpadaloxicopolis III  

no se, pero parece un error comun en los telefonos sony ericsson

Responder
JMiur  

Acabo de recibirlo, Anahí. En cuanto pueda, reviso la plantilla a ver si falta algo.

Responder
Unknown  

encontraras que con respeto a la explicación de esta entrada, pude colocar perfectamente bien lo indicado...pero como siempre hay uno. quiero que las palabras estén en minúsculas y están tanto en el interior de la plantilla como en el espacio destinado para colocar el titulo , en minúscula. es decir no se de donde carajo salen las mayúsculas y he buscado y no encuentro nada que me guié. lo otro es que hay algunos elementos que el código no les hice efecto , no cambiaron el color, claro que estoy viendo que tienen una sola palabras o mas y probablemente fue por esa razón....pero se puede hacer algo ahí.
a tu correo envíe la dirección del blog perdona por tanta molestia. gracias JMIUR

Responder
JMiur  

Fíjate si encuentras algo como esto:
text-transform: uppercase;
eso hace que sin importar la forma en que escribas algo, lo que se vea esté en mayúsculas.

La inversa:
text-transform: lowercase;
lo mostrará en minúsculas.

Eliminado esa propeidad, se mostrará tal como lo escribas.

Miraré el mail a ver que dice.

Responder
JMiur  

Es casi imposible saberlo viendo el código. Lo escrito allí tiene un error:
,.rsidebar h2, .lsidebar h2{
hay una coma delante de todo y es la única defición que veo que tiene color.

Si no es eso, tendría que ver un ejemplo online para decirte cuál es el problema.

Responder
JMiur  

Por lo que veo de los elementos que tienes agregados, para el color de los títulos, deberías usar algo así:

.sidebar h2, .rsidebar h2, .lsidebar h2 {
...
color:#43433B;
}

Esa definición existe.

Para los enlaces que son los que se ven en el elemento Archivos:

.sidebar a, .rsidebar a, .lsidebar a {
color: #COLOR;
}

Para el resto de los textos, lo genérico sería esto:

.sidebar, .rsidebar, .lsidebar {
.............
color: #COLOR;
}

Responder
JMiur  

Es que usando ese tip ode plantillas debes agregar alguna clase de propiedad que los oculte en la página principal. No sé cuál usas ahora, es algo dif´ciil de ver online pero, seguramente hay alguna condición que tiene la plantilla para mostrar las entradas de manera distinta en el home que en las páginas individuales y a llí debería poner algo como:
object, embed {display:none;}

Responder
JMiur  

No sé qué quieres hacer exactamente. Tendría que revisar porque en Firefox se ve bastante raro.

Responder
JMiur  

Esto es lo que veo con Firefox 3.5 y esto es lo que veo con IE8, Alvarito.

Responder
JMiur  

No sé que resultado quieres obtener pero ahí, el fondo del body es una imagen que se repite, alineada a la izquierda por lo que al cambiar de resolución el resultado varía. En principio, esa imagende fondo debería estar centrada y no repetirse. Fíjate acá.

Por ejemplo, esto es lo que veo.

Responder
El Gato  

saludos
empece a jugar con este post
pero me aparecio este dilema
cuando hay dos columnas juntas de un tamaño de 155px

el problema suger ya que el titulo se esconde y no se como hacer que se vea lo que dice
http://bitacoracaleb.blogspot.com/

este es la que ocupe como base
.sidebar h2 {
-moz-border-radius: 5px;
background-color: #444;
color: white;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 45px;
line-height: 41px;
text-align: center;
width: 300px;
}
.sidebar h2 span {
-moz-border-radius: 5px;
background-color: #000;
color: #BB0;
font-family: Arial;
padding: 0 5px;
}

y la deje asi

.sidebar h2 {
-moz-border-radius: 3px;
background-color: #444;
color: white;
font-family: 'Century Gothic';
font-size: 16px;
font-weight: normal;
height: 25px;
line-height: 21px;
text-align: center;
width: 320px;
}
.sidebar h2 span {
-moz-border-radius: 3px;
background-color: #000;
color: #BB0;
font-family: Arial;
padding: 0 3px;
}
espero que haya arreglo gracias

Responder
JMiur  

MLR77:
Claro, el problema es que .sidebar h2 se refiere a todos los títulos y allí, hay de dos tamaños, los anchos y los angostos. Como defines el ancho con with:
.sidebar h2 {
.............
width: 320px;
}
cuando es más angosta, el texto no se ve.

Podrías agregar esta definición debajo de las otras:

#sidebar-izquierda h2, #sidebar-derecha h2 {width:155px;}

y de esa manera, reducir el ancho de esos títulos. Probablemente, vas a tener que cambiar la fuente o su tamaño. Agregas cualquier otro dato diferente en esa definición.

Responder
El Gato  

definitivamente eres un MAESTRO
el apodo te lo tienes bien merecido
mis respetos y mis agradecimientos

Responder
El Gato  

y gracias por la respuesta en tiempo record
la verdad NUNCA me habian respondido tan rapido

Responder
El Gato  

te escribo para molestarte nuevamente
algo que me ha sacado de canas es como achicar el espacio
entre las ventanitas de la sidebar
por mas que he tratado no me toma nada
te agraderia alguna luz sobre el tema

Responder
JMiur  

MLR77:
¿Achicar que espacios? ¿verticales u horizontales? ¿de qué elementos? porque da la impresión de que cada uno tiene diferentes propiedades así que habría que ver uno por uno.

Responder
Benko  

Hola JMiur Hice todo paso por paso y quedo de maravilla, muchas gracias. Pero quiero saber si se puede jugar de esta manera con los titulos de las entradas, cambiarle colores, centrado etc. Si hay algun post aqui me dices, podrias ayudarme en esto, es que no me gusta como quedan los titulos de las entradas.... Gracias, agradezco su ayuda.

Responder
JMiur  

DJ BENKO:
La respuesta es si y no porque si bien puedes cambair las propiedades o agregarle otras:
post h3 { ........ }
.post h3 a, .post h3 a:visited, .post h3 strong { ........ }

Será complicado dividir los textos ya que varian y no son fijos como en la sidebar. Podrçias tal vez hacer algo similar a lo que se muestra en esta entrada, agregarle una etiqueta al título mismo del post y luego, agregarle esa definicion en el CSS.

Responder
Anónimo  

hola JMiur en mi blog quiero hacer lo siguiente en los post poner una etiqueta por ejemplo un "div id=Link descarga class=descarga>aqui el link div" y que ese div se vea en la sidebar y no dentro del post. ¿Es posible hacer esto?

Responder
JMiur  

Imagino que sí, que para eso debe usarse JavaScript; déjame ver si puedo pensar un método y lo publico.

Responder
Anónimo  

ok muchas gracias realmente me hace falta

Responder
Anónimo  

Jmiur yo denuevo XD en unos de tus post vi que ponias como quitarle los bordes automaticamente a las imagenes link sin necesidad de agregarle etiquetas a los link ¿como era ese css?

Responder
JMiur  

Por defecto, las imágenes tienen borde siempre que son enlaces, eso se quita así:

a img {border:none;}

No sé si te refieres a ese borde o a otro que pueda tener la plantilla que usas; en ese caso, deberías decirme en que blog así me fijo.

Responder
Unknown  

muy buenas JMiur, estoy implementando este tutorial en mi blog sin problemas y muy conforme.
Pero uno siempre trata de buscar algo mas, esa cosa de bicho inquieto del ser humano.
Me preguntaba si es posible aplicar mas de un estilo a la sidebar, un gadget con su titulo bajo un estilo y otro de manera distinta.
Desde ya muchas gracias

Responder
JMiur  

Si, no hay problema, basta que le agregues una clase. Por ejemplo, en un gadget pones esto:

<h2 class='primera'>este es <span>mi título</span></h2>

y en otro:

<h2 class='segundo'>este es <span>mi título</span></h2>

poniendo en cada uno cualquier nombre de clase que quieras.

Luego, cada uno puede definirse con reglas así:

.sidebar h2.primero { ....... }
.sidebar h2.primero span { ....... }

.sidebar h2.segundo { ....... }
.sidebar h2.segundo span { ....... }

Tantos como quieras.

Responder
Unknown  

Impecable.
A jugar entonces.
Muchas gracias JMiur

Responder
Unknown  

Hola, J.Miur. He aplicado a los títulos de la sidebar de mi blog la última propiedad line-height, y el resultado se ve sin problemas tanto en firefox, chrome y safari, pero en explorer se ve el fondo y no las letras. ¿Tendría solución este problema?

La dirección de mi blog es: www.fran-rodriguez.es

Muchas gracias de antemano.

Responder
JMiur  

Eso debe ocurrir en IE7 porque en IE8 se ve normal; esta es una captura

También es posible que el navegador IE8 esté en modo compatibilidad así que funciona como IE7.

Una buena medidada para evitar eso es agreagr lo siguiente justo despues de <head>

<meta content='IE=8' http-equiv='X-UA-Compatible'/>

Responder
Unknown  

Muchas gracias, J.Miur. Ya se han solucionado todos los fallos que encontraba en el blog. Estaba usando IE8 y no se veían las cosas como quería. He aplicado después de head ese código y ya se ve justo como quería.
Pero, entonces alguien que esté usando IE7 no podrá ver los títulos de la sidebar?

Responder
JMiur  

Eso es verdad pero, ahí deberás evaluar qué hacer. Si tienes algún tipo de estadísitica, verifica, por ejemplo, cuál es la envergadura de las visitas realizadas con ese navegador; en mi caso, no superan al 4% del total por lo que, simplemente, las ignoro ya que es imposible adaptar un sitio para que se vea en el 100% de los navegadores. Se hace lo posible y no más, caso contrario, terminamos atados. Realmente, no existe ninguna excusa para no mantener actualizados los navegadores. Pero todo eso es subjetivo :D

De todos modos, siempre tienes la opción de condicionar el estilo de esa parte o de cualquier otra para que, en alguna versión de IE, se meustre otra cosa o se establezcan propiedades diferenciadas. En este caso, sería algo así:

<!--[if IE 7]>
<style>
....... aqui colocas el estilo .......
</style>
<![endif]-->

¿Qué propiedad o propiedades cambiar? No sabría decirte porque cuando se ve el blog en IE7, las herramientas de debug no me permiten ver esa parte para probar.

Responder
Unknown  

¿Y en IE9 se ve correctamente o hay que aplicar otra etiqueta meta como la de antes?

Responder
JMiur  

No tengo instalado IE9 así que no puedo verificarlo pero, si en IE8 se ve bien, debería verse bien en IE9.

Responder
JMiur  

Estás usando las plantillas de nuevo estil ode Blogger que son profunamente engorrosas para personalizar más allá del editor de plantillas incorporado. Han sido pensadas para no tocarse.

De todos modos, puedes usar esto:

aside h2 {} en lugar de .sidebar h2 {}
y
aside h2 span {} en lugar de .sidebar h2 span {}

Responder
JMiur  

Espera proque me parece que miré otro blog :D

Pongo acá la URL para confirmarlo: http://tierradetrampas.blogspot.com/

Si es ese, la clase sidebar existe:

<div id="sidebar" class="sidebar section">

Y la palntilla tiene una regla de estilo simialr a esta:

.sidebar h2 {
background: url("http://lh4.ggpht.com/cadbalear/SPCcgeCymDI/AAAAAAAAAzw/nAL__7J3UQs/barra.png") no-repeat scroll 0 0 #6699FF;
color: #FFFFFF;
font-size: 100%;
margin: 0;
padding: 10px 50px;
}

Responder
JMiur  

No hace falta. Si el blog es ese, el CSS contiene las definiciones de sidebar tal como muestra esta entrada.

Responder
Kaede Shio  

¿Es posible cambiar el color de las letras de la side bar, sin afectar el de las fechas o cualquier otro color en el blogg?

Gracias de ante mano.

JMiur  

Sí, es simple. En el blog que tienes basta que busques esta regla y le agregue el color; por ejemplo, así serían rojos::

sidebar h2 {
.......
color:#red;
}

Kaede Shio  

Me funciono perfectamente! Muchas gracias n_n.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR