Once you have built the Telerik RadToolBar structure, you need to set the component's appearance. Otherwise, the default look-and-feel of the toolbar will be used.
In order to make the appearance customization process as easy as possible, the component uses skins: a set of images and a CSS stylesheet that can be applied to the toolbar elements (buttons, separators, background, etc.) and define their look-and-feel.
Set the Skin property to determine which skin to be applied to the toolbar.
You can also create your own skins, but you have to follow the skin structure.
 |
The fastest way to get started with your own custom skin is by modifying an existing skin. From http://www.telerik.com/skins, you can download all resources necessary to deploy or modify selected skins for the Telerik components. Each skin archive contains the images, CSS, and ASPX declaration needed to apply a skin in your project, as well as the original Adobe Photoshop PSD source file you will need to modify the design. For more instructions, please refer to the Readme file in the skin archive. |
Apart from skins, you can use the DisplayType, ButtonText, and ButtonImage properties of the RadToolBarButton class to manipulate the look of each button on a toolbar.
Example:
The example below shows how you can define a simple toolbar from the ASP.NET:
- The toolbar has three buttons ("New", "Cut", and "Open") with separators.
- The value of the DisplayType property determines whether both the text and the button contains text, an image, or both text and image.
- The text contained in the first and third buttons is defined by the value of the ButtonText property.
- The image contained in the second and third buttons is defined by the value of the ButtonImage property.
| |
 Copy Code |
|
<rad:radtoolbar runat="server" id="Radtoolbar2" skin="Office2003" UseFadeEffect="True">
<items>
<rad:radtoolbarbutton DisplayType="TextOnly" ButtonText="new" CommandName="New" />
<rad:RadToolBarSeparator />
<rad:radtoolbarbutton DisplayType="ImageOnly" ButtonImage="cut.gif" CommandName="Cut" />
<rad:RadToolBarSeparator />
<rad:radtoolbarbutton DisplayType="TextImage" ButtonText="open" ButtonImage="open.gif" CommandName="Open" />
</items>
</rad:radtoolbar> |