WebSpellChecker.net Wiki

Home:Installation Instructions for Licensed WebSpellChecker

Customizing the WebSpellChecker Web Interface

1. Overview

One of the design goals for WebSpellChecker is to allow clients to produce a spell checking dialog consistent with their own appearance guidelines. This document will first describe the files normally available for customization. Then each customizable item will be reviewed separately.

2. Directory structure

A custom look-and-feel package should be prepared in precise format to be properly understood by the WebSpellChecker Web engine. This implies files with predefined names stored in predefined folders.

There are several locations where customizable files should be placed:

  • <WebSpellCheckerProgramFolder>/WebComponents/WebInterface/lf/
  • <WebSpellCheckerProgramFolder>/WebComponents/WebInterface/templates/lf/
  • <WebSpellCheckerProgramFolder>/WebComponents/WebInterface/texts/

wsc-tree.jpg

The first location contains common public files. The second location contains custom templates. The third location contains text messages, button captions used in the WebSpellChecker window

The WebInterface/templates/lf/ folder contains the templ folder, where spell checking dialog parts are stored.

The WebInterface/lf/ and WebInterface/templates/lf/ directories contain one or more subdirectories with look-and-feel schemas. Schema 18 is used by default.

Each public directory in WebInterface/templates/lf/<schema>/ contains three .css files (mid.css, styles.css and top.css) and twelve locale-specificsub directories with images for eleven supported locales, plus one directory for files shared across all locales. The names are as follows:

  • img - shared images (logo and borders)
  • img_br - British English language support
  • img_dk - Danish language support
  • img_en - American English language support
  • img_fr - French language support
  • img_de - German language support
  • img_it - Italian language support
  • img_nl - Dutch language support
  • img_no - Norwegian language support
  • img_pt - Portuguese language support
  • img_se - Swedish language support
  • img_sp - Spanish language support

The img/ directory contains only four images:

  • d.gif - border part
  • dlg_top_left.gif - border part
  • powered_by.gif - WebSpellChecker.net logo
  • spell_only.gif - Tab Control containing only one tab element - the WebSpellChecker Tab

The locale-specific directories can contain five files:

  • cancel.gif - “Cancel” button
  • finish_checking.gif - “Finish checking” button
  • opt_dlg.gif - Options Dialog Buttons set
  • options.gif - “Options” button
  • spell_dlg.gif - SpellCheck Dialog Buttons set

WebSpellChecker provides an additional feature for American English locale, this is the reason why the img_en directory can contain six extra files:

  • change_to.gif - “Change To” button, which is used in the thesaurus dialog
  • gramm_dlg.gif - Grammar dialog buttons set
  • gramm_tab.gif - Tabset, which is used in the grammar dialog
  • spell_tab.gif - Tabset, which is used in the spellcheck dialog
  • thes_dlg.gif - thesaurus dialog buttons set
  • thes_tab.gif - Tabset, which is used in the thesaurus dialog

Example

To create custom look-and-feel package (color scheme) named “35” you should create the following folder structure:

Color scheme integration to the website described in Installation procedure.

3. Customizable files

In this section individual customizable files are described. You can customize .css and .gif files in the WebInterface/lf/<schema>/ directory, and also .html and .js templates in the WebInterface/templates/lf/<schema>/tmpl/ directory.

CSS-files are well-formed custom style sheet files which satisfy all requirements of the CSS Level 1 specification. In this section below you can find a detailed description for each class defined in the file.

GIF are images in CompuServe Graphic Interchange format. GIF-files are mostly used for buttons on the site. To customize a particular image, you only need to replace it with an image of an identical size.

HTML-files are templates for spell checking, grammar and thesaurus dialogs. You can update these files to modify the layout of the WebSpellChecker window. Please be careful when modifying the template files. Places where you can insert your code are marked with comments. Changing other code may lead to unpredictable results. When changing the WebSpellChecker window layout, a browser compatibility testing should be performed. If the template file cannot be found, the default file is used. The template files contain tags of a special kind (metatags), which look like this: <#some_identifier#>. These metatags are used by the WebSpellChecker Web Interface.

Files in the texts/ folder contain text constants of messages and button captions appearing in the WebSpellChecker window. Each line of this file may be presented in the WebSpellChecker window using a metatag which looks like <#tx_noNN#>, where NN is the number of line in the appropriate file. Please note that these files are Unicode. Be careful when updating these files. Windows Notepad may be used for editing. After changing the file, please remove the first two bytes from the file using any other non-Unicode editor.

mid.css

This file describes the middle frame layout. The middle frame contains the user text in all modes. wsc-wnd-body.jpg

  • bodymid - middle frame
  • midtext - style of text in middle frame
  • a:link - style of a misspelled word when the word has not been clicked recently
  • a:active - style of a misspelled word when the word is selected in the spell checking dialog or active
  • cerr - style of current misspelling mark

Multiple Text Boxes customization support

For the “WSC For Multiple Text Boxes” variant customization of the text style in middle frame you should edit styles in the .midtext td selector.

For example:

.midtext td{
  color:#000;
  font-style:normal;
  font-weight:normal;
  font-size:12pt;
}

styles.css

This custom style sheet file describes the common settings for all “SpellChecker”, “Grammar” and “Thesaurus” sections of the page.

  • bodytop - style of top frame
  • bodybottom - style of bottom frame
  • dlgframe - style of frame dialog border
  • tabframe - this style is not currently in use and is included for future features
  • dlg - style of bottom dialog
  • label - style of bottom dialog text
  • gramborder - style of grammar dialog border
  • gramsuggest - style of grammar suggestions dialog
  • gramsugtext - style of grammar suggestions description
  • gramsugitem - style of each grammar suggestions item
  • gramsugtbl - style of grammar suggestions table
  • bodyopt - style of WebSpellChecker options dialog document
  • optborder - style of WebSpellChecker options dialog border
  • opttable - style of WebSpellChecker options dialog table
  • optheader - style of WebSpellChecker options dialog caption
  • optheadertext - style of WebSpellChecker options dialog caption text
  • optcel - style of WebSpellChecker options dialog info
  • optlabel - style of WebSpellChecker options dialog info text
  • optdescr - style of WebSpellChecker options dialog info descriptions
  • cel - style of button cell
  • tabborder - style of tab section border
  • tabbody - style of tab section tab space
  • tabactive - style of active tab
  • tabpassive - style of passive tab
  • celbrdr - style of button border
  • tabbrdr - style of tab border
  • optdlgborder - this style is not currently in use and is included for future features
  • optdlgframe - this style is not currently in use and is included for future features
  • a:link - style of a button when the button has not been pressed recently
  • a:active - style of a button when the button is engaged or active
  • a:visited - style of a button when the button has been clicked recently
  • a:hover - style of a button when the user hovers the mouse pointer over the button

top.css

This custom style sheet file describes the way the top part with “SpellChecker”, “Grammar” and “Thesaurus” buttons looks. Because the page contains only these three links (designed as buttons), you can customize only the links appearance.

wsc-wnd-head.jpg

  • a:link - style of a button when the button has not been clicked recently
  • a:active - style of a button when the button is engaged or active
  • a:visited - style of a button when the button has been clicked recently
  • a:hover - style of a button when the user hovers the mouse pointer over the button

finish.html

This template is displayed when spell and grammar checking is completed.

gram_dlg.html

This template is displayed at the bottom of the dialog in grammar mode when the text being checked contains grammar issues. Normally it displays suggestions and buttons to apply or ignore the rule.

sp_opt.html

This template configures the options dialog. In standard shipment, it allows to control the following spell checking options: “all-caps words”, “words with numbers”, “words with mixed case”, “domain names”. Also, it includes a functionality to manage user dictionaries.

spell_dlg.html

This template is displayed when the posted text contains spelling errors. It suggests options for unrecognized words.

spellsuggestall.html

This is the template for the invisible frame used internally to speed up suggestion processing. It can't be customized to prevent unexpected system behavior.

text.html

This template is a placeholder for all other templates and is primarily used in spell checking dialog.

thes_dlg.html

This template displays a control panel for the thesaurus section of the dialog. Originally, it includes categories, synonym lists and control buttons “Change to”, “Finish checking” and “Cancel”.

top.html

This template configures the top part of the dialog. Usually, this section contains the “SpellCheck”, “Grammar” and “Thesaurus” buttons, as well as a language chooser.

4. Installation procedure

When you have finished preparing the whole package of the files, you can integrate them into your web set.

Place all custom files in appropriate places described in the "Directory structure" section. Set the schema identifier - schemaIdentifier - in the page which utilize the WebSpellChecker in the code which invoke the webspellchecker:

<script type="text/javascript">
	//<!-- 
	function startSpellCheck(){
		doSpell({
			ctrl:'myEditor',
			lang:'en_US',					
			schemaIdentifier: '35'
		});
	}
	//-->
</script>

5. Remove WebSpellChecker.net Logo from WSC Pop-up

The WebSpellCheker uses a several Look and Feel(L&F). Each of them is designed for specific editor or control. Please find necessary logo removal manual below:

Textarea, TinyMCE

  • Open
    [installation_path]\WebSpellChecker\WebComponents\WebInterface\lf\18\img\
  • Replace “powered_by” image by this one

CKEditor 3, CKEditor 4 in IE version less than 9

  • Open
    [installation_path]\WebSpellChecker\WebComponents\WebInterface\lf\22\img\
  • Replace “powered_by” image by this one

CKEditor 4

  • Open
    [installation_path]\WebSpellChecker\WebComponents\WebInterface\lf\23\img\
  • Replace “powered_by” image by this one

Textarea with modal windows, TinyMCE

  • Open
    [installation_path]\WebSpellChecker\WebComponents\WebInterface\lf\118\img\
  • Replace “powered_by” image by this one

Please note that you can replace mentioned image with necessary one with your own branding.