SpellingCow.com

nuttzy99 · Site Admin Joined: 23 May 2004 Posts: 1068

NOTE: to take participate in the customization, you'll need to setup an admin account.

Making a Custom Design
For those that have enrolled in a branding program.
(doc still under construction)
examples: http://www.spellingcow.com/files/tutorial/tutorial.zip

I. Overview
SpellingCow provides a means where you can have total control over the appearance of the spell check window. You generate a design, and then store it on the SpellingCow server. The design consists of a template (TPL) file and a cascading style sheet (CSS) file. These form the bulk of the appearance and will be incorporated in the SpellingCow framework which handles all the spell checking mechanics.

Here's a basic primer:

from the example zip file, you'll see several TPL file examples. It may be best to choose one of these as a base model.
edit the TPL file as desired to create your own style. Do the same for the CSS file if desired. Refer to the more in-depth sections for details.
from the spell checker, click Options, then go to Layout. Click "custom".
now you can upload your new TPL file. The TPL file must be stored on the SpellingCow server. The CSS file must be stored on your own server.
Use the preview button to check changes without effecting your users
When satisfied with the design, press Update to go live with the new style

II. TPL file overview
The TPL file gets pulled into the SpellingCow frame work. Inside the TPL file, you define everything normally included between the <BODY></BODY> tags of an HTML document. In fact you will define the opening <BODY> tag. The closing </BODY> tag is done in the SpellingCow framework.

The TPL file is one big <FORM> and you can think of it as having three parts: 1) the login/logout/register area; 2) the message display area; and 3) the button area. You can of course organize these anyway you want, or even intermix them, but basically these are the elements that users need.

There are predefined template variables expecting values from SpellingCow, and they are wrapped in braces like this {LOGIN_MSG}. Variables cannot be renamed, new ones cannot be added, and you should avoid omitting any. A complete explanation of variables is at the end of this document.

Finally, the buttons for the spell checker are hooked up through a display_button() javascript function. This function deals with several browser compatibility issues so you should use this function instead of trying to define buttons yourself. display_button() is very flexible, allowing for both SUBMIT and BUTTON types of inputs. It also allows for a static image, a rollover image, or no image. You can also set several parameters including a CSS class if applicable.

III. CSS file overview
There are some CSS classes that MUST be defined since they are hard-coded in SpellingCow. Details of these classes is at the end of this document. You may also use the CSS file to define whatever else you want without limit.

Of course you are not limited to using this one CSS file either. The CSS for the premade subSilver style defines just the basics and then separately calls an actual phpBB subSilver.css file to further define things.

IV. TPL file details
In this section some details about the TPL are noted for reference.

CSS, STYLE, SCRIPT: - feel free to use these as you wish. Just don't interfere with the SpellingCow mechanics.

FORM: - must be named post. Must have an OnSubmit call that performs actions similar to that in the premade styles. You can add any further functionality you need. You can add additional FORM tags if needed as long as they don't interfere with this one.

Login/logout/register section: - when a user that is logged in can take advantage of several additional features, so you should provide a means for this to occur. When logged in, the variable logout is true. The code in the logout block is displayed, which includes a logout button. When logged out, the variable login is true. The code in the login block is displayed, including login and register buttons. Here is a summary of the template variables for this section:

logout - display logout button when user is logged in
LOGIN_MSG - will be Welcome back Nuttzy99! if the username is "Nuttzy99". Make sure the CSS class logged_in_msg is defined!
login - when user is logged out, gather username, password, login button, and logout button
legacy - can be omitted! For out-of-date spell-gw.php files, so this should not be an issue. Is true when BOTH login and logout are false.
LEGACY_MSG - can be omitted! Will display Thanks for testing!

DIV STYLE - this STYLE declaration for a DIV is for the area where the message to spell check is displayed. It defines the colors, the scrollbar, and most importantly the dimensions. The dimensions are an issue b/c each of the major web browsers is a little different. Opera needs a defined width; Netscape and Firefox have the same dimensions, but they differ from IE and Opera. Not tested for Safari, Konquerer or other browsers. Basically if you need to steal space for other objects on the screen, take it from here. Be sure to test for the 4 major browsers though!

text display area - the STYLE just defined now gets put to work. MUST have the id of maincontent. The javascript function display_input() handles all the highlighting of words. Red and blue highlights are hard-coded until someone complains loudly enough Wink

Do not mess with the display_input() function or variables! But to be thorough, here's what the variables mean:

SEL_POS - position of the currently selected word
NUM_WORDS - the number of misspelled words flagged

the input area - for all of the form objects in this section, the id and name MUST not be changed. Let's go through each element:

txt_changeto - the Change to: text. This gets defined so that it can be hidden when spell checking is done. It is optional and the javascript was designed to function if the element is missing.
new_word - the textbox where the replacement word is entered
SUGGEST_WORD - the top suggestion for the first word
txt_suggestions - the Suggestion: text. Given an id so it can be hidden
suggest_list - the SELECT input containing all the suggestions; the onchange and ondblclick javascript is needed.
SUGGEST_OPTIONS - all the suggestions for the first word.
LEFT_MSG - can be omitted, but it is handy to have. When the user is not logged in it displays some information on why users should login. When they are logged it, it simply displays a link back to SpellingCow.com (which would be appreciated but not required ). Using this variable requires the CSS classes left_msg, logged_out_msg, and smalltext to be defined.
BRANDING_LINK - can be omitted. The link from the branding options entered in on the Options Layout screen
BRANDING_PIC - can be omitted. The branding graphic.
BRANDING_ALT - can be omitted. The branding graphic alt tag.
VERSION - the SpellingCow server version. Can be omitted, but would be nice if you found a spot for it.
BOTTOM_MSG - really should not be omitted but could be. Contains FAQ information including how to disable auto spell checking.
hidden variables - stuffed needed for the program to work. Don't mess with 'em.
the buttons are covered in their own section

the buttons - all buttons should be run through the display_button() function because it has been designed to handle several browser compatibility issues. The function can produce either a SUBMIT or BUTTON type of input buttons. It can be a graphic, a rollover graphic, or no graphic. The first thing to decide is if you need a SUBMIT or a BUTTON type. This depends on whether you want to execute javascript or submit the form. Most buttons will be javascript, including definition, thesaurus, ignore, ignore all, replace, and replace all. The submit type include options (if logged in), add (if logged in), return, submit, and cancel. A planned "Undo" button will also be javascript. Once you've got this decided here is a breakdown of parameters:

id - (all) the id of the button; MUST not be changed
button type - (all) choose from submit, image_submit, js, image_js depending on whether it's a SUBMIT or BUTTON (javascript) type and whether you want an image or not.
image type - (image only) either static or rollover. Use '' for non-image.
onclick - (js only) the javascript command to be executed; you really should use the same js code as listed in the next section; there is also an exception: for the login, logout, and register SUBMIT buttons you MUST supply 'button=this.value'; otherwise use ''
text - (non-image only) the text that will appear on the button; use '' for image buttons
css class - (non-image only) the CSS class that will define the style of a non-image button; use '' for image buttons
image file - (image only) the complete path to the image for the button; NOTE: the mouseover image for a rollover type need to have the same image name except adding _over to the name; use '' for non-image
alt - (image only) the image alt tag to be supplied; use '' for non-image
height - (image only) the image height to be supplied; use '' for non-image (use CSS to define non-image button dimensions)
width - (image only) the image width to be supplied; use '' for non-image (use CSS to define non-image button dimensions)

button id' and javascript: the following is a list of button id's, purpose, and associated javascript if applicable

logout - user logout; 'button=this.value'
login - user login; 'button=this.value'
register - user register; 'button=this.value'
definition - lookup word at m-w.com; "mw_com('Dictionary')"
thesaurus - thesaurus at m-w.com; "mw_com('Thesaurus')"
options - if the user is logged in then they can view options (SUBMIT). If they are not logged in then they get a message stating they must login (javascript). This is handled by the SpellingCow framework so use the BUTTON_TYPE and BUTTON_JS variables to perform this automatically
ignore - ignore selected word; "javascript:do_modify('ignore', -1, '')"
ignore_all - ignore all matches to selected word; "javascript:do_multi_modify('ignore')"
add - if the user is logged in then they can add to personal dictionary (SUBMIT). If they are not logged in then they get a message stating they must login (javascript). This is handled by the SpellingCow framework so use the BUTTON_TYPE and BUTTON_JS variables to perform this automatically
change_to - change this word to the specified word; "javascript:do_modify('replace', -1, '')"
change_all - change all matches to this word; "javascript:do_multi_modify('replace')"
return - make changes but don't submit; no javascript
submit - submit changes; no javascript
cancel - close window without making any changes; no javascript

examples of buttons would be cool
http://www.spellingcow.com/files/
tutorial/spell_body_subsilver.tpl

required CSS entries
smalltext
left_msg
logged_out_msg
logged_in_msg
gen
_________________
<?php echo "something wicked awesome for my sig"; ?>