How can I create a warning banner

Using Ghost
1

With certain articles I would like to add a little warning banner like this:

image
image775×139 8.07 KB

Is there an easy way of doing this? I haven’t been able to create something like this.

2

Where do you want it? In the header or inline as in the post?

3

I would like this inline within the post, at the points where required.

4

You could create a simple HTML card and save that as a snippet for later re-use.

Here’s a basic example:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Warning!</strong> Your text here.
</div>

Then some CSS to make it look okay:

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
1 Like
5

Thanks, that did help to get me started. Have got it like this:

image

Using the following template:

<div class="alert-warning">
  <span class="alert" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>Warning!</strong><br>It's not recommended to increase verbosity for daily use, as unbound logs a lot. But it might be helpful for debugging purposes.
</div>

With the following CSS:

.alert-warning {
border-style: none;
border-left-style: solid;
border-left-width: thick;
border-color: #f44336;
background-color: #f4c3c6;
padding-left: 4px;
border-radius: 15px;
padding: 20px;
color: black;
}
.alert {
margin-left: 15px;
color: black;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.alert:hover {
color: white;
}
6

Nice. Happy I could help.