Free Materials For Teachers

Image©2011 ABS Click Other To Set A Custom Color
Click Other... To Set A Custom Color
Someone recently asked me how I was able to set the trademark light blue color you see for the border and page color in the IntelliTools Classroom Suite® activities you download from the Attic. The answer involves using some built-in settings, plus putting buttons to uses for which they were never designed. Here’s how to do it!

Note: You can download a PDF version of this page to use for reference or as a workshop hand-out. The link is at the bottom of this page.

Custom Border Color

Under the Options menu in Classroom Suite, you can change the color of the page border from the Document settings/Appearance dialog. (The page border is where the toolbars float.) You can choose from sets of solid colors and patterns. A third choice, Other…, brings up the Colors dialog, from which you can tweak settings to create any custom color you want for your page border.

Other Uses For A Custom Color

You can drag a custom color to one of the open squares at the bottom of the dialog (Mac) or choose Add to Custom Colors (Win) to save it, too. Then you can use it again elsewhere in the activity.

You could use your custom color in a button background or text box background, or even for some fancy text. You can get back to the Colors dialog in the Properties window for any of these items, again choosing Other… and then picking the custom color you saved. Only two of the button styles, Beveled and Flat, let you use a custom background color.

Using Custom Color For Page Background

BUT… For some reason, when you set the Page Background color, you are limited to the standard solid colors and the patterns. This has always annoyed me, since often I want to match the page color to a custom border color. Here’s a way to get around that limitation. You can use this trick just to set a page to any background color, but here I will assume you are also matching the page color to a custom border color.

  • 1. Set the border color to the custom color you want, being careful to save the custom color in the Colors dialog box.
  • 2. Go to the page where you want a custom color background. Get the button tool and make a huge button, covering the page. (This leaves a teeny white frame around it, since you cannot stretch the button to the very edges of the screen.)
  • 3. When the Button Properties window opens, choose the Flat style under Appearance, and change the background of the button to your pre-designed custom color. Alternately, create a new custom color at this point, if you are not trying to match the border color.
  • 4. Close the Properties window. Stretch the button to make sure it’s just as large as it will go. Leave it unlocked.
  • 5. Finally, under the Pages menu, choose Fix to background.

Ta-Da! The page now has a lovely custom background color.

Optional Further Steps

Fill The Thin White Margin
If you are obsessive like me, you want to get rid of that teeny white frame. Under the IntelliPics Studio menu, go to Paint. Get the Marquee tool. Capture a nice large part of the custom color area, being careful not to move the selection. Choose Copy from the Edit menu, then choose Paste. This creates a stamp with the custom color. Stamp around the margins, and the white frame will disappear. Return to Design.

Color The Thin White Margin
Alternately, if you like the thin frame but want it in some other color than white, you can go into Paint mode and pour a contrasting color into the white frame. Then go back to Design to add items to the page.

Duplicate The Custom Background Page
If you want this custom background in several pages, Duplicate the page as many times as needed. To save time, be sure to add all the page buttons and text boxes that will be on all these pages before you duplicate.

Alternately, if you wanted this background on just one page later in the activity, you could Copy your custom background in Page Properties/Page Background, move to the place you want it, and Paste it in Page Properties/Page Background on the new page.

Save The Background As A Graphic
If you think you might use this background frequently, save your custom background color in a graphic.

  • Copy your custom background in Page Properties/Page Background to put it onto the clipboard.
  • Open a graphic editing program such as Paint® or PhotoShop Elements®, open a new document and Paste.
  • Crop the image if needed, so it includes nothing but your custom color. In Elements, just choose New->Image From Clipboard, and it will make the new document and paste all at once.
  • Save the graphic, which will be your custom color sample. BMP is a good format to use.
  • When you want to use your custom color page background, load the sample as the Page Background. It will be automatically stretched to fit, no matter what page size you are using.

One Caution

Be careful using this background. If you paint or fix an image to the background, it will be changed permanently. In fact, fixing a piece of clip art erases the color, leaving a white background with the clip art alone. Of course, you can simply reload the custom color or saved sample graphic. One way to avoid mistakes is to use all floating items on pages with a custom background color.

You won’t have any background problems using floating elements like text boxes, buttons, and pictures not added as background. None of these affect the background itself. If you don’t want students to interact with one or more of these items, go into the Properties of each and remove the checkmarks from Auto Scan, Step Scan, and Respond To Mouse. Although you can still Control-Click such an inert item to edit it, it will behave like part of the background for a student user.


Application needed: Classroom Suite.
Subject area: Activity design.
Level: Author, Teacher tip.


Download-Printable Tutorial

ICSCustPageColor.pdf (800 KB) Custom Page Background Color In Classroom Suite Tip to print. Acrobat Reader.

April 19th, 2011 at 3:26 am

 

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image