Re-skinning and Styling ASPNetSpell
ASPNetSpell - The Spell Checker for ASP.Net Web Applications > Tutorials > 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
- Go to /ASPNetSpellInclude/themes
- Duplicate "classic" and rename to the name of your new theme
2 - Customize The Theme
- Edit context-menu.css to change the look of the inline (in-context) spellchecker and its menu
- 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"
