Alert Box / Inbox Hack

[uxerik]

I want to use a info box (similar to this example) on my ghost site. Preferably something with an icon. I found a little hack by using an HTML card:

<pre>
  <code>
    Spoiler alert: All problems were solved.
  </code>
</pre>

The problem with the hack: it does not look very clean as you see in this screenshot:

Is there a cleaner way? I saw that there where a couple of similar topics by user gregpozo on this forum. But all the links pointed to a dead website.

I use Ghost 3.41.3 with dawn theme that’s running on a Fastcomet server.

[uxerik]

I found a solution for that: creating a custom HTML snippet with that code:

<style>
#container {
    height: 100px;
    display: flex;
    /* flex-direction: column;*/
    align-items: center; 
    /* justify-content: center;*/
	background-color: #f0f0f0;
	border-radius: 4px;
    padding: 10px;
}
#content {
    width: 100%;
    text-align: center;
}

</style>

<div id="container">
    <div id="content">
        Spoiler alert: All problems were solved.
    </div>
</div>

[PixelzFairy]

Its still possible to buy them from @gregpozo, for the ones who are interested.
I have bought them in January, even though his web is dead, which is a pity I need to say.

Link here.

[uxerik]

Good to know. Thanks PixelzFairy. How are they implemented and how do you use them within Ghost? Can you add them with /alert or similar?

[PixelzFairy]

Also implemented as an HTML card. The codes are provided once you buy it.
Im using is as below for example, my “quotes” are too big so needed something a little bit different

And here the file what is included in. Also there is a documentation with it.

[uxerik]

Awesome. Thanks for sharing. I think I will sit down and improve my infobox snippet in the future to add some color and icons.

As a suggestion if I may: you could increase the radius size of your quote box, increase the paddings and remove the outline. I think this would match very good with the aesthetics of your website.

[PixelzFairy]

Thank you for the suggestion, I will look into that