I’d like to talk about how I put together the Squidoo Museum. It demonstrates everything I know about graphics, color, fonts, and CSS.

First, I built the content. I knew what I wanted on my lens– a showcase of lenses of the type I want to see more of on Squidoo– so all I had to do is collect and organize it in a semi-logical fashion. I published it once I had the basic facts, ideas, things I wanted to say written out, and a lens logo. That was it.

Then I worked on the writing style. I could see that a plain old lensography didn’t have much draw. Like a Latin or Etymology class, you have to work harder to make dry content come to life. Give it a personality. Show why you love it, and let that passion be contagious.

I love antiquities, and my topics — science, history, geography — reminded me of the Smithsonian. I’d already named the lens the Squidoo Museum. So I had my model: a museum, a World’s Fair, an antiquarian’s collection of curiosities. You could use any sort of conceit — a racetrack, a shopping mall (which has been done to marvelous effect by Margaret Shaut), a library, a playground — to give a lens a cohesive theme.

I invented a fake curator, and pulled a tongue-in-cheek antiquarian style to give the lens personality.

Once I realized that my theme was a sort of Victorian version of the Smithsonian, then I started working on graphics. I mostly searched Wikimedia Commons for images, because they’re almost all public domain, and some Creative Commons. That took a while. I then had to pick one size for all of them, so they’d look cohesive, and shrink/crop all the graphics to the same size.

Last of all, I did a better lens logo. I found myself putting a border on it, mostly because I’d been forced to do a tight crop.

The lens logo dictated the CSS styles of my lens. I saw it was a spare, grayish-blue sort of graphic, so I replicated that throughout the lens. In fact, I replicated the colors precisely.

Since the graphic had a border, the introduction module paragraph next to it needed a border. Try to get the Introduction Module to coordinate graphics and text, since that’s the first thing visitors see. I used the eyedropper in my graphics program to find out the actual color of the border of the graphic, and used that for the color of the paragraph border. I borrowed a few grays and blues from the graphic to color other parts of the lens.

Then I worked a heck of a lot with CSS to get the graphics and text to fit their areas nicely, and for colors to harmonize.

Colors Tip: Look closely at the Introduction Module of the Squidoo Museum (thumbnail above). I painted a colored border on the graphic in Photoshop:
– Use the eyedropper to pick a dark color in the graphic.
– Select All.
– Make a new layer.
– Under the edit menu, pick STROKE to stroke a border around the graphic.
Then I double-clicked the color of that border, COPIED the color code, and used it for the CSS border of the paragraph in the lens. In other words, use the eyedropper in your graphics program to discover color codes of the lens logo, and use those colors for text, borders or paragraphs in the Introduction Module. (In this lens, I picked up the blue of the fireworks for the paragraph border.)

For all my best CSS tricks, see my Advanced CSS Tricks lens. Or learn basic CSS on my CSS Tutorial and Quick Reference lens.

And yes, I need to update the museum again! Or at least the newsletter.

Spam That Has ABSOLUTELY Nothing To Do With This Post

Apologies. I’m testing something SEO-related. I’ll let you know what I’ve learned (if anything) after the experiment is over.

Kithyra Grunderbar Kithyra Grunderbar

Now I’ve reorganized it and made it more dignified (slightly), and added all the tricks I tend to use most on my lenses: rounded corners, background-images for paragraphs, captions under aligned images, drop caps, dramatic numbered lists, and most of all, playing around with the introduction module to make the first thing visitors see look great.

I’ve moved the old lab experiments to page 2. There’s another use for a Page Break!

(My “crazy lab experiments” lens is now ZEE CODE SCRATCHPAD. Once I’ve got things working nicely there, I may move the “finished products” to the AdvancedCSS lens for prime time viewing.)

So I was working on a Fancy Tables of Contents tutorial collecting my various ways of creating tables of contents, indexes, and the like. And I’m STILL working on it! *laugh* I can always make a small project huge. Then I have to find ways to shorten it.

Along the way — partly because people are making a big push to update or build Lensographies — I wound up spinning off one module onto its own page. So at least THAT tutorial is finished:

Build a Better Featured Lens Module

It lets you do three things a regular Featured Lens Module can’t:

• Feature more than 5 lenses in the same list.
• Feature lenses in a fixed order.
• Write a blurb before and after the featured lenses without getting cut off in mid-sentence (doncha hate that?)

Meanwhile, I’m still waiting for somebody to find the Easter Egg on my Amazing Nessie Photo, where I am offering $5 to the first person who proves (without any doubt whatsoever) that it’s fake. Whoever does so is going to get a chuckle, hopefully.

Because a fool and her money are soon parted, and I am actually trying to teach a lesson with that lens, I will give an enormous clue:

PHOTOSHOP SEES MORE THAN MEETS THE EYE…