Re-skinning and Styling ASPNetSpell

• 1. Modifying the Look and Feel of the ASPNetSpell Button
• 2. Creating an New ASPNetSpell Theme
  • 2.1. Create a Custom Theme Directory
  • 2.2. Customize The Theme
  • 2.3. Implement Your Theme
• 3. More Easy Look and Feel Customizations

<ASPNetSpell:SpellTextBox ID="SpellTextBox1" runat="server" CSSTheme="bright">

Modifying the Look and Feel of the ASPNetSpell Button

The ASPNetSpell SpellButton can be rendered as an Image Button, a regular button or a link using the ButtonType property.

In addition - you can change the ImageButtons images by changing the Image and RolloverImage properties... as well as the rollover tooltip using the Text property.

In addition you can add a style attribute to modify the look in any way permitted by CSS.

Creating an New ASPNetSpell Theme

Using themes - you can completely re-arrange and re-skin ASPNetSpell, incluing the context menu and dialog.

1. Create a Custom Theme Directory

1. Go to /ASPNetSpellInclude/themes
2. Duplicate "classic" and rename to the name of your new theme

2. Customize The Theme

1. Edit context-menu.css to change the look of the inline (in-context) spellchecker and its menu
2. Edit dialog-window.css to change the look of pop-up spellchecker dialog

• wiggle.gif is used for the red underline effect
• gwiggle.gif is used for the green (grammar) underline effect
• aja-loader.gif is used for loading graphic in the pop-up spellchecker dialog

3. Implement Your Theme

To implement your theme - just set the CSSTheme property of either the SpellButton or SpellTextBox Class to the name of you theme (its folder name)

An example theme - "Bright" has been implemented as an example for you.

<ASPNetSpell:SpellTextBox ID="SpellTextBox1" runat="server" CSSTheme="bright">

More Easy Look and Feel Customizations

• The /ASPNetSpellInclude/themes'/buttons' folder contains the default image button for spellchecking - and its rollover state
• Apply the SpellCheckButton properties cass or style to apply custom CSS to your spell-check buttons or textboxs easily.
• Set the SpellCheckButton property ShowSummaryScreen to false to hide the summary.
• The hideButton method of the SpellButton & SpellTextBox Classes allows you to easily remove any button from the context menu or spell-check dialog.
• Set the UserInterfaceLanguage property of the SpellCheckButton or SpellAsYouType Classes to change the Language. Custom translations/text are possible.
• The UI Soucecode such as /ASPNetSpellInclude/dialog.htm can be customized.
• To make any SpellTextBox 'Elastic' to grow to fit the content as the user types... just add: style"height:auto"