Add text or image between suite bar in Ribbon

Environment: SharePoint 2013 Enterprise

Requirement: Add text or image between suite bars

Solution:

Edit the master page using SharePoint Designer and add <div> tags with banner text or images as required. The following code snippet is from the out of the box seattle.master page. Text that are highlighted are inserted between the suite bars.

<div id="suiteBar" class="ms-dialogHidden noindex" >

  <div id="suiteBarLeft">

  <div class="ms-table ms-fullWidth">

     <div class="ms-tableRow">

        <div class="ms-tableCell ms-verticalAlignMiddle">

                <SharePoint:DelegateControl id="ID_SuiteBarBrandingDelegate" ControlId="SuiteBarBrandingDelegate" runat="server"/>

        </div>

        <div class="ms-tableCell ms-verticalAlignMiddle" style="text-align:center;font-weight:bold;color:#FF3300;"> [[[ SOME BANNER IMAGES ]]] </div>

        <SharePoint:AjaxDelta runat="server" id="DeltaSuiteLinks" BlockElement="true" CssClass="ms-core-deltaSuiteLinks">

            <div id="suiteLinksBox">

                <SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />

            </div>                                                                                                              

         </SharePoint:AjaxDelta>

         <div class="ms-tableCell ms-verticalAlignMiddle" style="text-align:center; font-weight:bold;color:#FF3300;"> [[[ SOME BANNER TEXT ]]] </div>

      </div>

  </div>

</div>

To insert a row below the Suite bar

<SharePoint:ThemedClusteredHoverImage

                                    runat="server"

                                    ……………………

</span>

</div>

</SharePoint:AjaxDelta>

</div>

</div>

<div id="s4-ribbonrow ms-verticalAlignMiddle" style="text-align:center;font-size:large;font-weight:bold; background-color:#6699FF;">[[ SOME SAMPLE TEXT/BANNER ]]</div>

<div id="ms-hcTest"></div>

<div id="s4-ribbonrow">

<div id="globalNavBox" class="noindex">

<div id="ribbonBox">

  <div id="s4-ribboncont">

  <SharePoint:AjaxDelta id="DeltaSPRibbon" BlockElement="true" runat="server">

                <SharePoint:DelegateControl runat="server" ID="GlobalDelegate0" ControlId="GlobalSiteLink0" />

                  <SharePoint:SPRibbon

                                    runat="server"

                                    PlaceholderElementId="RibbonContainer"

                                    CssFile="" >

                                    <SharePoint:SPRibbonPeripheralContent

                                      runat="server"

                                      CssClass="ms-core-defaultFont ms-dialogHidden"

                                      Location="TabRowLeft">

                                    </SharePoint:SPRibbonPeripheralContent>

P.S. Create appropriate CSS classes and add to the style sheet.