How to Feature Lensmasters or Lenses in a Cool Gallery!

So, first of all, I checked out this SquidU monsterboard and found this. Run your cursor over each icon:

• aj2008
• thefluffanut...
• Christene
• JaguarJulie
• Flynn_the_Ca...

It turns out this is incredibly EASY, thanks to a secret hidden CSS "Class."

STEP ONE: Start a new paragraph with:

<ul class="lenses_lb">

STEP TWO: For each lensmaster, add this, without skipping any lines:

<li style="background-image:url(ImageGoesHere.jpg);"><a href="URLgoesHERE">NAME GOES HERE</a></li>

-- Replace "imagegoeshere.jpg" with the Image Location, found by right-clicking the lensmaster's bio graphic on their bio page. This URL will be very long and end in .jpg.
-- Replace "URLgoesHERE" with the url of the lensmaster's bio page. It will look something like this: http://www.squidoo.com/lensmasters/name
-- Replace "NAME GOES HERE" with the lensmaster's name, for example, "Greekgeek" .

STEP THREE: After you've listed as many lensmasters as you want, end the gallery -- again, don't skip any lines or spaces -- with this:

</ul>

STEP FOUR: If you want to write anything underneath the gallery (in the same text module), add this before starting a new paragraph:

<p style="clear: both;">

That turns off side-by-side layout. Otherwise, the next thing you write will fill in to the right of the gallery above. If you don't have any more text before you start a new module, this step is unnecessary.

• 
  Christene

TROUBLESHOOTING:
Run your cursor over the icon at left. See how the dark box that comes up isn't covering the whole icon? If you get this effect, check your code for that icon and remove any stray carriage returns.

You can do the same thing with lenses instead of lensmasters:

• 10 Ideas for Squidoo Lenses
• CSS Codes Quick Reference
• How to Get More Clicks, Sales
• Greekgeek's Squidoo Tutorials
• Free Web Graphics

I've done exactly the same thing as I did for the Featured Lensmasters gallery above, except that in STEP THREE,

(a) I used the URL of the lens, and
(b) I had to adjust the image location (url) of the lens logo graphic to get the 100x100 pixel version, like THIS:

1. Go to the lens.
2. Right-click the lens logo graphic and copy its image location.
You'll get a long URL like this:
http://i2.squidoocdn.com/resize/squidoo_images/-1/lens3235832_1236922507free-web-graphics.jpg
3. Replace -1 with 100

Apparently -1 is Squidoo's filing system for "full sized, default version" and 100 is shorthand for, "100x100 pixels in size".

ALTERNATELY, for step 2, if you're replacing a standard Squidoo Featured Lenses module with a custom one, right-click the image URL in the featured lenses module. You will get an image URL like http://i1.squidoocdn.com/resize_smart/squidoo_images/120/120/lens1894829_logo.jpg

In this case, change 120/120 to 100/100 to get the 100px version of the logo.

So after using this technique for a bit, I realized one needs captions since lens icons aren't always self-explanatory.

The advantage of this over the Featured Lenses Module is that it takes up less space. The disadvantage is that it doesn't include a description, just the lens title.

Rollover Lens Gallery:

• 10 Ideas for Squidoo Lenses
• CSS Codes Quick Reference
• How to Get More Clicks, Sales
• Greekgeek's Squidoo Tutorials
• Free Web Graphics

10 Ideas for Squidoo Lenses

CSS Codes Quick Reference

How to Get More Clicks, Sales

Greekgeek's Squidoo Tutorials

Free Web Graphics

HTML TEMPLATE for "Rollover Lens Gallery":

Start a new paragraph with:

<ul class="lenses_lb">

Do this up to five times, one per lens, to create the row of lens graphics:

<li style="background-image:url(ImageGoesHere.jpg);"><a href="URLgoesHERE">ROLLOVER TEXT</a></li>

-- Replace "imagegoeshere.jpg" with the Image Location, found by right-clicking the lens logo graphic and changing the -1 in the URL to 100.
-- Replace "URLgoesHERE" with the url of the lens.
-- Replace "ROLLOVER TEXT" with the words you want to appear when the cursor rolls over the graphic, usually the lens title.

Once you're done making your row of lens graphics -- no more than five -- start a new paragraph:

<p style="clear: both; text-align: center; width: 100px; margin: 5px; float: left; font-size: 9pt; font-weight: bold;"><a href="URLgoesHERE">Lens Name Here</a>

-- This places the clickable text caption under the lens graphic. ONLY use the above code for the first caption in the row; it's got a "clear: both;" which starts it on a new line. For the other four captions in the row, use this template, without hitting return between them:

<p style="text-align: center; width: 100px; margin: 5px; float: left; font-size: 9pt; font-weight: bold;"><a href="URLgoesHERE">Lens Name Here</a>

Once you're finished the row of captions, start a new paragraph:

<p style="clear: both;">