HotPotatoes Tutorials and How-to's

Check the Full Tag Cloud

News:

Realities
Realities

Changing servers
Changing hosting provider

Family stuff
Family stuff

Most Recent:

Realities 2010.05.13 Realities video and pictures
Miscellaneous 2009.11.10 Other Miscellaneous
JCross: change background colour of cells 2009.11.07 JCross: change background colour of cells in Hotpotatoes JCross Crossword
JCross: Center thy Clues 2009.11.07 Center the Clues in Hotpotatoes JCross Crossword
Templates and Themes 2009.11.05 Templates and Themes

Login:

Meta:

Valid css | MODx

You are here: Home » Tutorials » Tips-Tricks » JCross: Center thy Clues

JCross: Center thy Clues

Posted by Stan Bogdanov on 07 November 2009 - 16:33

Introduction

Time for another small enhancement.

Clues in a JCross crossword in HotPotatoes come left-aligned. It surely is a little more stylish to have them centered above the crossword grid.

Here are some samples from the Taxonomy, under the 'Crossword' section, of what we're trying to achieve. Visit these exercises and click on a clue, especially the ones both across and down.
· Regular, just plain text crossword · Image Crossword · Audio Crossword.

So, here's how to center the clues in two easy steps.

Step 1 - Create your crossword.htm web page

Step 2 - Edit some CSS

Open the output .htm file in a text/HTML editor and find the CSS part. Look for a chunk of code saying:

div#ClueEntry{

Change it to look like this:

div#ClueEntry{
        font-family: Verdana,Geneva,Arial;
	font-size: 10pt;
	margin-bottom: 1em;
       /* Centered clues */
        text-align: center;
	margin-right:auto;
	margin-left:auto;
	display:block;
	
}