Styling the Player

Once you have Marshall setting up the player, you'll need some CSS in place to see it. Marshall relies exclusively on CSS to control the appearance of the player. Let's walk through the css selectors you'll want to use to control your site's appearance. For more examples, see the CSS in the demo files.

.game_display is the box that completely encloses the player. You'll want to ensure this box has display: block; somewhere in its cascade. Aside from that, you can use this for changing the background color and borders for the whole game.

.game_display header is the title area of the player. it contains an H1 element (the title) and a p element with the PGNLink class (the link to the pgn file).

.mainboard is the box enclosing the player and the information (names, buttons, etc.) Use this to position the board where you want it.

.gameboard is the actual chessboard itself. its height and width should be set to 8x the size of the individual squares, plus any board you want to put around the board.

.dark_square is used to color the dark squares of the chessboard

.light_square is used to color the light squares of the chessboard.

.gameboard td will select every square of the chess board. Use this for styles that are common to all squares.

td[data-symbol="p"] selects the squares which are occupied by black pawns. The indicates the pieces and the case indicates the color (upper case is white, lower case is black):

• P/p = white/black pawn
• N/n = white/black knight
• B/b = white/black bishop
• R/r = white/black rook
• Q/q = white/black queen
• K/k = white/black king

The demo styles have all the pieces in the same image, and use background-position, to shift the image so the right piece shows. If you build your own pieces, you can do it the same way, or make them separate images. Either way, this puts the image on the square.

.board_controls is the collection of all the controls.

.board_controls a will select all the individual buttons. Use this to set the styles that are common to all your buttons. To style an individual button, add the class for the particular button you want to style:

• .rewind -- the rewind to start of line button
• .back -- go back one move button
• .up -- go up one variation
• .flip -- flip the board to put the other side on the bottom
• .toggle -- toggle the move display on/off
• .comments -- toggle the comments on/off
• .down -- go down into the next variation
• .forward -- go forward one move
• .ffward -- fast forward to the end of the current line

In addition to these classes there is one more, .disabled, that is used to style a button that cannot be used.

.gameboard caption will style the title of the diagram.

.game_info will select the other information about the game.

.current_move_box will select the display of the current move, found under the diagram.

.move_list will select all the moves and commentary.

.move (or a.move) will select the moves in the move list panel.

.variation.move or (.variation a.move) will select the moves in a variation.

.commentary will select the comments in among the moves.

.current_move will select the move in the move list that is the current move.