Skip to navigation | Skip to content

Share your knowledge. Make a difference.

My Favourite CSS Tricks on Squidoo

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 97 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Ranked #12 in How-To, #64 overall

Rated G. (Control what you see)

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.

Table of Contents 

Here is the new Table of Contents module, which can be spiced up with a simple floating paragraph with a border. These two techniques are explained in detail further down this lens, and how to do this is left as an excercise for you. I will give you one hint: the height needs to be set to be 22 times the number of modules in your lens, plus/minus a bit.

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.

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>

Official Squidoo Colors 

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>

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

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

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

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.

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

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.

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

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 

poddys

Cool ideas, I have this bookmarked. 5*****

Posted July 01, 2008

TopStyleTravel

Thanks for this great lens. I immediately implemented the Tidy Wrap tip for one of my lenses. 5 stars!!

Posted June 26, 2008

RufusQuail

I can't wait to turn my lenses into a riot.

Posted June 24, 2008

Catalysthere

Man you are awesome (as Ed would say) Great and useful Stuff, you are a featured lens for this week on http://www.squidoo.com/groups/Thirtydaychallenge

Posted June 24, 2008

JenniferAkers

Wow! Great tips - Fav, Fan, 5*! Thanks for this valuable resource. I'm ready to tweak my lenses.

Posted June 23, 2008

Stazjia

This is brilliant. I have spent so much time trying to work some of this stuff out for myself that I've bookmarked this lens - 5* isn't really enough. Thank you.

Posted June 22, 2008

JeremyBrown

Thanks for the help! The standard lens format just wasn't doing it for me.

Posted June 21, 2008

AnnsHomeDecor

Wow! Thanks for the great tips on sprucing up lenses.

Posted June 20, 2008

cyberzeke

Why haven't I seen this lens before? But I'm really glad I finally found it. Thx!

Posted June 13, 2008

sara08852

I could use these tips. Thanks for sharing!
Sara

Posted June 06, 2008

 
1 of 8 pages

More Ways to Spice Up Your Lens 

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

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

Site Meter

thefluffanutta's Pages

See all of thefluffanutta's pages

X

Gold Star

This is a certified gold star lens, which means it's the best of its kind on Squidoo (or shows some serious potential for getting there!)

Read more about gold stars »

X

thefluffanutta is a Giant Squid!

Giants are distinguished by their exceptional skill for making top-notch lenses, and lots of them. Whenever you land on a Giant Squid's lens, you know the person behind it is passionate about the topic and is hard at work making the lens worthy of your time and attention.

Learn more about what it takes to be a Giant »