En esta página se detalla cómo utilizar las clases para imágenes y bloques especiales incluídos en Satori. Todos estos estilos están definidos en el archivo style.css
Clases para imágenes
El propósito de estas clases es permitir dar estilo rápidamente a las imágenes que insertes en los posts. Se incluyen tres clases: .postimgtn, .postimgfull, .imgserie
Ejemplos de utilización
.postimgtn
Esta es una clase pensada para mostrar las miniaturas de las imágenes en tus posts. La imagen flotará a la derecha del texto y tendrá un tenue borde alrededor. Para utilizarla, debes agregar el atributo class="postimgtn" a la etiqueta de la imagen. Ejemplo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo. Quisque gravida bibendum quam. Etiam nec nisl. Vivamus ut est vitae diam molestie cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nibh. Etiam ante odio, condimentum egestas, sagittis sed, varius at, ante. Mauris faucibus. Nulla dapibus, ante bibendum dapibus dictum, quam tellus aliquet leo, eget aliquet nibh justo sed augue. Nullam tempor aliquam ipsum. Donec id turpis eget nibh aliquet placerat. Maecenas et tellus vitae mauris adipiscing pharetra.
<p><a href="http://www.flickr.com/photos/felipelavinz/21590215/" title="Photo Sharing"><img src="http://static.flickr.com/16/21590215_d4ab9b5de7_t.jpg" class="postimgtn" alt="0815_0003" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit (...) </p>
.postimgfull
Esta clase sirve para insertar imágenes de tamaño medio en los posts; la imagen se presentará como un bloque, centrada en relación al texto y con un margen prudente alrededor de ella. Para utilizarla, debes agregar el atributo class="postimgfull" a la etiqueta de la imagen. Ejemplo:
Mauris faucibus. Nulla dapibus, ante bibendum dapibus dictum, quam tellus aliquet leo, eget aliquet nibh justo sed augue. Nullam tempor aliquam ipsum. Donec id turpis eget nibh aliquet placerat. Maecenas et tellus vitae mauris adipiscing pharetra.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo.
<a href="http://www.flickr.com/photos/felipelavinz/21590137/" title="Photo Sharing"><img src="http://static.flickr.com/17/21590137_82605e582f_m.jpg" class="postimgfull" alt="1020_0002" /></a>
Mauris faucibus. Nulla dapibus, ante bibendum dapibus dictum, quam tellus aliquet leo, eget aliquet nibh justo sed augue. Nullam tempor aliquam ipsum. Donec id turpis eget nibh aliquet placerat. Maecenas et tellus vitae mauris adipiscing pharetra.
.imgserie
Esta es una clase que puedes utilizar al insertar una serie de imágenes en un post. A diferencia de las demás, no se agrega a las imágenes, sino que el atributo class="imgserie" debe aplicarse a un elemento de bloque, como un <div;gt; o un <p>. Ejemplo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo.
Mauris faucibus. Nulla dapibus, ante bibendum dapibus dictum, quam tellus aliquet leo, eget aliquet nibh justo sed augue. Nullam tempor aliquam ipsum. Donec id turpis eget nibh aliquet placerat. Maecenas et tellus vitae mauris adipiscing pharetra.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo.
<div class="imgserie"><a href="http://www.flickr.com/photos/felipelavinz/21590137/" title="Photo Sharing"><img src="http://static.flickr.com/17/21590137_82605e582f_s.jpg" width="75" height="75" alt="1020_0002" /></a><a href="http://www.flickr.com/photos/felipelavinz/6524353/" title="Photo Sharing"><img src="http://static.flickr.com/6/6524353_b5e05009e7_s.jpg" width="75" height="75" alt="Valparaíso" /></a><a href="http://www.flickr.com/photos/felipelavinz/6524322/" title="Photo Sharing"><img src="http://static.flickr.com/7/6524322_74f7180f46_s.jpg" width="75" height="75" alt="1113_0014" /></a></div>
Mauris faucibus. Nulla dapibus, ante bibendum dapibus dictum, quam tellus aliquet leo, eget aliquet nibh justo sed augue. Nullam tempor aliquam ipsum. Donec id turpis eget nibh aliquet placerat. Maecenas et tellus vitae mauris adipiscing pharetra.
Bloques especiales
Existen también algunas clases que puedes utilizar para señalar algunos bloques con características especiales; ellas son: .download, .code, .update, .important, para señalar una descarga, código, actualizaciones o notas importantes, respectivamente.
Además, la etiqueta <blockquote> también tiene una presentación similar.
Ejemplos de utilización
.download
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<p class="download">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
.code
body{
background:#FFF;
font-family:Tahoma,'Lucida Grande',Verdana,Arial,sans-serif;
color:#555;
font-size:90%;
margin:0;
padding:0
}
<p class=”code”><code>body{
background:#FFF;
font-family:Tahoma,’Lucida Grande’,Verdana,Arial,sans-serif;
color:#555;
font-size:90%;
margin:0;
padding:0
}</code></p>
.update
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo. Quisque gravida bibendum quam. Etiam nec nisl. Vivamus ut est vitae diam molestie cursus.
<p class="update">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo. Quisque gravida bibendum quam. Etiam nec nisl. Vivamus ut est vitae diam molestie cursus.</p>
.important
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo. Quisque gravida bibendum quam. Etiam nec nisl. Vivamus ut est vitae diam molestie cursus.
<p class="important">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus lacinia tellus. Morbi massa libero, tempor a, pellentesque quis, mollis quis, tortor. Sed mi. Donec et justo. Quisque gravida bibendum quam. Etiam nec nisl. Vivamus ut est vitae diam molestie cursus.</p>
Tablas
El estilo de las tablas, Coffe with milk, fue creado por Roger Johansson y es usado con permiso del autor.
Para utilizar correctamente el estilo de las tablas lo mejor es utilizar bien el modelo (es decir, con su correspondiente caption y cabeceras thead, th) y ocupar la clase .odd cada fila por medio. Ejemplo:
| Uno | Dos | Tres |
|---|---|---|
| Lorem | Ipsum | Dolor |
| Lorem Ipsum | Dolor Sit Amet | Consectetuer adipiscing elit |
| Lorem Ipsum | Dolor Sit Amet | Consectetuer adipiscing elit |
| Lorem Ipsum | Dolor Sit Amet | Consectetuer adipiscing elit |
| Lorem Ipsum | Dolor Sit Amet | Consectetuer adipiscing elit |
| Lorem Ipsum | Dolor Sit Amet | Consectetuer adipiscing elit |
<table>
<caption>Lorem Ipsum dolor sit amet</caption>
<thead>
<tr>
<th>Uno</th>
<th>Dos</th>
<th>Tres</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Lorem Ipsum</td>
<td>Dolor Sit Amet</td>
<td>Consectetuer adipiscing elit</td>
</tr>
<tr class="odd">
<td>Lorem Ipsum</td>
<td>Dolor Sit Amet</td>
<td>Consectetuer adipiscing elit</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
<td>Dolor Sit Amet</td>
<td>Consectetuer adipiscing elit</td>
</tr>
<tr class="odd">
<td>Lorem Ipsum</td>
<td>Dolor Sit Amet</td>
<td>Consectetuer adipiscing elit</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
<td>Dolor Sit Amet</td>
<td>Consectetuer adipiscing elit</td>
</tr>
</tbody>
</table>
