JMiur [E]

En un tiempo, Blogger tenían una opción llamada Fuentes y colores que nos permitía establecer justamente eso, las fuentes y colores básicos de la plantilla y esos datos se mostraban al inicio del CSS con etiquetas propias del sistema llamadas Variable.

A partir de la incorporación del nuevo Diseñador de Plantillas, esta opción ya no está disponible y, sin embargo, las plantillas de viejo estilo conservan esas etiquetas. En algunos casos, eso es razonable porque se siguen utilizando las definiciones que siempre son de tipo $nombre; por ejemplo:
#outer-wrapper {
  .......
  font: $bodyfont;
}
Pero, si no tenemos ese tipo de datos porque ya hemos modificado la plantilla muchas veces ¿podemos quitar esas etiquetas? En realidad, poder, podemos pero no es aconsejable ya que siguen teniendo utilidad.

Por un lado, podemos valernos de ellas para simplificar el CSS ya que nada impide usar las variables existentes, modificarlas manualmente o agregar otras personales siempre y cuando respetemos la sintaxis; si agregara esto:
<Variable name="miCOLOR" description="una descripcion de la variable" type="color" default="#000000" value="#000000">
de ahí en más, podría usar $miCOLOR en cualquier propiedad siempre que esta se encontrase definida dentro <b:skin> </b:skin>:
p {
  .......
  color: $miCOLOR;
  .......
  background: $miCOLOR url() no-repeat 0 0;
  .......
  border: 5px solid $miCOLOR;
}
Hasta donde sé, hay tres tipos de datos posibles:
  • type="color" establece colores
  • type="font" establece fuentes de textos
  • type="automatic" establece ... ¿cualquier otra cosa?
Eso último lo desconozco pero, si uno coloca esta variable:
<Variable name="opacidad" description="la opacidad" type="automatic" default="opacity" value="opacity">
y luego se escribe esto:
p {
  .......
  $opacidad: .5;
}
Blogger genera la propiedad correcta y en el código fuente leeremos:
opacity: .5;
Si esto tiene utilidad práctica o no, depende de cada uno pero, hay un segundo punto importante que es el que debería interesarnos. Esas definiciones que se ven en las etiquetas Variable, son las que utiliza Blogger para mostrar ciertos gadgets como el Buscador, los Seguidores, etc, etc. Suele ser comun que ciertos gadgets se muestren de manera errónea, fondos claros con textos claro o viceversa y, si eso nos ocurre, lo mejor es revisar qué dicen esas variables.

Estas son algunas de las que deberíamos tener definidas y los valores que usará Blogger son los que figuran en el parámetro value:
  • name="bgcolor" es el color de fondo del sitio
  • name="bodyfont" es la fuente de texto por defecto
  • name="textcolor" es el color de los textos
  • name="linkcolor" y name="visitedlinkcolor" son es los colores de los enlaces
  • name="bordercolor" es el color de los bordes
No hay ninguna necesidad de utilizar los mismos valores que tenemos en nuestra palbtilla, podemos usar cualquier otro.

19 comentarios:

Domin-Omega  

Desde hace un tiempo me preguntaba si las variables que existian en las plantillas eran absolutas o se podían crear nuevas variables... Pero nunca llegué a intentarlo. Ahora sé que sí, y vaya que tiene utilidad.

Responder
Graciela  

Creo que ha sido un error que sacaran la opción fuentes y colores, era útil...no entiendo nada de las nuevas, tampoco intentaré conocerlas jajaja 'era negada la tipa!'

Responder
Albus Dumbledore  

Hola JMiur,

Vamos a ver si esto es posible, tengo un blog con tres etiquetas que son Etiqueta 1, Etiqueta 2 y Etiqueta 3, ahora tengo tres gadgets, que son Gadget 1, Gadget 2 y Gadget 3; la idea es que cuando entre a una etiqueta, por ejemplo a la Etiqueta 1 se muestre sólo el gadget 1 y los otros dos permanezcan ocultos, cuando entre a la Etiqueta 2 se muestre sólo el gadget 2 y los otros dos permanezcan ocultos, así sucesivamente.

Espero haberme explicado... :$

Responder
Alonso  

Sé que es molesto que el post trate de un tema y uno venga y pregunte acerca de otra cosa, pero tú eres el único que me puede ayudar JMiur, ojalá que así sea...

La pregunta es: ¿Cómo hago para que un iframe ocupe el 100% de la altura de su (por ejemplo) div contenedor?. He buscado y parece ser una pregunta bastante recurrente, intenté algunas soluciones (scripts) propuestas pero nada me funciona.

Bueno pues espero me puedas ayudar y ya que es una pregunta frecuante sería bueno un post acerca del tema. Gracias y disculpa las molestias.

Saludos hasta Argentina. ;)

Responder
JMiur  

Domin-Omega:
Sí, es posible crear cualquier otra Variable a gusto. Todo tiene utilidad. Dependerá de cda uno :-)

Graciela
Sin duda que si lo fue; yo no lo usaba pero mucha gente si y era una forma sencilla de modificar o probar cosas.

Albus Dumbledore:
No hay condicioanles apra etiquetas y por l otanto, apra algo así debes usar JavaScript. Guardar la etiqueta que sólo es posible leerla en el mismo LOOP del post y crear alguna clase de código para que escriba o muestre los diferentes gadgets.

Alonso:
Imagino que de lo que se trata es de un IFRAME que no tiene una altura fija sin oque varía. Creo que en Internet Explorer creo que es simple y basta poner height="100%" pero, en el resto de los navegadores el tema es entre complicado e imposible.

Si la página del IFRAME está en el mismo dominio que la página donde se insertará, ahí las cosas se complican pero es posible. Si están en dominios diferentes te diría que es imposible ya que no puede saberse la altura de ese IFRAME; es un dato al que el navegador no puede acceder porque le está prohibido.

Responder
Mica  

Hola mira yo quiero modificar mi titulo como el de esta pag web que tiene los titulos rosa y como sifueran luminosos http://stardollseguidoras.blogspot.com/ como es posible? y esa barra de menu de face, twitter, etc tambien. Lo agradeceria mucho que me respondas

Responder
Alonso  

Ok, ya entiendo... sólo apra concluir el tema: ¿existe algún método para forzar a que un IFRAME tenga la misma altura que su elemento contenedor (padre)?

Ejemplo: tengo un IFRAME dentro de un div, y quiero forzar a que tenga la altura de ese div, pero si le pongo 100% no lo hace. Pensaba en colocarle al IFRAME algo como "100% !important" pero no resultó jeje...

Bueno pues gracias por tu ayuda JMiur.

Responder
JMiur  

No sé en qué blog quieres cambair elso. El color de los títulos suele estar definido en algo así y ahí debes colocar el color:

.post-title a, .post-title a:visited, .post-title strong {
....
color: #E694B6;
}

Para los íconos de redes sociales, fijate en esta entrada de Gem@

Responder
JMiur  

Alonso:
No, no existe tal cosa como height="100% !important", a lo sumo, podría ponerse en el estilo pero no serviría de nada ya que, como te dije, el navegador no sabe la altura de ese IFRAME ni puede leer ese dato a menos que esté en el mismo dominio.

Responder
Alonso  

Se me ha ocurrido algo JMiur sé que dije que ya cerrba el tema asi es que si ya no me puedes o quieres responder no hay problema, pero tengo que preguntar de cualquier forma jaja..

Ok mi idea es leer con javascript la altura del navegaador y luego ese valor ponerlo en el height del IFRAME. Según yo no debe ser complicado pues el proceso saría: lle el tamaño (altura) del navegador, guárdalo com variable y otórgaselo al atributo height del IFRAME y tan tan.

Ahora bien y eso en código ¿cómo sería?

Vale pues ahí está por si tines un tiempo libre, gracias ;)

Responder
JMiur  

La altura del navegador en realidad varia, digamos que lo básico es la altura del área visible que es donde se muestra una página web, descontando barras de herramientas, menues, etc. Eso, en términos generales se lee así:

altura = document.documentElement.clientHeight;

suponiendo que el IFRAME tuviera un ID que lo identificara y definido un height cualquiera:

<iframe id='eliframe' style='height:100%' ...............

Se puede darle la altura de este modo:

<script>
var altura = document.documentElement.clientHeight;
document.getElementById("eliframe").style.height = altura + "px";
</script>

Todo esto, dicho así un poco en el aire, claro pero, para que tengas una idea de por donde buscar.

Responder
Alonso  

Muchas gracias por la ayuda JMiur, me ha servido de mucho y ahora he logrado lo que buscaba, excepto porque no se redimensiona conforme cambias el tamaño de la ventana, se tiene que actualizar la página (F5) para que realize los cambios. ¿Sebes si hay alguna solución para esto?

Gracias, te debo una (una más, queiro decir jeje) ;)

Responder
JMiur  

Si, para eso debes agregar algun script más; podria ser algo así:

<script>
function redimensionar()
var altura = document.documentElement.clientHeight;
document.getElementById("eliframe").style.height = altura + "px";
}

window.onresize = redimensionar;

</script>

window.onresize es un evento automático que se ejecuta cada vez que se modifica el tamaño del navegador y por lo tanto, la función que escribe la altura, se ejecutará cada vez que ocurra eso.

Responder
Alonso  

¡Wooow! funciona a la perfección y en mucho gracias a ti JMiur, te debo una más :)

Gracias por tomarte el tiempo de ayudarme, saludos.

Responder
JMiur  

Fue un placer, Alonso.

Responder
Magoplup  

Perfecto JMiur ya vi lo que mensionabas y quede mas claro en cuanto a lo que el navegador realmente lee y como lo ve, agradecido nuevamente saludos...

Responder
Gerardo Heinrich  

Podrías ayudarme con el tema que te plantié de los SEGUIDORES por mail?
No se casi nada de códigos y no sabría que poner ni donde.El blog es http://revistastrucoslanas.blogspot.com/
Te pido una más si es posible. En la plantilla hay 4 lugares de 125x125 para publicidad que no uso, me puedes ayudar a quitarlos? Se que es una plantilla que no es tuya o no conoces, pero quizás para ti resulta fácil saber en que lugar puedo quitar eso. La plantilla es de Ciudad Blogger pero El Potro no se en que anda, tiene poco tiempo y se tomo UNA PAUSA y no está contestando casi nada. No se que hacer ni a quien recurrir, entonces se me ocurre que para todo lo que sabes, tal vez no te sea difícil ver como sacarla.
Gracias.

JMiur  

La etiqueta Variable se coloca al inicio de <b:skin>

Por ejemplo, el color de los enlaces queda definido en blanco si se pone algo así:

<Variable name="linkcolor" description="Link Color" type="color" default="#FFFFFF" value="#FFFFFF">

Lo mismo ocurre con el color de los textos:

<Variable name="textcolor" description="Text Color" type="color" default="#FFFFFF" value="#FFFFFF">

Los elementos de publicidad 125x125 de esa plantilla están en un DIV cuyo ide es ads así que deberías borrar todo ese DIV para que desaparezcan:

<div id="ads">
.........
</div>

Gerardo Heinrich  

Muchísimas gracias por tu ayuda y gestión. Ya quité el DIV y quedó espectacular. Ya veré por lo otro mañana, me voy a dormir.

Gracias nuevamente.-

Gerardo

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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