Re-skinning and Styling ASPNetSpell


SourceCode:
<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.

SourceCode:
<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"