Global Alert Ribbon (COVID-19 Example)

Elements/Existing Ribbon

The alert ribbon is a simple Plain HTML component that has been added to the site-wide Page design via the "Header" partial design.

global-alert-ribbon

This example of the ribbon's location in the Content tree is:

/sitecore/content/Baptist/Baptist/Baptistonline/United States/Data/Plain HTML/Coronavirus Heading

The HTML markup is minimal and should be easy to adjust:

<div class="row site-banner">
   <a class="col col-sm-12 align-center" href="/covid-19/coronavirus-exposure">
     <i class="fa fa-warning"></i> If you think you have been exposed to COVID-19, click here. 
   </a>  
</div>

All styling for the ribbon is also contained within the Plain HTML "code" field, inside the <style> tags. The css gradient used for the background in this use case was generated with ColorZilla Gradient Generator.

<style> 
.row.site-banner {
    position: absolute;
    background: #FEBE10;
    color: #00457A1;
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 0;
    top: 0;
    width: 100%;
    font-family: "Gotham SSm A","Gotham SSm B",sans-serif;
   /* background: #febe10;
    background: -moz-linear-gradient(top, #febe10 17%, #febe10 58%, #febe10 78%, #e29e3f 95%, #e29e3f 97%, #9e762c 100%);
    background: -webkit-linear-gradient(top, #febe10 17%,#febe10 58%,#febe10 78%,#e29e3f 95%,#e29e3f 97%,#9e762c 100%);
    background: linear-gradient(to bottom, #febe10 17%,#febe10 58%,#febe10 78%,#e29e3f 95%,#e29e3f 97%,#9e762c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febe10', endColorstr='#9e762c',GradientType=0 );*/

    background: #DA4852; 
    background: -moz-linear-gradient(top,  #DA4852 91%, #e80003 98%, #770015 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #DA4852 91%,#e80003 98%,#770015 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #DA4852 91%,#e80003 98%,#770015 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4505b', endColorstr='#770015',GradientType=0 ); /* IE6-9 */
    
    z-index: 2;
    padding: 19px;
    display: flex;
    align-items: center;
    min-height: 75px;
}


a.col.col-sm-12.align-center {
    text-decoration: none;
    font-weight: bold;
    /*color: #00457A1;*/
    color: #e1e1e1;
    font-size: 1rem;
    font-family: "Gotham SSm A","Gotham SSm B",sans-serif;
    text-shadow: 1px 3px 1px #a5000d;
    height: 100%;
    width: 100%;
    
}
a.col.col-sm-12.align-center:hover {
    color: #fff;
    
    -webkit-transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;

}
body {
    padding-top: 75px;
}
.choose-your-destination {
    margin-top: 7.3rem !important;
    margin-bottom: -6.9rem !important;
}
</style>

Unpublish Ribbon to hide from production

When the time comes to hide the ribbon from production, it can be easily removed:

  1. Locate Plain HTML component in Content Tree
  2. Select Publish Tab
  3. Change Publish Restrictions, making the component "Unpublishable"
  4. Publish the component to "Publish-Delete" from the web/production database

Removing component entirely

If it is desired to remove the component completely from the database, follow these steps:

  1. Complete steps in the previous section "Unpublish Ribbon to hide from production"
  2. Locate the component in the content tree, and unprotect it by clicking the "Unprotect Item" in the Content pane

    Unprotect ribbon component
  3. Select the "Navigate" tab in the Content Editor ribbon. Then click "Links", and verify the item isn't being referenced by any other items from which you did not intend to remove.

    Links referers
  4. If all references can be safely removed, click "Delete" on the Plain HTML component. When prompted, mark the radio button labeled "Remove links". Click "Continue".

    Remove links and delete

Building new/restoring ribbon alert (Globally)

  1. Create a new "Plain HTML (Reusable)" component under the site's Data/Plain HTML folder
  2. Copy/Paste the HTML Markup as well as the Ribbon CSS into the "Code" field, and Save
  3. Protect the component by clicking the "Configure" Tab in the Content Editor ribbon. Find the Attributes column. Then click "Protect Item".
  4. Add the component to the Header partial design.
    ...site root/Presentation/Partial Designs/Header
    and
    ...site root/Presentation/Partial Designs/Legacy Partial Designs/Header
  5. Open the presentation details, final layout, controls, add a new rendering, select "Renderings>Project>General>Raw HTML"

    Add component to header presentation details
  6. Change the ordering of the component by selecting it, use the "Move Up" and "Move Down" buttons to adjust the component's order in the page layout in relationship to other components with the same placeholder (e.g. "body-top")

    Component ordering
  7. Finally set the rendering's Data Source to the new Plain HTML component you created in the data folder

    Component data source
  8. Repeat steps for "Legacy Partial Designs" "Header" partial design.

Note: The steps outlined above could also be used on a single page as well if the desired result is to have a ribbon on a single page. Simply repeat the same process in that page's presentation details.