Many lensmasters, when they discover that they can change the fonts, colors and backgrounds of their lenses, tend to get carried away. As a result, some lenses become a riot of colour, with several different styles competing on the same lens. This is often off-putting to the visitors, and will probably have a detrimental effect on sales.

It is far better to work with the common format and style of Squidoo, and only use CSS to tweak it to your advantage.

For example, the text in this module, as well as in the Introduction module, is a tiny bit bigger. I've increased the font-size from the default 12 pixels to 14 pixels. The code for this is below, and I've used on some of the other modules too.

<p style="font-size:14px;">...</p>

You can add color to your lens in a way that is sympathetic to the overall theme of Squidoo. The two main colors used on lenses is #069 (blue) and #c60 (orange). The colour of the banner across the top of the lens is different - you'll want the color code #F90 for that one.

You can use these codes with the color or background attribute of almost any HTML element, as well as for borders. For example, the blue text above is done with the following HTML:

<b style="color: #069;">...</b>

Introduction Title
You'll notice that the title of the Introduction module above is in blue instead of the usual boring black. This is done in the same way, though you can use italics instead of bold if you wish. Don't worry if you see the HTML code appear after you save the title - it'll look just fine when you Publish the lens.

Note: you can't add color to titles of the other modules.

Web Links
Links are usually blue, but you can change them to be orange like this:

<a href="..." style="color: #c60;">...</a>

Scroll back up to the top of this lens, and take another look at the Introduction module. What do you notice is different? How does it compare to this module, with the same image in the corner? (Bear with me while I pad this bit of text to be a bit longer, so that it demonstrates the effect that you would normally on a lens.)

Yes, long Introductions will usually wrap underneath the lens photo, as it does here, making it look untidy. But you can fix that. How? Simply put the text into an indented paragraph, with the left margin set to 128 pixels:

<p style="margin-left:128px;">...</p>

The 128 pixels used here is the magic number that should work on most lenses, though if your lens photo is a little smaller, you'll need to change this (width of the image, plus 12 pixels).

Alternatively, if you have a long Introduction title, maybe one than goes on to two or three lines...
...you might want the body of your Intro to appear underneath the lens photo. Here is the simple piece of code that you need to get this effect:

<p style="clear: left;">...</p>

You can make a block of text stand out by putting in within a frame, very similar to "The Most Important Thing" module. The code to do this is below.

You can vary the color, line style and thickness to whatever you want. Full details about the border styles can be found on this page by the W3 Consortium.

<p style="border: 3px solid #f90; padding: 16px;">...</p>

Using very similar CSS, you can get the effect of a dividing line.

In this example, I've set only the border-bottom, styled as a double silver line. Note: Instead of putting your text inside the paragraph, you need to leave it empty, and put the text afterwards.

<p style="border-bottom: 3px double silver;"></p>...

Everyday tags like <b> and <a> are known as 'inline' tags, but you can change them into 'block' tags instead. The effect is similar to using <p>, but without the extra padding/margins you usually get. For example...
this line is bold, as a block with a background color.
All you need to do this is to use "display: block" in the style attribute of the tag, followed by any other styles you which to use. This technique works especially well on hyperlinks. You can click (or hover) over any part of the lines below to activate the links:

» Squidoo Homepage» Squid University» Google Search

A very commonly used trick on Squidoo Lenses is to add an floating image to a module, and let the text flow around it - see how to do this on the HTML Tricks lens.

Everyone's an expert
on something!
www.squidoo.com

But what if you wanted to have a caption too, or not have an image at all?

Here is a floating paragraph that you can have anything you like in, and the surrounding text will flow around it.

You can have the box on the left or the right, and a width of your choice. Take the opportunity to include other styles at the same time, such as fonts, colors, backgrounds and borders.

<p style="float:right; width:200px;">...</p>

This style of floating paragraph is used extensively by the Amazon Link Generator to embed products into lenses with pictures, text, prices and "Buy Now" buttons.

Extending the technique described above to utilise two floating paragraphs, you can get text in two vertical columns.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait facilisi.

<p style="float:left; width:250px;">...</p><p style="float:right; width:250px;">...</p>

Note: Make sure that you don't put a new line between the two paragraphs, or your columns will be staggered. The widths of each paragraph should be about half of the width of the module, which is ~500 pixels for maxed lenses, and ~600 pixels for unmaxed lenses.

Remember to follow the paragraphs with <br clear="both"> before you include any more text.

You could easily extend this technique to have 3 or more columns. Simply add more floating paragraphs, set them all to float: left; and reduce the width as necessary.