Configuring Style

PowerWEB TextBox for ASP.NET provides extensive support for style modification. Every object used by PowerWEB TextBox for ASP.NET derives from web control (for example, HtmlBox, ToolbarButton, Toolbar, TabStrip, etc all derive from WebControl). This means that every object has it's own style object attached to it, allowing you to customize the look and feel of every displayed item. This can be as simple as making the editor a different color, or as elaborate as making each button, dialog, and menu a different color. To make it easier to configure, several global style objects are available. These are useful because they apply style changes to all applicable objects, which can be a time-saver when you want all similar objects to have the same style. For example, if you want all buttons to be yellow, instead of changing the BackColor of each button object to yellow, you can simply change HtmlBox.ButtonStyle.BackColor to yellow, which will apply the change to all buttons. The global style objects available are:

• HtmlBox.ButtonStyle - Any style changes applied to this object are applied to all buttons on the editor.
• HtmlBox.MenuStyle - Any style changes applied to this object are applied to all menus on the editor. These could be menus launched by a button (which is the case when using an InsertTable type of button) or the right-click menu.
• HtmlBox.DialogStyle - Any style changes applied to this object are applied to all dialogs launched by the editor.
• HtmlBox.DropDownStyle - Any style changes applied to this object are applied to all dropdowns on the editor.

This can all be done using the Property Builder application without writing code (see Using the Property Builder for more information on this). This topic addresses configuring styles using coding techniques.

The following topics are addressed:

• Setting styles using server tags
• General style implementation.
• Using the global style objects
• Special note about ButtonStyle
• Applying style to individual toolbar items

Setting styles using server tags

If you are not using code-behind, you can easily set styles of all objects in the server tags. The following example demonstrates setting styles of the editor, the buttons, and the dialogs.

<cc1:HtmlBox id=HtmlBox1 runat="server" BackColor="Lime" DialogStyle-BackColor="Blue" ButtonStyle-BackColor="Red">
</cc1:HtmlBox>

General style implementation.

Often, it may only be necessary to apply style changes to the HtmlBox class. This is because other classes (such as Toolbar, TabStrip, etc) have no style, and any style changes made to the HtmlBox class will "show through", as the following code demonstrates.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // Change the HtmlBox BackColor to yellow. This will cause the entire editor to appear yellow.
      HtmlBox1.BackColor = Color.Yellow;
      
      // Change the Toolbar BackColor to blue. This will cause the toolbar to be blue while the 
      // rest of the editor remains yellow.
      HtmlBox1.Toolbar.BackColor = Color.Blue;
      
      // Change the TabStrip to green. This will cause the tabstrip to be green, while the toolbar
      // and editor remain blue and yellow respectively
      HtmlBox1.TabStrip.BackColor = Color.Green;
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
   
      ' Change the HtmlBox BackColor to yellow. This will cause the entire editor to appear yellow.
      HtmlBox1.BackColor = Color.Yellow
      
      ' Change the Toolbar BackColor to blue. This will cause the toolbar to be blue while the 
      ' rest of the editor remains yellow.
      HtmlBox1.Toolbar.BackColor = Color.Blue
      
      ' Change the TabStrip to green. This will cause the tabstrip to be green, while the toolbar
      ' and editor remain blue and yellow respectively
      HtmlBox1.TabStrip.BackColor = Color.Green
   End If
End Sub

Using the global style objects

As indicated above, it is easy to change style properties on "single occurrence" objects such as HtmlBox, Toolbar, and TabStrip. However, it is another story when there are many occurrences of an object such as in the case with buttons, dialogs, dropdowns, and menus. Instead of having to change each style of each object, several global style objects can be used to control the style of all applicable items.

ButtonStyle (a more complex case) is addressed separately in the next section. Changing style of each object is also addressed in another section.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First change styles of all menus used (this includes the right-click menu)
      HtmlBox1.MenuStyle.ImageColumnColor = Color.Orange;
      HtmlBox1.MenuStyle.BackColor = Color.Beige;
      HtmlBox1.MenuStyle.BorderColor = Color.Blue;
      HtmlBox1.MenuStyle.BorderStyle = BorderStyle.Dotted;

      // Change styles of all dialogs.
      HtmlBox1.DialogStyle.TitlebarBackColor = Color.RoyalBlue;
      HtmlBox1.DialogStyle.BackColor = Color.BlanchedAlmond;

      // Change styles of all dropdowns
      HtmlBox1.DropDownStyle.BorderColor = Color.Red;
      HtmlBox1.DropDownStyle.BorderWidth = new Unit(3);
      HtmlBox1.DropDownStyle.BorderStyle = BorderStyle.Groove;
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
   
      ' First change styles of all menus used (this includes the right-click menu)
      HtmlBox1.MenuStyle.ImageColumnColor = Color.Orange
      HtmlBox1.MenuStyle.BackColor = Color.Beige
      HtmlBox1.MenuStyle.BorderColor = Color.Blue
      HtmlBox1.MenuStyle.BorderStyle = BorderStyle.Dotted

      ' Change styles of all dialogs.
      HtmlBox1.DialogStyle.TitlebarBackColor = Color.RoyalBlue
      HtmlBox1.DialogStyle.BackColor = Color.BlanchedAlmond

      ' Change styles of all dropdowns
      HtmlBox1.DropDownStyle.BorderColor = Color.Red
      HtmlBox1.DropDownStyle.BorderWidth = new Unit(3)
      HtmlBox1.DropDownStyle.BorderStyle = BorderStyle.Groove
   End If
End Sub

Special note about ButtonStyle

The HtmlBox.ButtonStyle property deserves special mention as it provides the capability for mouse-interaction effects. This enabled you to easily gain several different button "effects" by changing the mouse over style effects. For example, by default the buttons are set up to apply XP style effects. However, this can be changed to make the buttons appear three dimensional, as the following code illustrates.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   if(!Page.IsPostBack)
   {
      // Clear the current button style
      HtmlBox1.ButtonStyle.Clear();
      
      // Set the standard width, style, and color.
      HtmlBox1.ButtonStyle.BorderWidth = new Unit(2);
      HtmlBox1.ButtonStyle.BorderStyle = BorderStyle.Solid;
      HtmlBox1.ButtonStyle.BorderColor = HtmlBox1.BackColor; // Same as editor, so you don't see it.
      
      // Set the mouse over effects
      HtmlBox1.ButtonStyle.MouseOverBorderStyle = BorderStyle.Outset;
      HtmlBox1.ButtonStyle.MouseOverBorderColor = Color.Gray;
      
      // Set the mouse down effects
      HtmlBox1.ButtonStyle.MouseDownBorderStyle = BorderStyle.Inset;
      HtmlBox1.ButtonStyle.MouseDownBorderColor = Color.Gray;
      
      // Set the mouse up effects
      HtmlBox1.ButtonStyle.MouseUpBorderStyle = BorderStyle.Solid;
      HtmlBox1.ButtonStyle.MouseUpBorderColor = HtmlBox1.BackColor;
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
   
      ' Clear the current button style
      HtmlBox1.ButtonStyle.Clear()
      
      ' Set the standard width, style, and color.
      HtmlBox1.ButtonStyle.BorderWidth = new Unit(2)
      HtmlBox1.ButtonStyle.BorderStyle = BorderStyle.Solid
      HtmlBox1.ButtonStyle.BorderColor = HtmlBox1.BackColor ' Same as editor, so you don't see it.
      
      ' Set the mouse over effects
      HtmlBox1.ButtonStyle.MouseOverBorderStyle = BorderStyle.Outset
      HtmlBox1.ButtonStyle.MouseOverBorderColor = Color.Gray
      
      ' Set the mouse down effects
      HtmlBox1.ButtonStyle.MouseDownBorderStyle = BorderStyle.Inset
      HtmlBox1.ButtonStyle.MouseDownBorderColor = Color.Gray
      
      ' Set the mouse up effects
      HtmlBox1.ButtonStyle.MouseUpBorderStyle = BorderStyle.Solid
      HtmlBox1.ButtonStyle.MouseUpBorderColor = HtmlBox1.BackColor
   End If
End Sub

Applying style to individual toolbar items

If you would like to apply a different style to each toolbar item, this is possible. The following code demonstrates applying a different BackColor to every button on the default toolbar.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   if(!Page.IsPostBack)
   {
      foreach(BaseToolbarItem item in HtmlBox1.Toolbar.Items)
      {
         if(item is BaseToolbarButton)
         {
            // Get random RGB values
            Random rand = new Random();
            int R = rand.Next(255);
            int G = rand.Next(255);
            int B = rand.Next(255);

            // Convert to Color object and set
            item.BackColor = Color.FromArgb(R,G,B);

            // Put thread to sleep for a bit, otherwise the random values will be the same.
            System.Threading.Thread.Sleep(100);
         }
      }
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
   
      Dim item As BaseToolbarItem
      For Each item in HtmlBox1.Toolbar.Items
      
         If TypeOf(item) is BaseToolbarButton Then
         
            ' Get random RGB values
            Dim rand As New Random() 
            Dim R As Integer = rand.Next(255)
            Dim G As Integer = rand.Next(255)
            Dim B As Integer = rand.Next(255)

            ' Convert to Color object and set
            item.BackColor = Color.FromArgb(R,G,B)

            ' Put thread to sleep for a bit, otherwise the random values will be the same.
            System.Threading.Thread.Sleep(100)
         End If
      Next
   End If
End Sub

In This Section

Using the Property Builder

Describes how to use the built-in Property Builder to completely configure the HtmlBox without writing code.

Configuring Toolbar Layout

Describes the techniques that can be used to easily configure the items on a toolbar.

Configuring Style

Describes the techniqes that can be used to easily configure the style of the HtmlBox.

Using Helper Properties

Describes using the high-level "helper properties" to easily customize elements such as font names available in the drop down.