Customizing the Flex RichTextEditor control’s title style

The following example shows how you can stylize the Flex RichTextEditor control’s title bar by setting the titleStyleName style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/21/customizing-the-flex-richtexteditor-controls-title-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .richTextEditorTitleStyle {
            color: haloBlue;
            fontSize: 24;
            fontWeight: bold;
            textAlign: center;
        }
    </mx:Style>

    <mx:RichTextEditor id="richTextEditor"
            title="Rich Text Editor"
            titleStyleName="richTextEditorTitleStyle" />

</mx:Application>

View source is enabled in the following example.

You could also set the titleStyleName style using CSS, as shown in the following snippet:

<mx:Style>
    RichTextEditor {
        titleStyleName: richTextEditorTitleStyle;
    }

    .richTextEditorTitleStyle {
        color: haloSilver;
        fontSize: 24;
        fontWeight: bold;
        textAlign: center;
    }
</mx:Style>

<mx:RichTextEditor id="richTextEditor"
        title="Rich Text Editor" />

Tagged as: titleStyleName