Advanced Editor Tools Help
Chess.com uses a rich editor that allows you to have control over what you post!
Click on a button below for a complete description of how to use it!
Basic instructions for entering content
The WYSWYG editor allows you to create content with word processor-like formatting. Type your content directly in, then highlight the text you wish to style (make bold, italic or change the text color for example). Copying and pasting content into the editor from other sources works as well but note that the content may require some additional styling and formatting after being added. Also, pasting in content that was copied from Word or email software can sometimes add extra line spaces.
Paragraph and single line breaks
As you enter text, pressing <enter> starts a new paragraph, which leaves a blank line. For single line breaks, press <shift> + <enter>.
Customize editor length
The length of the editor can be increased or decreased by dragging the lower right corner handle.
Insert chess diagram, game, or puzzle
Use this Chess.com exclusive feature to insert chess diagrams, replayable games, or interactive puzzles. Click the chessboard icon to open the Chess.com editor. You can choose 3 types of positions to insert:
- Diagram
- Displays a simple static diagram - pieces do not move
- Useful for showing just one key position
- Game or sequence of moves
- Start with any position - from the beginning of game or in the middle
- Allows viewers to interactively play through a complete game or set of moves
- Puzzle, problem, or challenge to be solved
- Start with any position and end with any solution
- Lets users try and solve for the correct move
You can also choose 3 different starting methods. You should use the most detailed starting information possible to save yourself time recreating the game or position.
- Blank - a new blank chessboard with no moves made
- FEN string - a series of letters/numbers that describe a static position
- PGN file - a text file the describes the details, moves, and comments of a game or series of moves
Once you have started to create a chess position (or game or puzzle) you will see a set of tabs at the top right. Those allow you to customize your chess position.
Board Editor: The board editor is where you can move pieces freely and create whatever setup you want. You can drag pieces on and off of the board! You can also add a diagram caption (for static diagrams) and fill out other details of the position. Finishing your changes on the Board Editor is a necessary step to moving on to the Game Editor.
Game Editor: The game editor allows you to view, edit, add, and change the moves and comments in a game. It is basically a PGN editor with added functionality. You can just drag and drop the pieces on the board. You can also insert comments before or after moves.
- Set Begin - mark the position in the game where you want the game to start
- Set Focus - mark the position in the game where you want the game to first be shown when loaded
- Set End - mark the position in the game where you want the game to end
- Promote Variation - make the current variation tree the primay variation
- Delete Rest - remove all further moves in that variation tree
Game Details: The game details include information about the players and the event. Often times this will be pre-filled if you use an existing PGN file.
Design: These settings allow you to decide how you want the pieces to look, what colors the board should be, how large you want the board, which side of the page or document it should be on, and if coordinates should be shown.
Preview: The preview pane gives you a fairly accurate rendition of how the diagram will look in your document.
You can move back and forth between tabs to improve your diagram or game. Once you are satisfied, you must click the Insert button to embed the chess position in your document. If you want to edit your position, just select it and then click on the chessboard icon again.
Insert image
Use this feature to insert images into your document. Here are the available options:
| Image URL: |
Enter the URL of the image (ex. http://www.yoursite.com/image.jpg). Or, click on this button  to open up the Image Manager. |
| Image Manager: |
The Image Manager allows you to insert images into your document without having to host them elsewhere. Images uploaded here will be saved on the Chess.com servers. Simply click an image in your Image Manager to insert it into your document.
 - Click here to add images to your image library. This is the most important button in the Image Manager as it allows you to upload the images you want to use in your document so you can easily insert them later.
 - Click here to create a new directory for your images (not necessary).
 - Click here to refresh your directory.
 - Click here to switch to File Manager (not recommended).
 - Click here to view an image in detail.
 - Rollover this icon to see the image details.
 - Click here to delete the image.
 - Click here to enter Image Edit mode (to crop, rotate, resize).
|
| Image Description: |
Enter the "alt text" which is displayed if the image cannot be served, or when you hover your mouse over the image (optional). |
| Alignment: |
Sselect the image alignment from the dropdown list. This changes the side to which the image is aligned. |
| Dimensions: |
The width and height are automatically added for the image, but the sizes can customized. |
| Border: |
Enter the width/size of the image border. |
| Vertical Space: |
Set the amount of space that appears above and below the image. |
| Horizontal Space: |
Set the amount of space that appears to the left and the right of the image. |
Insert link
You can add either web page links or email links to your document using the link button. The other button is the unlink button used to remove links, but keep the text in place. Here are your options:
| Link URL: |
For a web link, enter the full web address starting with http:// and for a email link enter mailto: followed by the email address. The button on the far-right of the input field allows you to browse to files or pictures already on the server. |
| Target: |
By default links will open in the same browser window. To have links open in a new browser window, select "Open link in new window" from the dropdown list. |
| Title: |
Enter the anchor text your want to have appear when a user mouses over the link (ex. "Click here for more information!") |
| Class: |
This would normally allow you to apply a CSS style, but this feature is not enabled. |
Insert list
Use these to insert different list types into your document. The two types are shown below:
This is an ordered list.
- This is list item one.
- This is list item two.
- This is list item three.
This is an unordered (bulleted) list.
- This is list item one.
- This is list item two.
- This is list item three.
Insert table
To insert a table, select the Table button. Here are some of the most common options used:
| General Tab: |
| Columns and Rows: |
Enter the number of columns and rows to appear in the table. |
| Cellpadding/ Cellspacing: |
Enter the amount of cellpadding (space in between the cell wall and the content) and cellspacing (space between individual cells) to appear. |
| Alignment: |
Choose the table alignment from the dropdown options. This allows you to set where you want the table to be aligned in the document. |
| Border: |
Set the thickness of the table border. Default setting is "0" for no border. |
| Width and Height: |
Set the table height and width in pixels. |
| Class: |
This would normally allow you to apply a CSS style, but this feature is not enabled. |
| Table Caption: |
Set the table height and width in pixels. |
| Advanced tab: |
| Border color: |
Set the table border color. |
| Background color: |
Set the table background color. |
Insert horitontal rule
Click this button to insert a horizontal rule into your document. This will appear as a grey line across the document and can help serve as a natural break in content.
Insert smileys & emoticons
If you click this button a small window will pop up that gives you the choice of 16 different smiley faces (also called emoticons). To insert the emoticon of your choice, click on it in the window and it will appear in your document and the window will close.
Check spelling
This feature lets you check the spelling in your document. If you enable it by clicking the button, then misspellings will appear with a red squiggle under them. If you then click on the word, different spelling options will appear which you can select with your mouse.
Undo and Redo
These buttons will undo and redo the last actions done in the editor. The standard keyboard shortcuts for undo and redo also work for both the Windows and Mac.
Full screen mode
Clicking the "Toggle full screen mode" button will open the editor in a new window what is full screen size. This makes it easy to see much more of the document you are editing. To return the WYSIWYG editor to the original size, click the Full Screen button again.
Add bold to text
This feature makes text bold. First select the text you want to make bold, then click this button. You can undo the bold by clicking this button after you have re-selected text that is already bold.
Add italics to text
This feature adds italics to text. First select the text you want to italicize, then click this button. You can undo the italics by clicking this button after you have selected text that is already italicized.
Add underline to text
This feature adds an underline to text. First select the text you want to underline, then click this button. You can undo the underline by clicking this button after you have selected text that is already underlined.
Alignment & justification
You can use these buttons to change the alignment of text, graphics, and tables in your document. Each button shows its alignment - left, center, right, and full.
Font color
You can use this feature to change the font color of the text. You can use this feature to add color and make parts of your article stand out. Just use your mouse to select the text you want to change and then push this button with your mouse. To change the font color, click on the small down arrow next to the button. Try not to over-use this feature, as it can be irritating to the viewer.
Highlight text
You can use this feature to highlight the background behind text, just like a highlighter on regular paper. Use this to draw attention to important text. Just use your mouse to select the text you want to highlight and then push this button with your mouse. To change the highlight color, click on the small down arrow next to the button.
Font size
You can change the font size used to display text. Use your mouse to select the text you want to change, and then use the drop-down menu to choose the size of font you want. Try not to over-use this feature, as it can be irritating to read a lot of larger text.
Font family
You can change the type of font used to display text. Use your mouse to select the text that you want to change, and then use the drop-down menu to choose the font you want.
