HTML5 Web Editor - Customize RibbonBar

The TX Text Control RibbonBar is pure HTML and CSS and can be completely customized by changing the CSS.

This demo comes with a complete CSS file that contains all ribbon tabs, groups and buttons for customization. The RibbonBar in this demo has changed colors, font sizes and only one active ribbon tab (Home). Additionally, the last ribbon group of the ribbon tab is disabled (Editing).


You can also remove single buttons and add buttons to the RibbonBar dynamically by manipulating the DOM directly.
Everything is customizable.


	/* Make ribbon titles normal (default: uppercase) */
	#txTemplateDesignerContainer ul.tabs li {
		text-transform: none !important;

	/* Set background color of ribbon */
	#txRibbonContentArea {
		background: -webkit-linear-gradient(#FFF, #a5a5a5); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#FFF, #a5a5a5); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#FFF, #a5a5a5); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#FFF, #a5a5a5); /* Standard syntax */
		color: white;

<div style="height: 600px;" class="sample">
	<cc1:TextControl style="border-bottom: 1px solid #999999;" ID="TextControl1" runat="server"
        Dock="Fill" StatusBarColor="DarkGray" />

HTML5 Web editor