Example - Customize RibbonBar

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

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 24.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 24.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\ribbon.aspx

Example description

The TX Text Control RibbonBar consists of pure HTML and CSS and can be completely customized by changing the CSS. The following screenshot shows the modified style of the RibbonBar. The background color, borders, active button colors and hover colors have been modified.

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).

All you need to do to customize the ribbon bar is to include the tx.css into your HTML HEAD tag. In the CSS file, you will find all classes of ribbon tabs, groups, icons and other elements. Each class has a commented line that can be uncommented to hide this element in the ribbon bar.

/* 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;
}