Development updates for Tridion
Periodically we add new functionality, enhance existing content types, or fix bugs that we find along the way. Stay connected with all the most recent updates to Tridion on our Development Updates blog.
Creative Commons photo credit: Richard Masoner
New content type: header alert banner
Provide succinct time-sensitive information above your page header
3/30/2020 2:12:32 PM
Michael Tangen
We've introduced a brand new content type called "Header Alert Banner" — a thin, light-weight banner that spans the width of the browser and sits above your site's header. It persists on all pages, is closable by the end user, and uses cookies to remember the user's choice to close the banner.
It's highly configurable and allows for a variety of options. To learn more about this new content type, check out the video we've created that covers how the content type works, how to configure it, and some of the customization options available. Beneath this video is a list of the component fields and what they do.
What do I need to do to get this new content type?
Absolutely nothing. You should have this content type available to you now. The only thing you'll need to do is republish your website's CSS page assemblies to get the new style updates that handle the formatting of the Header Alert Banner. You may also need to publish out the cookies.js JavaScript library, which is located at 050 Website > Root > js > frameworks > cookies — and publish out the frameworks.cookies.js page assembly if it's not yet published.
Header Alert Banner fields and their values
- Banner enabled: allows you to toggle the banner on and off.
- Banner cookie name: a unique identifier (assigned by you) to ensure a unique cookie is placed in the user's cache.
- Banner text: a basic rich text field that allows you to put a short amount of text, a hyperlink or two, and some basic formatting options for the message inside the banner.
- Alert icon: an optional icon that will precede your message should you select one.
- Expiration: the number of days in which the cookie will expire
- Stylesheet override: the alert banner defaults to a yellow background. Advanced CSS users can use this field to place their own CSS overrides. If you are not proficient with CSS, do not use this field and leave it blank.
After the stylesheet override field are a variety of fields that allow you to configure offset values if your layout is highly customized and has altered the positioning of the navigation, search, and the header itself. Please leave these fields blank unless you know what you're doing. There are override fields that allow you to compensate the positioning of the navigation, body, and search blocks for both mobile and desktop views.
Creating a Header Alert Banner
To create a Header Alert Banner for use across your website, the process is quite simple.
- First create a new component using the "Header Alert Banner" schema. We suggest putting it in the same folder as your site's Header component.
- Next fill in all of the required fields:
- Name your component something that will help you know its purpose at a glance
- Enable your banner (if you're ready to use it right away)
- Give your banner a unique cookie name (alpha-numeric characters only please)
- Enter a small amount of text in the banner text field. Limit it to one or two sentences at most. KEEP IT SHORT!
- (Optionally) choose an icon to precede your text, and
- Set the expiration time of the cookie (a number in days)
- Save and close the component.
- Open up your header component, scroll to the bottom where there's a component link field for the Header Alert Banner, and load your new alert banner into that field. Save and close.
- Republish your header and you're good to go! We strongly suggest publishing just to staging FIRST, preview your work, and then if everything looks good, publish to live.
You may need to republish your CSS if you have not already done so if your alert banner looks off.
If you have questions or would like help setting up a Header Alert Banner for your Tridion site, submit a Work Order Request and we'll do our best to help you out!
General Updates
New Features
Updates