You are here: Home » Tutorials » Tips-Tricks » JCross: change background colour of cells

JCross: change background colour of cells

Posted by Stan Bogdanov on 07 November 2009 - 17:59

Introduction

I like to have my crosswords with a light-grey background color.

This doesn't have to be a particularly difficult process, and can save you from wasting large amounts of black ink. If you regularly print out crossword pages, you can sometimes find that you are getting through black printer ink extremely quickly. But, by using a simple chunk of code, your standard black background can be edited in no time at all.

It can also make your crossword look great on screen, and better fit a particular colour scheme. If your crossword is to be used as part of a gaming site like poker.dk, then you may wish to customise the colours which are used in order to better integrate your crossword with the rest of your site design. Take a look below to see the editing code which can be used to do this.

View some examples from my Taxonomy under the 'Crossword' section of what we're trying to achieve.
· Regular, just plain text crossword · Image Crossword · Audio Crossword.

Let's do

So, here's how to change the background colour of the cells of a HotPotatoes crossword.

  1. Create your crossword.htm web page
  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:
table.CrosswordGrid td.BlankCell{
Change it to look like this:
table.CrosswordGrid td.BlankCell{
     /* My light-grey background color for the blank cells */
	background-color: #a0a0a0;
	color: #000000;
}

Save, preview, enjoy! And come back for more tips and tricks.
You may also want to see the Audio Crossword Tutorials (Beginner and Advanced).

Related tutorials:


Rate this:

  • Currently3.15863277826/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 2282

Share it:

              Windows Live

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code: