How To Add Custom Html Into The sitecore Ribbon
Mon 6 June, 2016 / By Jon D Jones
This is another post about customising the Sitecore user interface. On a recent project, I needed to display the company's logo in the Sitecore ribbon, with a link to their website. I've talked previously in, How To Add A Custom Sitecore Button To The Editor Ribbon about some of the possibilities to add bespoke code and buttons into the Sitecore ribbon. In this article, I'm going to go one step further and inject custom HTML into Sitecore.
Sitecore Ribbon Panel
The Sitecore ribbon is the main go-to toolbar for content editors to do content related tasks. In order to inject custom HTML, we're going to create a new class that inherits from 'RibbonPanel'.
public class CustomLogo : RibbonPanel
public override void Render(HtmlTextWriter output,
var htmlOutput = string.Empty;
htmlOutput += "<div><a href='http://www.jondjones.com/'><img src='http://jondjones.com/wp-content/uploads/2013/04/logo.png' height='35'></a> </div>";
The code to inject HTML is fairly straight-forward. First, override the Render method. In the render method, a HtmlTextWriter gets injected. This is the way we can write our own HTML into Sitecore.
All you need to do is write whatever HTML you want to use within your website and pass it into the text writers stream by using output.Write()
Configuring Sitecore To Use A Custom RibbonPanel
To configure your Sitecore ribbon, switch your database to 'Core' (How To Switch Between The Core and Master Database in Sitecore
). In here you will need to add a new panel. Navigate to 'Content' -> 'Applications' -> 'Content Editor' -> 'Ribbons' -> 'Chunks'. In here create a new chunk (or use an existing one). To do this right click on the 'Chunks' folder, select 'Insert' -> 'Insert From Template' and use '/sitecore/templates/System/Ribbon/Chunk' as the template.
Right click on your new chunk and again select 'Insert' -> 'Insert From Template' and use '/sitecore/templates/System/Ribbon/Panel' as the template. In the 'Type' add in the
In my example my namespace is JonDJones, my class is CustomRibbon and the assembly is called JonDJones.Core.
After you have saved your item, go to 'Content' -> 'Applications' -> 'Content Editor' -> 'Ribbons' -> Strips. In here create a new reference, so select 'Insert' -> 'Insert From Template' and use '/sitecore/templates/System/Reference ' as the template.
In 'Data' -> 'References', add a link to the chunk we created above. After you hit save, if you look in the ribbon and you have the strip you added your chunk to, you should see the chunk and your custom HTMl displayed.
In today's guide, we've covered an alternative way you can customise the Sitecore UI. If you want to add your own HTML, then you can create a new class that inherits from RibbonPanel. In the editor, you can add a new item that inherits from '/Sitecore/templates/System/Ribbon/Panel' to import this HTML. How you configure Sitecore is your choice but usually you will create a custom chunk and add it to a strip.