Temas de WordPress.com

Entre los muchísimos temas que hay para elegir en WordPress, hay muy pocos que sean realmente buenos. La enorme mayoría son directamente de ancho fijo con la enorme desventaja de no adaptarse a diversos tamaños de pantalla o ventana.

Entre los 22 temas que actualmente están clasificados como flexible-width, algunos ni siquiera lo son (como «coraline»), tres son distintas versiones de SandBox (un tema básico usado como punto de partida para crear nuevos) y dos cuestan 68 dólares.

En total, temas de ancho flexible quedarían alrededor de 17, entre los que se encuentra uno que usé en este blog «Shocking Blue Green» y el que estoy usando ahora «Rubric».

Algunos de los temas de ancho flexible como «Chateau» y «Quintus» y «Twenty Eleven» se achican muy bien en pantallas o  ventanas más chicas, pero no se agrandan más allá de 1100 pixeles. Ese ancho máximo tiene sentido para evitar renglones de texto muy anchos,  pero yo prefiero que sea el usuario el que elija qué tan ancho quiere ver el contenido. Hay veces que no se publica texto, sino imágenes o tablas y el ancho adicional se vuelve indispensable. El tema Rubric, crece sin límite tanto como el lector quiera.

La mayoría de los temas, de ancho flexible o fijo, tienen otros problemas. El contraste entre el fondo y el texto es pobre. En muy común que el texto tenga color gris. Yo no sé en qué piensan los diseñadores, pero el texto está ahí para ser leído y es mucho más fácil de leer texto negro. Rubric tiene texto negro.

Con la posibilidad de personalizar el CSS algunos de esos temas se podrían mejorar mucho y usarse. Por ejemplo, ponerles texto negro sería muy sencillo. Eliminar el ancho máximo no sería muy complicado. Sin esa posibilidad que cuesta 30 dólares por año, Rubric es el mejor tema de WordPress.com.

 

Layouts con CSS

Hay 3 cosas que toda página HTML debe tener:

  1. Adaptarse a diferentes tamaños de letra
  2. Adaptarse al tamaño de ventana y resolución que el usuario use
  3. Estar hecha con DIVs y CSS

Para ello hay muchas técnicas y no todas logran buenos resultados. He aquí un ejemplo de layout con CSS que conserva las 3 propiedades.

Consiste de una barra de título o encabezado, una barra de links a la derecha, una barra de links a la derecha (que pueden ser otra cosa como banners o texto). Las barras de links se adaptan al tamaño de la fuente que se quiera.

En el centro el conenido principal que fluqye hasta ocupar todo el espacio que quede libre.

Al final un pie.

Ejemplo de Layout CSS

El HTML

<body>
<div id=»arriba»>
<h1><img src=»http://www.w3.org/Icons/w3c_main»/> Título Principal</h1></div>
<div id=»links»>
<pre>
#links{
float: left;
width: 10em;
margin-right:1em;
background-color:
lightblue;
}
</pre>
<ul>
<li><a href=»link1.html»>Link 1</a></li>
<li><a href=»link1.html»>Vínculo 2</a></li>
<li><a href=»link1.html»>Hipervínculo 3</a></li>
<li><a href=»link1.html»>Hyperlink 4</a></li>
<li><a href=»link1.html»>Enlace 5</a></li>
<li><a href=»link1.html»>Hiperenlace 6</a></li>
</ul>
</div>

<div id=»links2″>
<pre>
#links2{
float: right;
width: 10em;
color: white;
background-color:
red;
}
</pre>
<ul>
<li><a href=»link1.html»>Link 1</a></li>
<li><a href=»link1.html»>Vínculo 2</a></li>
<li><a href=»link1.html»>Hipervínculo 3</a></li>
<li><a href=»link1.html»>Hyperlink 4</a></li>
<li><a href=»link1.html»>Enlace 5</a></li>
<li><a href=»link1.html»>Hiperenlace 6</a></li>
</ul>
</div>

<div id=»content»>
<pre>
#content{
padding-left: 1em;
background-color: snow;
margin-left: 10.2em;
margin-right: 10.2em;
padding-left: 1em;
padding-right: 1em;
}
</pre>
</div>

<div id=»pie»>
<p>
#pie{background-color: yellow;border-style:dotted;border-color: lightgray;border-width:2px;}
</p>
</div>

</body>

El CSS

body{
font-size: 100%;
background-color: snow;
}

#links2{
float: right;
width: 10em;
background-color: orange;
}

#links{
float: left;
width: 10em;
margin-right:1em;
background-color: lightblue;
}
#content{
padding-left: 1em;
background-color: snow;
margin-left: 10.2em;
margin-right: 10.2em;
padding-left: 1em;
padding-right: 1em;
}
img{margin-right:1em;}

#pie{
background-color: yellow;
border-style:dotted;
border-color: lightgray;
border-width:2px;
}