Make a "Chalkboard" - Fun CSS Trick!

Here is an
example chalkboard.
It's really easy to make!

Credit where due: I drew the graphic based on this "Make a chalkboard background" Photoshop tutorial.

STEP 1: Select, copy and paste the following code in a plain old Squidoo TEXT MODULE. (I used TinyURLs to shorten the really long URLs that Squidoo gives images.)

<img src="http://tinyurl.com/2c6dufg" style="float: left; padding: 0px; margin: 0px;"><p style="background-image: url(http://tinyurl.com/38cvrkp); repeat: repeat-y; padding: 20px 40px; font-size: 24px; line-height: 36px; font-family: Comic Sans MS, Trebuchet MS; color: white; margin: 0px;">Here is an
example chalkboard.
It's really easy to make!</p><img src="http://tinyurl.com/2g37rx7" style="padding: 0px; margin: 0px;">

STEP 2: Change the text color-coded ORANGE to whatever text you like. (It'll be white on the finished version, but if I made it white here it would vanish.) You could even include images!

STEP 3: Save the module and see how it looks.

STEP 4: Adjust the way the text looks however you like. Parts color coded BLUE may be changed to adjust padding, font size, and fonts as you like. You could even set the text color to yellow instead of white. See my CSS Codes Tutorial for an explanation of what each of these settings (padding, font-size) does and how to adjust them.

OTHER OPTIONS:

If you want the text to be centered, add this somewhere in all those codes, for example, after margin:0px; and before the quotation mark: text-align: center;

If you want to have some text on the chalkboard different sizes or colors, enclose it in a span tag. For example, you could create a big headline like this:
<span style="font-size: 50px; color: yellow;">This text will be yellow and 50 pixels tall.</span>

Here's a narrow
chalkboard that's
centered in a
text module.

STEP 1: Select, copy and paste the following code in a plain old Squidoo TEXT MODULE.

<img src="http://tinyurl.com/2clh7le" style="float: left; padding: 0px; margin: 0px;"><p style="background-image: url(http://tinyurl.com/244qruy); repeat: repeat-y; padding: 30px 150px 10px; font-size: 24px; line-height: 36px; font-family: Comic Sans MS, Trebuchet MS; color: white; margin: 0px; text-align: center;">Here's a narrow
chalkboard that's
centered in a
text module.</p><img src="http://tinyurl.com/2366nvn" style="padding: 0px; margin: 0px;">

STEP 2: Change the text color-coded ORANGE to whatever text you like. (It'll be white on the finished version, but if I made it white here it would vanish.) You could even include images!

STEP 3: Save the module and see how it looks.

STEP 4: Adjust the way the text looks however you like. Parts color coded BLUE may be changed to adjust padding, font size, and fonts as you like. You could even set the text color to yellow instead of white. See my CSS Codes Tutorial for an explanation of what each of these settings (padding, font-size) does and how to adjust them.

Note that the padding of 150px sets the space between the text and the left and right margins. If you make this number too small, the text will extend out to the left and right past the frame of the chalkboard.

OTHER OPTIONS:

See the GREEN part? Delete that if you do NOT want the text to be centered.

If you want to have some text on the chalkboard different sizes or colors, enclose it in a span tag. For example, you could create a big headline like this:
<span style="font-size: 50px; color: yellow;">This text will be yellow and 50 pixels tall.</span>

I first created something like this years ago for a newsletter I founded which had a medieval manuscript background. It would expand and resize to hug the edges of any browser window.

Squidoo makes things a little more challenging, so I created something similar. if you would like to create any sort of framed background, here's the basic strategy:

1. You will need three graphics:
(a) the top strip, (b) the whole middle, including the sides, and (c) the bottom strip.

2. The middle graphic must repeat vertically without the seam showing. Either make a "seamless tile" in Photoshop, find a "seamless tile" pattern online, or create a graphic where all color zones are vertical stripes. That is, the top edge and bottom edge must be identical.

3. Basic template:

<img src="top graphic goes here" style="margin: 0px; padding: 0px;"><p style="background-image:url(middle-image); repeat: repeat-y; padding: [some padding]; margin: 0px;"><img src="bottom graphic goes here" style="margin: 0px; padding: 0px;">

4. Squidoo sometimes adds a blank line of whitespace after images. I fixed this by adding float: left; to the style of the top image. This ONLY worked because the image was 590 pixels wide; since there was no more room for the paragraph next to the image, the paragraph moved just below it. You wouldn't need to do this anywhere except Squidoo (I hope). Elsewhere, you may need to put a <br> between the images and the paragraph.