JMiur [E]

Durante varios días me dediqué a destripar la plantilla de Blogger Beta para divertirme y, de paso, tratar de entenderla. El resultado lo resumí en tres partes:

Destripando la planilla (1ª parte)
Destripando la planilla (2ª parte)
Destripando la planilla (3ª parte)

La base de la plantilla es "Blogger Theme Beckett : Source: Typepad : Modified by: www.VirtuPlus.com", requiere de varias imágenes, dos hojas de estilo y además, contiene una serie de modificaciones personales.

Lo primero que se debe tener en cuenta es que la sintaxis del código es extremadamente estricto, no se admiten etiquetas que no tengan su correspondiente cierre.
Por ejemplo:
<img ......>
<br>
son inaceptables y debe utilizarse:
<img ...... />
<br />
Las plantillas admiten la edición incluso dentro de las widgets y el código modificado manualmente es respetado cuando se editan los elementos en la solapa Template (Layouts) Elements, sin embargo, si se inserta un nuevo elemento, este no contendrá las modificaciones.

Para evitar escribir el código una y otra vez, es conveniente utilizar las definiciones de estilo de la plantilla y preservar, hasta donde sea posible los nombres de los atributos CLASS e ID.

Hay que recordar que b:section y b:widget serán reemplazados por una etiqueta <DIV>
<b:section class='sidebar' id='sidebar' preferred='yes'>
será convertido en:
<div class='sidebar section' id='sidebar'>
y
<b:widget id='HTML1' locked='false' title='' type='HTML'>
será convertido en:
<div class='widget HTML' id='HTML1'>
El mayor problema se presenta cuando se quiere establecer el estilo de algunas widgets que contienen atributos CLASS o ID genéricos, por ejemplo:
id='main'
class='title'
class='widget-content'
son definiciones comunes. Esto hace imposible identificar una en particular a menos que se utilice el identificador del widget que, como es creado en forma dinámica, puede llevar a confusiones y problemas. Supongamos que se tiene una declaración así:
.Image1 {border: 2px solid #FFFFFF;}
si insertamos un elemento PICTURE a la plantilla, se generará este código:
<b:widget id='Image1' locked='false' title='Primera' type='Image'/>
y el resultado será una imagen con un marco blanco, pero si insertamos un segundo elemento PICTURE, se generará este código:
<b:widget id='Image2' locked='false' title='Segunda' type='Image'/>
y la imagen no tendrá borde. Así, a medida que agregamos y quitamos elementos del mismo tipo, las ID de estos irán cambiando por lo que será imposible tener una referencia a cada uno de ellos.

Sin embargo, algunas widgets son únicas (no pueden agregarse más), por lo tanto, los atributos ID pueden usarse para declarar estilos sin inconvenientes. Estos elementos únicos son: HEADER, PROFILE, POSTS (BLOG), ARCHIVES y LABELS.

Por otro lado, el elemento PICTURE no parece ser muy interesante ya que carece de flexibilidad, y los elementos LIST y TEXT son redundantes y por lo tanto, inútiles.

Los elementos LINKLIST pueden ser personalizados mediante definiciones de estilo:
.sidebar cualquier_etiqueta {.......}
aunque todas tendrán el mismo formato.

Por último, creo que el elemento HTML/JAVASCRIPT es el más flexible ya que permite ingresar cualquier código, tanto HTML como JavaScript. Su mayor dificultad es la limitadísima capacidad del editor.

Por supuesto, es más que recomendable que se GUARDE la plantilla ANTES de hacer cualquier modificación. Blogger Beta permite bajarla a la PC en formato XML y, si es necesario, volverla a cargar. Además, siempre es posible descartar el uso de las nuevas plantillas y volver a usar los modelos viejos.

9 comentarios:

mdfac2000  

:o hermano me quedo asi boquiabierto de vdd que esta super bien explicado pero me quede en los wrapper la vdd esto ultimo no entendi nada, una pregunta tengo que aprender xml y javascript para entender a esto por que lo que se refiere a HTML y CSS le entiendo perfectamente, ahhhhh excelente trabajo por cierto no se puede pedir mas

Responder
JMiur  

XML es un HTML ampliado, hay ciertas etiquetas propias del servidor, en este caso, de Blogger. Sabiendo eso y como identificarlas, es suficiente. Luego, cada caso es particular y depende de lo que uno quiera conseguir.

Responder
EleSparragow  

Hola, te felicito por tu labor de socorrer a los desamparados. He estado batallando con el siderbar Wrapper, el izquierdo, el derecho y el inferior, pues no puedo centrar los widgets que he puesto. ¿Que puedo hacer? Ya se me agotaron mis reservas cerebrales! Agradeceria bastante tu ayuda.

Responder
EleSparragow  

Hola de nuevo, como soy nuevo en esto del blogger y he estado batallando con estas modalidades, no se si mi comentario llego. Si no fue asi mi pregunta fue:¿como puedo centrar los widgets en mi sidebar wrapper y los demas sidebars? Gracias y disculpa las molestias.

Responder
JMiur  

En realidad, esa pnarilla centra las cosas de la sidebar
#sidebar-wrapper {
text-align:center;
}
Pero, probablemente, cada una de las cosas insertadas tiene propeidades CSS specíficas por lo tanto, ganría que saber cuales quieres centrar.

Responder
EleSparragow  

Hola JMiur, gracias por responder a mis socorridas preguntas. Mira, mi problema es que no he podido centrar los widgets de mi blog que son: una encuesta, que las letras del encabezados las pude centrar pero el cuerpo de la encuesta no; un relog, que me sobra un espacio en blanco; y una minipresentacion flash, que tambien me sobra un espacio en blanco. Mi url es: http://incomprendiblecastillovagabundo.blogspot.com/
Si tienes oportunidad checa y veras a lo que me refiero.
Muchas gracias por tu atencion.

Responder
JMiur  

En el caso de la encuesta, como es un IFRAME, debería modificarse el código eliminando el atributo width: 100%;, no sé si esa parte del código es accesible.
<iframe height="180" frameborder="0" style="border: medium none ; height: 156px; width: 100%;" .......

Con el reloj pasa algo similar, es un IFRAME asñí que habrñia que modificar el código cambiando el atributo width: 100%; por width: 200px; que es el verdadero ancho del SWF y además agregare margen:
<iframe id="4" height="200" frameborder="0" style="display: block; width: 200px; margin: 0 auto;" .......

La presentación no la ubico pero imagino que pasa lo mismo. Es que todas esas cosas son gadgets externos lo que hace que no sea nada sencillo personalizarlas o incluso, es imposible hacerlo.

Responder
EleSparragow  

Hola JMiur, muchas gracias, me sirvio de muucho estos tips que me mandaste. Pues ya se logro centrar el relog y la encuensta asi como queria. Nada mas el flash player se nego a coperar y sigue mostrando esa barra blanca. ¿Acaso me salte algo? ¿Que paso en este caso? En fin, lo recatable es que ya mucho se logro como se esperaba; muchas gracias de nuevo y seguire intentando ir mas alla de lo incomprendible. Cuidate y cuando vengas a Monterrey yo invito el cabrito al pastor!

Responder
JMiur  

Lo del reloj parece resuelto, en todo caso, si quieres centralor le agregas una propeidad al style del iframe: margin:0 auto;

También veo bien al que está en Flash Player/URL container e incluso centrado.

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