Modifying the Look and Feel of the Spell Checker

The spellchecker's look and feel can be modified by creating a custom theme.

1 - Create a Custom Theme Directory

  1. Go to /phpspellcheck/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 SpellCheckButton or SpellAsYouType Class to the name of you theme (its folder name)

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

$mySpell->CSSTheme = "my_themes_directory_name";

More Easy Look and Feel Customizations

  • The /phpspellcheck/themes'/buttons' folder contains the default image button for spellchecking - and its rollover state
  • The Text, ImageRollOver & Image properties of the SpellCheckButton Class change the text and images rendered to the screen for your spell-checker buttons
  • Choose between the SpellButton, SpellImageButton and SellLink method of the SpellCheckButton to change button type.
  • Apply the SpellCheckButton properties Class or Style to apply custom CSS to your spell-check buttons easily.
  • Set the SpellCheckButton property ShowSummaryScreen to false to hide the summary.
  • The hideButton method of the SpellCheckButton & SpellAsYouType 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 /phpspellcheck/dialog.htm can be customized.