StoryChief acts as a layer above your website, social media, newsletters, and other channels. But how do we ensure the article looks good on your website?

When you publish your article, your existing styling defined by your website's theme will be used and not overwritten. When publishing StoryChief sends out raw HTML to your website. Below is a reference of the possible elements and their output.

Start styling your article

1. Inline elements

a. Bold

This is <strong>bold</strong> text.

b. Italic

This is <em>italic</em> text.

c. Underline

This is <u>underline</u> text.

d. Strikethrough

This is <s>strikethrough</s> text.

e. Small

This is <small>strikethrough</small> text.

f. Code

This is <code>code</code> text.

g. Link

This is <a href="https://storychief.io">link</a> text.

Alternatives
Link defined to open in a new browser

This is <a href="https://storychief.io" target="_blank" rel="noopener noreferrer">link</a> text.

Link defined with nofollow

This is <a href="https://storychief.io" rel="nofollow">link</a> text.

h. Lists

This is a <ul><li>Head item 1</li>
<ul>
<li>Small item 1</li>
</ul>
<li>Head item 2</li>
</ul>

2. Block elements

a. Image

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
<picture>
<source srcset="https://images.storychief.com/.../image_800.jpg 1x, https://images.storychief.com/.../image_1600.jpg 2x" media="(max-width: 768px)">
<source srcset="https://images.storychief.com/.../image_800.jpg 1x, https://images.storychief.com/.../image_1600.jpg 2x" media="(min-width: 769px)">
<img alt="Alt text" src="https://images.storychief.com/.../image_800.jpg">
</picture>
<figcaption>Image caption</figcaption>
</figure>

b. Video

<figure class="video strchf-type-video regular strchf-size-regular strchf-align-center">
<div class="embed-container">
<div style="max-width: 100%; position: relative; padding-top: 56.5%;">

<!-- The embed content -->
<iframe width="200" height="113" src="https://www.youtube.com/embed/QQiizdWAWw8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
<!-- The embed content -->

</div>
</div>
<figcaption>Optional video caption</figcaption>
</figure>

🔔 Note: The inline styling provides for responsive scaling of the video depending on your website's container width.

c. Embed

<figure class="embed strchf-type-embed regular strchf-size-regular strchf-align-center">
<div class="embed-container">

<!-- The embed content -->
<div class="twitter-tweet twitter-tweet-rendered">
...
</div>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- The embed content -->

</div>
</figure>

d. Divider

<hr />

3. Rich media alternatives

For media block items like image, gallery, video, embed there is alternative displaying available. These alternatives can be enabled/disabled. See the help article on how to disable it and examples of layouts.

a. Sizing

regular (default)

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
...
</figure>

large

<figure class="image strchf-type-image large strchf-size-large strchf-align-center">
...
</figure>

full

<figure class="image strchf-type-image full strchf-size-full strchf-align-center">
...
</figure>

b. Positioning

center (default)

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
...
</figure>

left

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-left">
...
</figure>

right

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-right">
...
</figure>

Suggested CSS changes for your website

Do your articles not look absolutely correct after being published on your website? If so, you can apply the following code to your website's CSS file. If you need any help with this, start a chat on the platform.

Center images and media embeds

figure.image{
  text-align:center;
}
figure img,
.instagram-media,
.twitter-tweet {
  margin-left: auto !important;
  margin-right: auto !important;
}

Responsive images and media embeds

figure img, figure iframe {
  max-width: 100%;
}

Caption styling

figure figcaption {
  color: #9197a3;
  font-size: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  line-height: 2;
  margin-top: 10px;
}