Create a Header Alert Banner

Create Header Alert Banner

Header Alert Banner components should be created in the following folder:
020 [Your Website] Content > Building Blocks > Website Content > Site Layout > Header

To make a Header Alert Banner component, complete the following fields:

1. Name: enter a name for your component here.
   
2. Schema: select Header Alert Banner   
   
3. Banner Enabled: select "No" if you do not wish to display the banner, or select "Yes" if you do wish to display the banner.
4. Banner cookie name: enter a unique name each time you update the banner. Please use hyphens instead of spaces, for example: banner-cookie-name 
5. Banner text: enter the content that will show up in your banner. Only basic formatting, such as bold, italics, and links, are permitted. 
6. Alert icon: if you want to have an icon appear alongside your banner text, you can select from the preset Font Awesome icons: (each item below is linked to an example of the icon) 
   1. -none-: no icons will be shown
   2. bell
   3. check-circle
   4. check-square
   5. exclamation
   6. exclamation-circle
   7. exclamation-triangle
   8. info-circle
   9. lightbulb-o
   10. map-marker
   11. question-circle
   12. tag
   13. thumb-tack
   14. user
   15. wheelchair
   16. wrench
7. Expiration: enter the number of days that the banner should appear. It will expire from the site after that time frame. (Please note: if you enter 0, the banner will fail to display.)
8. ADVANCED USERS ONLY!: for users familiar with CSS, you can enter stylesheet override commands in these fields. Please design for both desktop and mobile devices. 

When you've completed all the fields, Save and Close the component.

Link the banner to the header

When you've completed all the steps above, next you'll link your header alert banner to the header. 

1. Open the Header component located at  020 [Your Website] Content > Building Blocks > Website Content > Site Layout > Header
2. Scroll to the bottom of the Header component, and you'll see the Header Alert Banner field. 
3. Click the browse folder icon to the right of the Header Alert Banner field. Navigate to the Header Alert Banner, which should have been created in the  020 [Your Website] Content > Building Blocks > Website Content > Site Layout > Header folder. Select the Header Alert Banner component by double clicking it.
4. Save and Close the Header component.

Publish the header

When you've completed all the steps above, then all you need to do next is publish your header. 

To publish your header, navigate to 050 [Your Website] Website > Building Blocks > Website Content > Site Layout > Header 

In that folder is a component named Header. Right-click on that component and select Publishing > Publish:

Select the site you wish to publish to and click Publish. This will send the header to the publishing queue.

Verify the header looks like you want it to, and edit/republish as needed.