The code below is the default HTML and CSS styles for a Dialogue message. You can use this as a template to design your own messages.
<style>
.sp_message_container {
all: initial;
font-family: inherit;
* {
line-height: initial !important;
all: unset;
}
}
.sp_veil {
display: block;
position: fixed;
z-index: 10000;
left: 0;
right: 0;
bottom: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.sp_message_container {
all: initial;
font-family: inherit;
* {
line-height: initial !important;
all: unset;
}
}
.sp_message_container {
position: relative;
margin: auto;
width: 100%;
z-index: 10000;
display: none;
}
.sp_message {
margin: auto;
}
.sp_message .sp_message_content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.sp_message_container .sp_message_title {
padding: 30px 30px 15px 30px;
margin: 0;
font-size: 16px;
font-weight: bold;
color: #606060;
background-color: transparent;
}
.sp_message_container .sp_message_text {
padding: 10px 30px 10px 30px;
margin: 0;
font-size: 14px;
max-width: 800px;
line-height: initial;
color: #303030;
overflow: auto;
}
.sp_message_container .sp_message_text p {
margin: 0;
padding: 0 0 8px;
}
.sp_message_body {
background-color: transparent;
padding: 0 0 20px;
flex-grow: 1;
}
.sp_message .sp_message_panel {
display: block;
border: 1px solid #DDDDDD;
}
.sp_message .sp_message_frame {
overflow: auto;
padding: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#26000000', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
background-color: #EEE
}
.sp_message_container .clearfix {
clear: both;
}
.sp_message_row {
display: flex;
position: relative;
background-color: #F4F4F4;
width: 100%;
}
.sp_message_row::after {
clear: both;
content: "";
display: block;
}
.sp_message button {
border: 0 none;
background-color: #3B7BB3;
color: #FFF;
font-size: 14px;
padding: 8px 25px;
float: right;
margin: 0 15px 0 0;
}
.sp_message button:hover {
background-color: #27669D;
color: #FFF;
}
.sp_side_image {
display: none;
width: 50%;
max-width: 212px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sp_image_logo {
display: block;
margin: 0 auto 10px;
}
.sp_message .sp_choices {
display: flex;
padding: 10px;
flex-direction: row;
align-items: center;
padding: 0px 30px 30px 30px;
}
.sp_message .sp_choices>iframe {
border: 0 none;
background: transparent;
flex-grow: 1;
}
.sp_message .sp_choices>button {
flex-grow: 0;
font-weight: bold;
}
.sp_message .sp_message_dismiss {
display: none;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
z-index: 1500;
color: #666666;
font-family: Verdana;
font-size: 15px;
font-weight: normal;
font-style: normal;
height: 22px;
line-height: 20px;
overflow: hidden;
width: 22px;
text-decoration: none;
border: 0 none;
outline: none;
background: transparent;
padding: 0;
}
.sp_message .sp_message_dismiss:hover {
background-color: inherit;
}
.sp_message .sp_message_dismiss:outline {
outline: none;
}
.sp_iframe_container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
}
.sp_iframe_container iframe {
width: 100%;
height: 100%;
border: 0 none;
}
.sp_message .sp_message_dismiss {
display: block;
}
.sp_message_container,
.sp_message {
left: 0;
right: 0;
bottom: 0;
top: 0;
position: fixed;
}
.sp_message {
width: 50%;
height: 50%;
max-width: 650px;
max-height: 300px;
}
@media screen and (max-width: 979px)
/* Tablet */
{
.sp_message {
width: 75%;
height: 75%;
}
}
@media screen and (max-width: 500px)
/* Mobile */
{
.sp_message {
width: 95%;
height: 95%;
}
}
.sp_veil {}
.sp_message_container {
border: 2px;
}
</style>
<div class="sp_veil" style="display: block"></div>
<div id="sp_message_id" class="sp_message_container" style="display: block;">
<div class="sp_message">
<div id="sp_message_panel_id" class="sp_message_panel">
<div class="sp_message_frame">
<div class="sp_message_row"><button class="sp_message_dismiss">x</button>
<div class="sp_side_image sp_left_image sp_message_column"></div>
<div class="sp_message_column sp_message_content">
<div class="sp_message_body" id="sp_message_body_id">
<div class="sp_message_title">We've noticed you are using an ad blocker.</div>
<div class="sp_message_text">
<p>We rely on advertising to offer our journalism for free.</p>
<p>Please whitelist us or disable your ad blocker, and reload the page.</p>
<p>Thank you for supporting us.</p>
</div>
</div>
<div class="sp_choices"> </div>
</div>
<div class="sp_side_image sp_right_image sp_message_column"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>