My Favourite CSS Tricks on Squidoo

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 501 people | Log in to rate

Ranked #42 in Squidoo Tips, #2,263 overall

Simple Tweaks to Spice Up Your Lens

The basic tools provided by Squidoo will do pretty much everything you need to get your content out to your audience. But sometimes you want to format it a little differently, and this is where inline CSS comes into play. Here I show some of the tricks I use on my lenses, and the code that does that.

If you haven't used inline CSS before, you should first read Basic HTML and Advanced HTML. These explain of the basic principles of using CSS on your lenses.

Themes for Lenses - NEW! 

You don't need to be a wiz with CSS to make a lens look good, as Squidoo now has themes for lenses. Click on the links below to see how this lens would look with them:

Table of Contents 

Here is the new Table of Contents module, which can be spiced up with a simple floating paragraph with a coloured border. These two techniques are explained in detail further down this lens, and how to do it is left as an exercise for the student.

I will give you one hint: the height needs to be set to be 25 times the number of modules in your lens, plus/minus a bit. For this one here, I've used a height of 275 pixels.

Start Simple, Keep it Subtle, Be Sympathetic 

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.

Squidoo Classes 

Instant styles for your lens

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 classes in the middle of a Text / Write module.

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

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


Centred text: <p class="textcenter"></p>


Large text: <p class="large_16px"></p>





A Post-It Note
<p class="postit-inner"></p>


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


The Most Important Thing
<p class="important-thing"></p>



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

The Most Important Thing (centred with blue border)
<p class="important-thing textcenter" style="border-color: #069;"></p>

Tidy Wrapping of the Introduction Module 

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>

Official Squidoo Colors 

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>


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

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.

Borders and Dividers 

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

Warning!

Not all browsers will render CSS in exactly the same way, so what looks great in one might look awful in another.

Make sure you test your lens in at least Firefox and Internet Explorer.

No CSS here - this is just "The Most Important Thing" module...

Turning Inline Tags into Blocks 

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

Floating Paragraphs 

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.

Hacks for YouTube and Video Modules 

Someone on the forum recently asked: is it possible to center a YouTube video?
I suggested that they could use a floating paragraph to get the effect. Here's how:

First, edit the options of the module, and turn off the title, description, and maybe the rating and details too. (Because of a bug, you'll leave at least one of the options enabled.) Next, insert the following code into the module's description:


<p style="float: left; width: 140px; height: 1px;"></p>


I often use something very similar to replace the YouTube description on the right-hand side with something more appropriate that I have written. For that, you'll need to use the style "float: right; width: 300px;".

This trick also works on the new Video module, though you'll need to use 90px instead of 140px to center it. You'll probably find that this module looks much better than the YouTube module, because of the larger size and the lack of text on the side.

<p style="float: left; width: 90px; height: 1px;"></p>

Two Column Tables 

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.

Making Tables 

just got easier

There is now a Table Generator that makes it really easy to build tables for Squidoo Lenses. See the lens featured below for details, and a step-by-step guide.

Example Usage 

Here are a few of the lenses where I have used techniques similar to the ones I describe here.
My Top Games for the Wii
On this lens I repeatedly used horizontal dividers in Squidoo Blue to bring out the links at the end of each review. I also changed all of the links to be in blue, which conveniently complements the blue that Nintendo use.
Harry Potter and the Deathly Hallows - Book 7
The cursive font is used frequently to give the lens an appropriate magical feel, and floating paragraphs allow the product links to be integrated alongside the text.
Photoshop Tips And Tricks
This lens has a couple floating paragraphs, one with an Amazon Link and the other with a simple image + caption. In the middle of the lens is a module with a Squidoo Blue border around it, drawing the visitor to the affiliate links within it.

Reader Feedback 

divacratus wrote...

Really helpful! Thanks!

ReplyPosted October 27, 2009

WordCustard wrote...

Will favourite this and come back often - thanks for putting it together.

ReplyPosted October 25, 2009

JuneMary wrote...

Thank you. Lots to learn but it's clearly explained.
June.

ReplyPosted October 21, 2009

ambalajecatering wrote...

Great tips! I just started with squidoo and this guide is very useful.

Thanks mate.

ReplyPosted October 20, 2009

Shadowchaser wrote...

Defiantly a helpful Lens.

ReplyPosted October 07, 2009

Niche4you wrote...

Thanks,
Will be trying some of this, as soon as i get a bit more confident using squidoo.

ReplyPosted October 07, 2009

OnlyFunStuff wrote...

Great help and info like everything you produce, will use it to spice up my lenses.Thanks

ReplyPosted October 07, 2009

Komrad87 wrote...

Thanks for the lens. Could use some extra fancy stuf in my coming up lenses

ReplyPosted October 02, 2009

mutualadvantage wrote...

Thanks for this lens. It's going to be so useful as I build my own.

ReplyPosted October 01, 2009

geraldmanetta wrote...

Nice share.. just used this in my new lens

ReplyPosted September 30, 2009

view all 280 comments

Love This Lens? 

If you would like to rate this lens, then you can do so here (Squidoo members only)

Add this to your lens »

More Ways to Spice Up Your Lens 

Here are some more ways to make your lens look hot!

About thefluffanutta 

Lensmaster thefluffanutta, aka thefluffanutta , has been a member since September 4 2006, has rated 658 lenses, favorited 185, and has created 92 lenses from scratch. This member's top-ranked page is "My Top Wii Games". See all my lenses

My Bio

I write about what I know, and I build tools for Lensmasters at SquidUtils.com. Read more about me on my Lensography, and follow me on twitter.
Follow @thefluffanutta
Clicky

by thefluffanutta

I write about what I know, and I build tools for Lensmasters at SquidUtils.com. Read more about me on my Lensography, and follow me on twitter.
Follow @thefluffanutta
Clicky (more)

Explore related pages

Create a Lens!