ComponentOne WebEditor for ASP.NET: WebEditor for ASP.NET Task-Based Help > Customizing C1WebEditor's Appearance > Changing the Toolbar Items Border

Changing the Toolbar Items Border

You can change the color of C1WebEditor 's toolbar items using the ToolbarItem.BorderStyle property. C1WebEditor offers three methods of setting this property, all of which are described below.  

Setting the Toolbar Items Border Using the Designer

You can set the toolbar items border using the smart tag by completing the following tasks:

1.   Select C1WebEditor 's smart tag () to open the C1WebEditor Tasks menu.

2.   From the C1WebEditor Tasks menu, select Property builder.

The C1WebEditor Properties editor appears.

3.   Select the Styles tab.

 

     

 

4.   Under Styles, expand ToolBar to reveal its list of properties.

5.   Expand Items and then select Normal.

 

 

 

6.   In the Properties window, click the drop-down arrow next to BorderStyle and choose a border type. For this example, we will use the Inset border style.

7.   Click OK to close the editor. Observe that the toolbar items on your C1WebEditor are now set with an inset border.

Setting the Color of Toolbar Items in Source View

To set the color of the toolbar items in Source view, place the following markup between the </C1WebEditor:C1WebEditor> tags:

      

       <ToolBarItemStyle BorderStyle="Inset">

       </ToolBarItemStyle>

Setting the Toolbar Items Border Programmatically

If you prefer to work programmatically, you can set the border style of the toolbar items by adding C# or Visual Basic code to C1WebEditor 's Page_Load event.  The following code sets the style of the toolbar items borders to Inset

      Visual Basic

C1WebEditor1.ToolBarItemStyle.BorderStyle = BorderStyle.Inset

      C#

C1WebEditor1.ToolBarItemStyle.BorderStyle = BorderStyle.Inset;

 This Topic Illustrates the Following:

The toolbar items' border is now set as you specified. In addition, you have learned how to set the ToolbarItemStyle.BorderStyle property using the designer, Source view, and Visual Basic and C# code. 

Your final product should resemble the following image:

 

 

The image below shows a comparison between the original and inset style items borders.   

 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.
￿