My Favourite CSS Tricks on Squidoo

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.

Here are a few of the classes that you can use directly, which will give you some instant styles that match Squidoo's formatting. You can use these in the middle of a Text / Write module, by setting the 'class' attribute instead of (or as well as) the 'style' of a HTML tag.

The first one is the 'poweredby' class, which is perfect for linking to a source article or story:

Powered by: <p class="poweredby"></p>

Font Classes: Easily set the size and/or style of your text. These will work with any HTML tag:
class="lm_smallest_font"
class="lm_smaller_font"
class="lm_larger_font"
class="lm_largest_font"

class="lm_serif"
class="lm_sans_serif"

Border Classes:

Thin border
<p class="lm_thin_border"></p>

Thick border
<p class="lm_thick_border"></p>

Gray box with border
<p class="twitterstorm-post"></p>

A Sticky Note
<p class="sticky_note"></p>

If you're super sneaky, you can combine multiple classes with styles, and get some very cool effects. For example:

(centred with blue border)
<p class="lm_thick_border textcenter" style="border-color: #069;"></p>

This module is out-of-date since Squidoo introduced themes. I hope to update it soon, once HQ have created some named color classes which match the theme.

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 #F90 (orange). For a darker shade of orange, use #C60.

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

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

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

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

For more colors you can use on your lens, read HTML Tips for Color.

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>...

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. It looks really bad if you have a border as well.

However, the Introduction of this lens does not wrap around the lens photo, and the border is drawn neatly around the text.

But you can fix that. How? Simply put the text into an indented paragraph, with the left margin set to 262 pixels:

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

The 262 pixels used here is the magic number that should work on most lenses, as the largest size a photo can be is 250 pixels. If your lens photo is a little smaller, you'll need to change this (width of the image, plus 12 pixels). For older lenses, 128 pixels often works well, as demonstrated here.

This same trick can be used on Text / Write modules that have a photo in the top-right corner, as shown by this example. The image you upload will be scaled down to 250 pixels, so use a right margin of 262 pixels to keep it clear. If your image is smaller than this, then adjust the margin accordingly. (And I'm going to have to fill then end of this paragraph so that you can really see the effect of setting the right-hand margin.)

<p style="margin-right:262px;">...</p>

If you look at the top of this lens again, you'll notice that the title of the Introduction module is in blue instead of the usual boring black. This is done with a little bit of HTML to change the color. You could also change the font here, for example with font-family: cursive.

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 cannot add HTML to titles of the other modules - only the Introduction allows this.

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, using <b> tag as a block with a background color.
This is a handy trick that can be used to nest blocks inside one another. 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

Throw in some additional styles, such as borders, padding, centering and colors, and you can create some pretty interesting effects.

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:290px;">...</p><p style="float:right; width:290px;">...</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 ~590 pixels for maxed lenses, and ~600 pixels for unmaxed lenses.

Remember to follow the paragraphs with <br clear="all"> 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.