Greekgeek's Online Odyssey - Hubpages and Online Article Writing Tips

CSS, Graphics, and Lens Design: My Best Design

I think that to date, the Squidoo Museum is my best lens as far as presentation, although the Fancy Table of Contents lens comes close.

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 Lord Elsibaton and Lady Elsibaton

5 Comments

  1. Is css good for ranking when we post it in squidoo ?

    plese rpl me as soon as possible

    1. Greekgeek says:

      CSS can improve lensrank indirectly, by keeping your reader engaged in your content, and encouraging them to click on links that stand out better (clicks are one factor in Squidoo lensrank).

      For example, check out my trophy rack lens. It’s essentially a list of links. I dressed it up with colored backgrounds, graphics, an attractive layout, side-by-side graphics and text, and interesting fonts using CSS, making people MUCH more likely to click on those links.

      See my CSS Quick Reference and Tutorial to learn CSS you can use to spice up your lenses!

  2. Thanks a lot Greekgeek !!!

    i m totally agree with your post.

  3. Thank you so much for the article. I am trying to design the box from this website “http://www.squidoo.com/squidoo-css” that says “A note for CSS newby’s” it is a grey box. Aslo a “Common problem” orange box looks really cool. Can you please give me an ide on how to do those boxes. Are those CSS or a module?

    Please e-mail me when you have time

    1. Greekgeek says:

      Email sent… sorry I was late!

      P.S. Love your Rip Rockit Ride lens. Great idea for a whole series of lenses focusing on different rides, I think!

Leave a Reply to Greekgeek Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing

Currently you have JavaScript disabled. In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page. Click here for instructions on how to enable JavaScript in your browser.