Post Styles

Postleaf believes in a complete separation of content and styles. As a result, it uses classes instead of inline styles when required.

Your theme's stylesheet should contain some boilerplate styles to accommodate things like image alignment, embeds, and embed cards.

Image Alignment

Postleaf wraps image's with a <figure class="image"> element. This enables support for captions and gives you more flexibility for styling images over a raw <img> element.

When an image is given alignment, Postleaf will attach one of the following classes to the <figure> element:

  • align-left – the image is left-aligned
  • align-center – the image is center-aligned
  • align-right – the image is right-aligned

Note that this class is placed on the <figure> element, not the <img> element.

Embeds

Embedded content is wrapped in a<div data-embed="true"> element. If the content is embedded through an oEmbed provider, it will also receive a special data attribute containing the provider's name. You can use these attributes to target them in your stylesheet.

For example, pasting a YouTube URL will result in the following embed code:

<div data-embed="true" data-embed-provider="YouTube">
  [embed code here]
</div>

To target a YouTube embed in your stylesheet, use the following CSS:

.post [data-embed-provider="YouTube"] {
/* your styles here */
}

Embed Cards

When you paste a URL into the editor and an oEmbed provider can't be found, Postleaf generates an embed card instead. Embed cards rendered by the default theme look like this:

However, you can customize the way embed cards look in your own theme's stylesheet. The HTML structure looks like this:

<aside class="embed-card">
  <article>
    <img src="preview.jpg">
    <h3>Example Website</h3>
    <p>Description of the website.</p>
  </article>
  <footer>
    <img src="favicon.png">
    <a href="https://example.com/">Example.com</a>
  </footer>
</aside>