Notification

Overview

At some point in time, you may have to display various temporary or permanent notifications regarding a seasonal discount, temporary glitch or current situation on your site. The Notification element is used to display notification box with a message in various styles depending on the importance of the message.

Check out the notification examples.

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode 

[av_notification title='Note' color='green' border='' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='no' icon='ue800' font='entypo-fontello' custom_class='' admin_preview_bg='' av_uid='av-4crf3f']
This is a notification of some sort.
[/av_notification]

Customization

Font

Font color can be easily updated in the notification element settings. The font style is inherited from the theme options. To add custom style to the notification font please use the CSS below.

I’m a notification box with custom styled font.

/*----------------------------------------
// CSS - Notification font
//--------------------------------------*/

#top .avia_message_box_content p{
    text-transform: none;
    font-size: 20px;   
    letter-spacing: .005em;
    font-family: 'Raleway', sans-serif!important;
    font-style: normal;
    font-weight: 800!important;
    line-height: 1.10909;
}

Background

Same as the font color the background color can be easily updated in the notification element settings. If you like to style the notification box with custom css please find the code snippet below.

I’m a notification box with custom background.

/*----------------------------------------
// CSS - Notification Background
//--------------------------------------*/

#top .avia_message_box { 
background: #00c3ff;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffff1c, #00c3ff);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffff1c, #00c3ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Alignment

By default, the notification box message is center aligned. To align the message to the left or right please use the CSS snippet below.

I’m a notification box with font aligned to left.

/*----------------------------------------
// CSS - Notification align text
//--------------------------------------*/

#top .notialign .avia_message_box_content {
text-align: left;
}

Site wide notification

Let us discuss how to create a site-wide notification on top of the header as seen in the below image without using a plugin.

Steps to create a sitewide notification bar:

  • Enable header widget area by adding the below code to the function.php file.
    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
}
  • Go to Appearance > Widget and create a widget area called “Header”.
  • Drag and drop a text widget into the newly created header widget area.
  • Create a new page with the notification element and add a custom CSS class name “sitewide” to the notification element.
  • Copy the notification box shortcode into the text area. To view the element shortcode enable debug mode.
  • And finally, add the below CSS to your child theme styles or Quick CSS.
/*----------------------------------------
// CSS - Sitewide Notification 
//--------------------------------------*/
#header .widget {
	overflow: visible!important;
	position: absolute!important;
	display: block!important;	
	background: gold;
	line-height: 30px;
	padding: 0;
	margin: 0;
	z-index: 99999;	
	padding-top: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-height: 30px;
	z-index: 9999;
}
#header .widget .avia_message_box.sitewide {	
	padding: 0;
	margin: -30px;
}


#header {
	margin-top: 30px;
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    margin-top:30px!important;
}}


#header .widget .avia_message_box.sitewide:before,
#header .widget .avia_message_box.sitewide:after {
	content:'';
	width: 100vw;
	height: 100%;
	top:0;
	background: #00a0af;
	position: absolute;
	z-index: -1;
}
#header .widget .avia_message_box.sitewide:before {
	left: 0;
}
#header .widget .avia_message_box.sitewide:after {
	right: 0;
}

Resource

Contributed video:

Notification Element Tutorial