Skip to main content

Series Designer

Objective

Learn how to use our themer (series designer) tool

PuzzleMe provides a series designer tool that allows you to customize the appearance of the player interface. The design you set on via this tool will apply to all puzzles in a given series. Play around with the options and press 'Save' once you are satisfied. Hit 'Reset' to start afresh.

Here is a quick video for your reference:




PuzzleMe has various design customization options available. Some customization options are limited to specific game types. Here are the details of the individual elements:

Fonts​

PuzzleMe supports 1,500+ font families for use within your puzzles. To set the font, simply click on the Font selector drop down. This will open the font selection box.

Font selection box

In the font selection box, you can:

  1. Choose from our recommended fonts list, or select any of 1,500+ Google Fonts
  2. Search for a font by its name
  3. Filter fonts based on your target language
  4. Filter fonts based on tags, such as serif, monospace etc.

The font selected here applies to all text except the grid. PuzzleMe automatically sets the text color based on the brightness of the background color — it uses black text on a light background and vice versa.

tip

Many languages share a similar writing system (eg. Urdu, Persian and Arabic). If you cannot find a font for your language, try searching for a language which uses a similar writing system.

All fonts listed are available from the Google Fonts catalog which gives you rights to use the font on any website.

Custom fonts​

If your preferred font is not available under the Local Fonts or Google Fonts section in the themer, you can use a custom font too. The custom font needs to use the WOFF2 font file format. The font file needs to be hosted on your servers. Please ensure that your server's CORS policy allows loading the font files from amuselabs.com and its subdomains.

In the themer section, under the Font selector dropdown, add the name of the font and a link to the font file, separated by a pipe sign/vertical separator (|)

Adding a custom font link

For example, if you would like to use the Sofia font, hosted at the URL https://example.com/font/sofia.woff2 , please insert the following in the text field under the Font File section.

Sofia | https://example.com/font/sofia.woff2

Once you save the theme, the custom font will get applied to your puzzles.

Important
  • Always use HTTPS links to font files. If you use HTTP links, the fonts will not load.
  • Use only a single font name in the custom font field. Do not specify a fallback font, or a serif/sans-serif specification. In the example above, do not specify "Sophia, serif". Instead, just specify "Sophia".

Colors​

Primary​

This color applies to the box with focus, dialog headers and dialog buttons on hover.

Secondary​

This color applies to the background of the selected word, the selected clue, the clue bar and the dialog buttons.

This color applies to the top menu bar icons and text on hover. Make sure this color contrasts well with the navbar background color (light gray).

Print​

Many solvers prefer solving their puzzles on paper, or saving them as PDF. Our print customization options help you control the design of the following elements of the printed puzzles:

  • Masthead
  • Grid position
  • Title position

Grid and title position​

Various title and grid position configurations

Masthead​

This field takes an image URL as input. Whenever solvers print a puzzle or save it as PDF, by default no image appears at the top of the print page. When a masthead image is specified via the themer, the masthead image is included at the top of the page. You can use your publication or website logo image for the masthead.

Masthead appearing on top of Washington Post's printed puzzle

Image requirements:

  • The height available to the masthead is shorter than its width. Thus, please use an image with a wide aspect ratio (where the width is greater than the height). Using a narrow aspect ratio image would squish the logo and display it in a very small size.
  • Only SVG, PNG and JPG file formats are supported.
  • The preferred file format is SVG, since it helps keep the size of the print PDFs small.

Print options available ONLY for
  1. Crossword
  2. Word search
  3. Codeword
  4. Kriss Kross
  5. Sudoku

Grid design​

Grid design options

Grid font​

The grid font applies to both the letters and the clue numbers in the boxes. Make sure that the numbers are legible with the chosen font. You can check if making the font bold helps.

Empty box​

Conventionally, empty boxes (also called block cells) use a shade of black color. You can override this color to create a more unique grid appearance.

Lines​

By default, gridlines are drawn in thin style, using the black color. You can change both the color and the thickness of the gridlines.


Grid design options available ONLY for
  1. Crossword
  2. Sudoku
  3. Kriss Kross
  4. Codeword
  5. Word search (only grid font)

Mobile Keyboard​

PuzzleMe uses a compact, on-screen keyboard on mobile devices to save space. The background color of the clue bar above the keyboard is the same as the secondary color you've already selected. The font of the clue text is the same as the 'General' font. The keys use the same font as the grid.

Mobile keyboard NOT available for:
  1. Jigsaw
  2. Quiz
  3. Word search

Game type specific options​

Word Flower​

Word flower specific design options are available under the "Flower" and the "Buttons" sections of the series designer tool.

Word flower design options

Flower design options​

  • Letter font : This is the font used to show the letters inside the word flower petals.
  • Click color : Whenver solvers click on a petal to enter the letter, the background color of the petal momentarily changes to the click color.
  • Border color : This is used to set the color of the flower border.
  • Flower center color : This is used to fill the empty spaces between the central petal and the outer petals.

Button design options​

  • Button color : This sets the default background color for the shuffle, backspace and enter buttons available below the flower.
  • Click color : Whenever solvers click on a button below the flower, the background color of the button momentarily changes to the click color.

WordroW​

Wordrow specific design options are available under the "General" and the "Indicator colors" sections of the series designer tool.

Wordrow design options

General design options​

  • Modal color : This sets the background color of the headers of modals (popups / dialog boxes).
  • Modal button color : This sets the background color of the buttons used in modals (eg. clear/save etc.).

Indicator color options​

Indicator colors are used in the background of the grid letters, to provide feedback to the solvers about the correctness of their entries.

  • Correct position color : Used when the correct letter has been entered, in the correct position
  • Incorrect position color : Used when a letter belonging to the word has been entered, but in an incorrect position
  • Absent color : Used when the letter entered does not belong to the word
  • Focus box color : Used to highlight the actively selected letter

Quiz​

Quiz specific design options are available under the "Quiz" section of the series designer tool.

Quiz design options

The following background colors can be customized:

  • Component color : Used for the question area, the options buttons (for multiple choice questions), the answer field (for freeform questions) and the navigation buttons (Previus, Next)
  • Hover color : Used when hovering over the navigation buttons, the question numbers (at the top of the quiz), the options buttons (for multiple choice questions) and the "Enter" button (for freeform questions)
  • Current question color : Used for the currently active question number, in the question number list at the top of the quiz
  • Submitted question color : Used to indicate already answered questions, in the question number list at the top of the quiz