Style Samples & Visual Guide

The Banner Alerts WordPress plugin is a very lightweight plugin and includes minimal styles. You can create your own unique styles by editing the css styles in the “Display styles” field in the Banner Alerts plugin settings. Below is a visual reference to quickly view the classes in the Banner Alerts plugin:

CSS Style Examples

These styles can be added to the “Display styles” field in the Banner Alerts plugin settings.
Banner Alert on a Website with a Fixed Header

For sites with a fixed header (the header stays “sticky” at the top of the site when you scroll down), you will need to position the banner alerts container above it. Add these styles to the “Display styles” field in the Banner Alerts plugin settings underneath the existing styles.

.banner-alerts-container { 
	position: absolute; 
	top: 0; 
	background: #fff; /*or whatever color you want the background to be */ 
	z-index: 999; /*this may need to be higher depending on the index of your fixed header*/ 
	width: 100%; 
}
Single Alert with a Read More Link 
.banner-alerts-container {
	background: #ff0055; /* enter your color value here */
	color:#fff;
}

.banner-alerts h2 {
	font-size: 30px;
	color: #fff;
}

.banner-alerts {
	max-width: 900px;
	padding: 10px;
	margin: 0 auto;
}

.banner-alerts a {
	color: #fff;
}

a.dismiss {
	display: block;
	text-align: right;
	clear: both;
}
Multiple alerts with titles linking to full posts 
.banner-alerts-container {
	background: #fff;
	color:#fff;
}

.banner-alerts h2 {
		font-size: 22px;
	padding-bottom: 5px;
	margin: 0;
	font-weight:normal;
}

.banner-alerts {
	max-width: 900px;
	padding: 10px;
	margin: 0 auto;
}

.alert {
	background: #ff0055; /* Enter your color value  here. */
	padding: 10px;
	margin: 10px 0;
}

.banner-alerts a {
	color: #fff;
	text-decoration: none;
}

a.dismiss {
	display: block;
	text-align: right;
	clear: both;
	color: #ff0055; */ enter your color value here. */
}

ScreenShots