{"id":371,"date":"2017-02-19T04:45:41","date_gmt":"2017-02-19T04:45:41","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=371"},"modified":"2020-03-31T10:23:00","modified_gmt":"2020-03-31T10:23:00","slug":"notification","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/notification\/","title":{"rendered":"Notification"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-24448225a64f99c34d71f214de6af838\">\n#top .av-special-heading.av-av_heading-24448225a64f99c34d71f214de6af838{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-24448225a64f99c34d71f214de6af838 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-24448225a64f99c34d71f214de6af838 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-24448225a64f99c34d71f214de6af838 av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Notification<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-5wgckb-bdc379519a832b15b769f62306202b4e hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-kmaib-bb6471deb2e214296f7039f543a876b4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-jxwf7-1970f4ee13552db30d1427f69ae573ec '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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. <\/p>\n<p>Check out the <a href=\"http:\/\/www.kriesi.at\/themes\/enfold-2017\/elements\/notification\/\" rel=\"noopener noreferrer\" target=\"_blank\">notification examples<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-5bjk97-ab25e21606443810117d7ea4c1813ff8 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-56nhir-7bd299eacf3dc54c424ba8f2ec7ef1c8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-6  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to 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.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-4tt8bf-7a809b21d6ca0c14ae114969fe46a10e hr-default  avia-builder-el-7  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4qebxn-192cd256be92fb7e171a63322c02210e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode <\/h3>\n<\/div><\/section>\n\n<div  class='hr av-46e7jv-1887f58a89a912f43cbb60781a969113 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-41636b-2e436dff4fab8bfd63f1f1c9ef7c3c19 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-3wy8cr-223b9eba3d60ec3413e107c8b5c0dd27 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3pdqxv-c8c2cc3a826bab092ec3546de8729c68 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Font<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imxff-57794e0b221f6cb24304ecd6f7abd649 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-3eeq9f-509fdb785022e8d2be5708c7b9df66d5\">\n.avia_message_box.av-3eeq9f-509fdb785022e8d2be5708c7b9df66d5{\nbackground-color:#00a0af;\ncolor:#ffffff;\n}\n.avia_message_box.av-3eeq9f-509fdb785022e8d2be5708c7b9df66d5 .avia_message_box_icon.avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<div id='avia-messagebox-' class='avia_message_box av_notification av-3eeq9f-509fdb785022e8d2be5708c7b9df66d5 avia-color-custom avia-size-large avia-icon_select-yes avia-border-  avia-builder-el-10  avia-builder-el-no-sibling  notifont' ><div class=\"avia_message_box_content\"><span class='avia_message_box_icon avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue81f' data-av_iconfont='entypo-fontello' ><\/span><p>I&#8217;m a notification box with custom styled font.<\/p>\n<\/div><\/div>\n<section  class='av_textblock_section av-39l84b-9f3b9abeb40d3af5ed0ce10e7c577b8c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Notification font\n\/\/--------------------------------------*\/\n\n#top .avia_message_box_content p{\n    text-transform: none;\n    font-size: 20px;   \n    letter-spacing: .005em;\n    font-family: 'Raleway', sans-serif!important;\n    font-style: normal;\n    font-weight: 800!important;\n    line-height: 1.10909;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-31ba1f-e7256bb1ba1fab7f02cfab0dfb65d5bd hr-default  avia-builder-el-11  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2uzszv-3c6fac00d303862f76274db2e38a7082 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Background<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2sye8z-07e0ff6883ecc1a03e161a3f07e91061 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Same as the font color\u00a0the 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.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2jiftn-a3ea1e6f858481f40dd1943d7bf37ebb\">\n.avia_message_box.av-2jiftn-a3ea1e6f858481f40dd1943d7bf37ebb{\nbackground-color:#00a0af;\ncolor:#ffffff;\n}\n.avia_message_box.av-2jiftn-a3ea1e6f858481f40dd1943d7bf37ebb .avia_message_box_icon.avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<div id='avia-messagebox-' class='avia_message_box av_notification av-2jiftn-a3ea1e6f858481f40dd1943d7bf37ebb avia-color-custom avia-size-large avia-icon_select-yes avia-border-  notibg' ><div class=\"avia_message_box_content\"><span class='avia_message_box_icon avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue81f' data-av_iconfont='entypo-fontello' ><\/span><p>I&#8217;m a notification box with custom background.<\/p>\n<\/div><\/div>\n<section  class='av_textblock_section av-2elz77-cb99d9498a62bb624095ff2e15ce2e93 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Notification Background\n\/\/--------------------------------------*\/\n\n#top .avia_message_box { \nbackground: #00c3ff;  \/* fallback for old browsers *\/\nbackground: -webkit-linear-gradient(to right, #ffff1c, #00c3ff);  \/* Chrome 10-25, Safari 5.1-6 *\/\nbackground: linear-gradient(to right, #ffff1c, #00c3ff); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-2bc8rv-31803eeeb8ad8c0bc6aeb40f8ae7037b hr-default  avia-builder-el-13  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-22j3c3-6105a172fb4bf2ad57726005ac4a8ea5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Alignment <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1whzqz-d7378ae7ab500453d8d8f8f39fbdbc03 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, the notification box message is center aligned. To align the message to the left or right please use the CSS snippet below.<\/p>\n<\/div><\/section>\n<div id='avia-messagebox-' class='avia_message_box av_notification av-6ao0b-a9c6e4d658c1672577572213130c9ec0 avia-color-green avia-size-large avia-icon_select-yes avia-border-  avia-builder-el-16  el_after_av_textblock  el_before_av_textblock  notialign' ><div class=\"avia_message_box_content\"><span class='avia_message_box_icon avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue81f' data-av_iconfont='entypo-fontello' ><\/span><p>I&#8217;m a notification box with font aligned to left.<\/p>\n<\/div><\/div>\n<section  class='av_textblock_section av-1mda4b-45694724817adb58570c224966244a9c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Notification align text\n\/\/--------------------------------------*\/\n\n#top .notialign .avia_message_box_content {\ntext-align: left;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-1eaiiz-fa64737dbd048e6d97573bb6e1f461c8 hr-default  avia-builder-el-18  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-18wh6r-46c5370acdacd5ed0d5513494e07d410 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Site wide notification<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-14ys3v-b013467af2dddfd17d0434d6864d2f5e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Sitewide.png\" alt=\"\" width=\"1244\" height=\"158\" class=\"alignnone size-full wp-image-7280\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Sitewide.png 1244w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Sitewide-300x38.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Sitewide-768x98.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Sitewide-1030x131.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Sitewide-705x90.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Sitewide-450x57.png 450w\" sizes=\"auto, (max-width: 1244px) 100vw, 1244px\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-yv68r-cfaba6d23159edbfbdaaab01bb9e2027 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Steps to create a sitewide notification bar<\/strong>:<\/p>\n<ul>\n<li>Enable header widget area by adding the below code to the function.php file.<br \/>\n<\/li>\n<\/ul>\n<ul>\n<li>Go to Appearance &gt; Widget and create a widget area called &#8220;Header&#8221;.<\/li>\n<\/ul>\n<ul>\n<li>Drag and drop a text widget into the newly created header widget area.<\/li>\n<li>Create a new page with the notification element and add a custom CSS class name &#8220;sitewide&#8221; to the notification element.<\/li>\n<\/ul>\n<ul>\n<li>Copy the notification box shortcode into the text area. To view\u00a0the element shortcode enable <a href=\"http:\/\/localhost\/enfold\/documentation\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener noreferrer\">debug mode<\/a>.<\/li>\n<\/ul>\n<ul>\n<li>And finally, add the below CSS to your child theme styles or Quick CSS.<\/li>\n<\/ul>\n<pre>\/*----------------------------------------\n\/\/ CSS - Sitewide Notification \n\/\/--------------------------------------*\/\n#header .widget {\n\toverflow: visible!important;\n\tposition: absolute!important;\n\tdisplay: block!important;\t\n\tbackground: gold;\n\tline-height: 30px;\n\tpadding: 0;\n\tmargin: 0;\n\tz-index: 99999;\t\n\tpadding-top: 0;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmax-height: 30px;\n\tz-index: 9999;\n}\n#header .widget .avia_message_box.sitewide {\t\n\tpadding: 0;\n\tmargin: -30px;\n}\n\n\n#header {\n\tmargin-top: 30px;\n}\n@media only screen and (max-width: 767px) {\n.responsive #top #wrap_all #header {\n    margin-top:30px!important;\n}}\n\n\n#header .widget .avia_message_box.sitewide:before,\n#header .widget .avia_message_box.sitewide:after {\n\tcontent:'';\n\twidth: 100vw;\n\theight: 100%;\n\ttop:0;\n\tbackground: #00a0af;\n\tposition: absolute;\n\tz-index: -1;\n}\n#header .widget .avia_message_box.sitewide:before {\n\tleft: 0;\n}\n#header .widget .avia_message_box.sitewide:after {\n\tright: 0;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-aidf-3ffd770afc384dd671c355feda29c4ef hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-n3pn7-e43ed0c30bf56f6e84a4baac6eddf5de '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-1mewr-e1e5587ecd2b264c5b4d9b33f5e4ab3e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-pdv7-6ebc4daf5410aacc4e994cd37dfcea6f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=slRMNso497Q\">Notification Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[18],"class_list":["post-371","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-enfold-xtra","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=371"}],"version-history":[{"count":2,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/371\/revisions"}],"predecessor-version":[{"id":12863,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/371\/revisions\/12863"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}