Alert Box / Inbox Hack

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:

    Spoiler alert: All problems were solved.

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. :frowning:

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


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

#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;


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

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.

1 Like

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?

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.

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.

1 Like

Thank you for the suggestion, I will look into that :slight_smile: