Home » Squidoo Community » Lensmaking Tips » HTML on a lens

Squidoo Themes & Color Codes

Ranked #177 in Squidoo Community, #26,286 overall

Squidoo Themes and Color Codes: Quick Reference

Need to match the colors on a Squidoo lens? Want to borrow the header on your lens's theme for an accent further down on the page?*** Here's all the color codes you need to pimp your lens in matching colors or create graphics to complement your lens.

P.S. Need more help with HTML & CSS? See my CSS Codes Quick Reference & Tutorial lens for tips on how to set margins, colors, backgrounds, font sizes, and more.

*** March 2011: Squidoo HQ has been doing some testing, and they find that the average web user does NOT like background colors, borders and boxes around paragraphs. Oniy do it if you have a really good reason. Squidoo users seem to favor them, so you may do it for a strongly Squidoo-related lens, for example, when showing off Purple Star lenses.

I know, it's fun. I do it too. Ask yourself: is there a good reason for decorating this paragraph, or am I just doing it because it looks cool? That may not be a good enough reason.

Default Squidoo sizes and colors

Used on Most Lenses

Lens Title font-size: 34px;
Module Header font-size: 1.5em;
Module Header font-size: 1.2em;
Body text font-size: 14px
The default text color for headers, page title and body text is now color: #555;
Link color: #1a67b8;
Squidoo lens column width: 590px;

Footer image used as background:

<p style="background-image:url(http://the.squidoocdn.com/imgs/bg/footer_gray.png); color:white; padding: 10px;">

Most light gray boxes and the sidebars are: background-color: #efefef;

Black Box and Poll Colors

Complement Most Squidoo Lenses

Blackbox
Blue: color: white; background-color: #276596;Light Blue: color: #046381; background-color: #e1e8f2;
Green: color: white; background-color: #015b05;
Gray: color: white; background-color: #515151;
Orange: color: white; background-color: #f90;
Red: color: white; background-color: #900;
Pink: color: white; background-color: #d51f8b;
Purple: color: white; background-color: #692f6f;
Teal: color: white; background-color: #158ebb;

Poll Colors: #ff6600; #005087; #cc007a; #8e0055; #008e84; #dddddd;

OLD Talk Bubble:Outline: #f60;Text: #555;

How to Use Color Codes

Color codes may be used inside almost any HTML tag by adding style="color: #code;"

For example,
<b style="color: #f90;">orange</b>
results in:
orange

Default Squidoo Theme (Also SquidQuiz)

Updated in Spring 2011

Page title, headers and body text color: #555;
Link color: #1a67b8;

Recreate header graphic with this code:

<p style="height: 158px; padding: 10px; color: white; background-image:url(background-image:url(http://the.squidoocdn.com/imgs/bg/max.png); background-repeat: repeat-x; background-color: #0c3f74;">

WARNING: This pattern only works up to 158 pixels high because there's a shaded line across the bottom. If you write more than 8 lines of text

this happens.

OLD Default Squidoo Theme (RETIRED)

Tasteful Blue Fade

(Page Title) color: #f90; font-size: 2.75em;

(Links & Module Titles) color: #1a67b8; font-size: 1.5em;

Recreate "blue fade" header and footer graphic with this code:

<p style="padding: 10px; color: white; background-image:url(http://the.squidoocdn.com/imgs/bg/default.png); background-repeat: repeat-x; background-color: #1a67b8;">

Padding and text color can be changed; it's the parts that say "background-..." that make this work.

This is basically the same colors as the new Squidoo default theme, but it's better to use for a background because

it doesn't cut off after 158 pixels tall!

Algae Theme

It's really more aqua than algae, but...

Page Title color: #158ebb;

Module Header color: #158ebb;
Module Subheader color: #555;
Body text: color: #555;
Links: color:#158ebb; text-decoration:underline;

Recreate header graphic with this code:

<p style="padding: 10px; color: white; background-image:url(http://the.squidoocdn.com/imgs/themes/new/algae/bg.jpg); background-repeat: repeat-x; background-color: #29afca;">

The background image is 144 pixels tall, so I've picked an aqua background color that picks up where the image stops.

Big Lucid Theme

Simple, Gray and Black

The most important thing about this theme is the unusual font, used for headers and body text. It's Lucida Grande, or, if a computer is missing that font, there's a few alternates. Here's how to change the font with a "Style" command:

<p style="font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans',Arial,Helvetica,sans-serif;">

Links are underlined, and the accent color is black (#000):

Page Title and Module Header color: #000;
Module subheader and body text color: #555;
Links color: #000; text-decoration: underline;

Recreate header graphic with this code:

<p style="padding: 10px; color: white; background-color: #444;">

Big Squid Theme

A very large Squid.

All headers and body text - color: #555;
Links are color:#454545; text-decoration:underline;

The header's background gray is #505050;



The header graphic could be used for interesting four-line dividers or "important facts."



However, as the graphic is exactly 144 pixels tall, it doesn't tile vertically well. Here's what I did to create the bold, white, large-size type on this background above:

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/big/bg.png); background-repeat: repeat-x; background-position: -50px 0px; padding: 15px 15px 15px 230px; color: white; background-color: #505050; font-size: 24px; font-weight: bold;">

It works if you have fewer lines; it just cuts off the bottom of the squid. You can also increase the font-size or remove font-weight: bold; as needed.

I like to think Squidoo added this theme after seeing my large-squid custom Squidoo banners!

Blueprint Theme

Fun for DIY Lenses

Page title, all headers, body text color: #555;
Links color: #2b5fc6;

Header graphic:

This is a fantastic, seamlessly-tiling background. However, it's a little busy, so I've boosted the font size and made it bold.



Code to make above paragraph:

<p style="padding: 10px; color: white; background-image:url(http://the.squidoocdn.com/imgs/themes/new/blueprint/bg.png); background-color: #2b5fc6; color: #eee; font-size: 26px; font-weight: bold;">

Clouds Theme

Gentle blue on blues with orange logo

This is like an updated version of Squidoo's old blues and oranges, with the old Squidoo orange lens title making a rare reappearance. The other colors are new-Squidoo defaults.

Page Title / Lens Title color: #f90;
Module headers, body text color: #555;
Links color: #1a67b8;
Lightest blue background color in header graphic: color: #60a9f5;
Darkest blue background color in header graphic: color: #2381e2;

This is a pretty background:

<p style="padding: 10px; color: white; background-image:url(http://the.squidoocdn.com/imgs/themes/new/clouds/bg.png); background-color: #2b5fc6; background-repeat: repeat-x; background-color: #60a9f5;">

Also, there's a special Squidoo logo to complement it (above right.) The white outline makes it look good against almost any background. Plant it with:

<img src="http://the.squidoocdn.com/imgs/themes/new/clouds/logo.png">

See How to align images for ways to place it side-by-side with text or whatever you need the graphic to do.

Highlighter Squidoo Theme

Flash of Yellow

Page Titles & Module Headers: color: #333; background-color: #fafc7d;
Links: color: #333;
The header and footer background-color are also #333
All the text in this theme is font-family: Georgia,Times New Roman,serif;

To get the full highlighter effect, try this:

<p style="font-size: 110%; font-family: Georgia, Times New Roman, serif; color: #333; background-color: #fafc7d; padding: 10px; ">Write your paragraph text here</p>

Moment of Zen Theme

Same Colors as Easy Street, Different Style

All headers style="color: #555; font-family:Georgia,'Times New Roman',serif;"

Module subheaders are unusual, adding a gray line above themselves:
style="color:#888;font-family:Georgia,'Times New Roman',serif;border-top:1px solid #dcdcdc;padding-top:4px;margin-top:4px;"


Body text is ordinary, with default color: #555;
Links turn Squidoo orange -- #f90 -- when cursor hovers over them.


The header has changed to a light gray in 2011:

<p style=" border:1px solid #ccc; background-color: #eee; padding: 10px;">

A subdued Squidoo logo is also easier on the eyes:



<img src="http://the.squidoocdn.com/imgs/themes/new/gray/logo.png">



The pre-2011 "Moment of Zen" header / footer were this.

<p style="background-color: #555; padding: 10px; color: white;">

Movies Theme

Blockbuster with old Squidoo orange and black in header

All text: default Squidoo gray color: #555;
Links: color: #555; text-decoration: underline;

A very basic theme with a wild header:

<p style=" background:url(http://the.squidoocdn.com/imgs/themes/new/movies/bg.jpg); background-repeat: repeat-x; background-color: #eee; padding: 10px; color: white;">

A slanted Squidoo logo is bold orange:

The paragraph above, about six lines of text on the dark background, is generated with:

<p style=" background:url(http://the.squidoocdn.com/imgs/themes/new/movies/bg.jpg); background-repeat: repeat-x; background-color: #eee; padding: 10px; color: white;">

This gray paragraph isn't part of the theme, but I thought it would look nice as a follow-up:
<p style="background-color: #eee; padding: 10px;">

The slanted orange Squidoo logo is:

<img src="http://the.squidoocdn.com/imgs/themes/new/movies/logo.png">

Munch Theme

For recipe and food lenses

The Munch theme has the default gray for headers, titles, body text - color: #555;
Links are color: #333; text-decoration: underline;
Color that complements header (isn't in theme): #b10000;

This handsome header fades smoothly into red as you go down.

<p style=" background:url(http://the.squidoocdn.com/imgs/themes/new/munch/bg.jpg); background-repeat: repeat-x; background-color: #b10000; padding: 10px; color: white;">

The logo is probably too specific to be used for anything else:



<img src=http://the.squidoocdn.com/imgs/themes/new/munch/logo.png>

Purple People Eater Theme

My Favorite Squidoo Theme

Page Title, Module Headers, Links: #732c7a; (Links are underlined)

Recreate header graphic with this code:

<p style="color: white; padding: 10px; background-repeat: repeat-x; background-color: #692f6f; background-image: url(http://the.squidoocdn.com/imgs/themes/new/purple/header_bg.png);">

Squid Grid Theme

Like Squidoo's default theme, with a funky header

All headers, text and page title are default color: #555;
with links also their default color: #1a67b8;

The header is a tiny background image tiled forever to make a grid:

<style="background:url(http://the.squidoocdn.com/imgs/themes/new/squidgrid/header_bg.png); padding: 15px; color: white;">

The logo has an inobtrusive squid:



<img src=http://the.squidoocdn.com/imgs/themes/new/squidgrid/logo.png>

The Professor Theme

Another Orange and Black -- Are These People Giants Fans?!

Page Title color #f90; font-weight: bold; font-family: Georgia, 'Times New Roman', Times;
Headers color #555; font-weight: bold; font-family: Georgia, 'Times New Roman', Times;
Subheaders color #555; font-family: Georgia, 'Times New Roman', Times;

Body text color: #555;
Links color: #555; text-decoration: underline;
and turn orange (#f90;) on hover.

The header and footer are

<p style="background-color: #333; color: white; padding: 10px;"> ... </p>

New York Theme

So clean, but an oddly unfinished-looking theme

All Headers style="color: #333; font-family:Georgia,'Times New Roman',serif;"

body text style="color: #555; font-family:Georgia,'Times New Roman',serif;"
links style="color:#054679; text-decoration:underline; font-family:Georgia,'Times New Roman',serif;"

The header is just white (background-color: #fff;) so are the sidebars. The only page divisions are supplied by gray lines:

border: #ccc 1px solid; padding: 10px;



The logo is:

<img src=http://the.squidoocdn.com/imgs/themes/new/newyork/logo.png>

Thanksgiving Theme

Turkey Day

Headers, titles are bold. This theme lost some color in April 2011.

Page Title: Squidoo Orange #f90;
Module Headers, Subheaders, Body Text color: #555;
Links color: #983204;

Module headers used to be color: #731704; which still works with the theme, and subheaders used to be the same color as links.

To recreate header graphic:

<p style="background-color: #7d2205; background-repeat: repeat-x; background-image:url(http://the.squidoocdn.com/imgs/fd/new/thanksgiving/header_bg.jpg); color: white; padding: 10px;">



Here's the logo:



<img src=http://the.squidoocdn.com/imgs/themes/new/thanksgiving/logo.png>

Christmas Squidoo Theme

Merry Merry!

This theme also lost the color on module headers and subheaders in the spring 2011 overhaul. It's now:

Page Title color: #016b09;
Links style="color: #d61e1a; text-decoration: underline;"
and everything else Squidoo default color: #555;

Formerly, the module subtitles and page title were the dark red color, links and headers were the green color.

The header graphic is:

<p style="padding: 10px; background-color: #fff; background-repeat: no-repeat; background-image:url(http://the.squidoocdn.com/imgs/themes/new/holiday/bg2.jpg);">



The header graphic has changed. The old one is still around, and you can do this with it:

<p style="padding: 10px; background-color: #e5f2fb; background-repeat: no-repeat; background-image:url(http://the.squidoocdn.com/imgs/themes/new/holiday/bg.jpg);">

Here's a few graphics on this background:

Christmas Tree graphicChristmas bells graphicSanta GraphicChristmas gift graphic

Icons from: www.icondrawer.com



Or try this, changing that aqua background color to one that blends:

<p style="padding: 10px; background-color: #bfdaeb; background-repeat: no-repeat; background-image:url(http://the.squidoocdn.com/imgs/themes/new/holiday/bg.jpg);">

And here's the theme's logo:



<img src=http://the.squidoocdn.com/imgs/themes/new/holiday/logo_christmas.png>

Winter Holiday Theme

Alternate Christmas Squidoo Theme

Page Title color: #b40f07;
Links: #15679c;
Module headers, subheaders and body text are now default color: #555; (headers used to be red or blue).

The header graphic is the same as for "Christmas" theme with a different logo:



<img src=http://the.squidoocdn.com/imgs/themes/new/holiday/logo.png>

Valentine's Day Theme

Deep Rich Red

Page Title, Module Headers, Links: #aa0e0f; (deep red)
Subheaders and body text: default color:#555;

Header graphic:

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/valentine/bg.jpg); color: white; padding: 10px;">

This graphic is great. It tiles seamlessly up and down, left and right, so you can use it as the background for big paragraphs.

It's also got a nice logo:



<img src=http://the.squidoocdn.com/imgs/themes/new/valentine/logo.png>

Gone Camping Theme

(Page Title) color: #f90;

Header color: #266806;
Links color: #2c730a;
Subheaders and body text default color: #555;

Recreate the header with this code:

<p style="padding: 10px; color:white; background-color: #266806; background-image: url(http://the.squidoocdn.com/imgs/themes/new/green/header_bg.jpg); background-repeat: no-repeat;">

The logo is the new default logo:



<img src=http://the.squidoocdn.com/imgs/logos/logo2011.png>

Paintball Squidoo Theme

A Splash of Color

Page Title and Module Headers: #aa235e;
Links: #555 (they're underlined)

Recreate the header with:

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/paint/header_bg.jpg); color: white: padding: 10px;">



This one doesn't tile perfectly, so try and use it for smaller paragraphs.

Easy Street Theme

Black and Gray Simplicity with Orange Highlights

Page Title, Headers, Links: #555;
(Links turn orange -- #f90 -- when cursor hovers over them)

Easy Street has snazzy headers and footers.


Header

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/charcoal/header_bg.jpg); background-color: #000; background-repeat: repeat-x; color: white; padding: 10px;">
 





Footer

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/charcoal/footer_bg.jpg); background-repeat: repeat-x; background-color: black; color: white; padding: 10px; background-position: bottom;">
 

Easter and Spring Themes

Eggses!

Page Title: #009c28;
Module headers, links: #1a67b8; (formerly #279bec:)
Lightest background color in header: #96d6ff;

Recreate Header Graphic

This isn't very easy to use except for headlines, because it's hard to find a text color that shows up on all of it. You might try a larger font-size and boldface to make a striking one-line header.
<p style="background-color: #00811c; background-image:url(http://the.squidoocdn.com/imgs/themes/new/easter/bg.jpg); background-repeat: repeat-x; color: white; padding: 10px;">

2011 Easter logo:



2011 Logo: <img src=http://the.squidoocdn.com/imgs/themes/new/easter/logo2.png>

Old Squidoo Easter logo:



Old logo: <img src=http://the.squidoocdn.com/imgs/themes/new/easter/logo.png>

2011 Spring Logo (default Squidoo WITHOUT Squid):



<img src=http://the.squidoocdn.com/imgs/themes/new/easter/logo_spring2.png>

Old Squidoo Spring Logo:



<img src=http://the.squidoocdn.com/imgs/themes/new/easter/logo_spring.png>

St. Paddy's Day Theme

A Hundred Thousand Welcomes

Page Title: #f90;
Module headers, links: #266806;
Subheaders, body text default color: #555;

Recreate theme header:

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/stpaddy/bg.jpg); padding: 10px; color: white;">

This is another great graphic that tiles both vertically and horizontally.

Logo:



<img src=http://the.squidoocdn.com/imgs/themes/new/stpaddy/logo.png>

Bubble Gum Theme

Screaming pink!

Page Title color: #bf0077;
Everything else: Default color: #555;
Links: default color: #555; text-decoration: underline;

This background tiles nicely, making it a good one for black boxes or larger areas. To recreate it:

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/pink/header_bg_2.jpg); color: white; padding: 10px;>

The logo is Squid-less, and can be used on any colored background:



<img src=http://the.squidoocdn.com/imgs/themes/new/pink/logo.png>



There's also an older version of the background with the colors a bit stronger:

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/pink/header_bg.jpg); color: white; padding: 10px;>

SquidBoo!

Hallowe'en-Theme Lenses

You can ONLY get this theme by creating a lens through the Squidboo Co-Brand Portal, and you can't change the theme later if you change your mind. But it's great for Hallowe'en!

Page Title, Module Headers: #333;
Links: #ea7e01;

Squidboo's background header doesn't tile perfectly, but it's cute. Notice that "color" -- that's a nice yellow that goes well with the background.

<p style="background-color: #ea7e01; background-image:url(http://the.squidoocdn.com/imgs/fd/new/squidboo/header_bg.jpg); background-repeat: repeat-both; color: #ffe609; padding: 10px;">

For fun, you could use Orange for links.

You can set the color for a link by sticking a style tag inside the anchor

<a href="http://www.squidoo.com/css-codes" style="color: #ea7e01;">Orange for links.</a>

And here's the logo graphic.



<img src=http://the.squidoocdn.com/imgs/fd/new/squidboo/logo4.png>

SquidLit Co-Brand

This one's complicated.

You need to make a SquidLit lens from the Squidlit Gateway.

Note that the Headers and module titles are all in uppercase.

Lens Header:font-family: Courier New, Courier; color: 5f5f5f;

Module Headers: font-family:Courier New,Courier; font-size:1.93em;color:#fff;background:#2e2e2e;line-height:33px;margin-bottom:14px;padding:3px 6px;min-height:33px;

Links: color:#5f5f5f; text-decoration: underline;
Links when hovering over them: color:#f90; text-decoration: none;

To recreate header graphic:

<p style=background-color: #000; background-repeat: repeat-both; background-image:url(http://the.squidoocdn.com/imgs/fd/new/squidlit/header_bg.png); color: white; padding: 10px;">

HTML Color Codes

Need other colors? Use this handy HTML Color Codes Chart.

If you use Firefox, grab the Colorzilla Add-on. It adds an eyedropper to your statusbar that lets you get color codes of any webpage.

Black Box Tip

You can borrow a theme header's background for a Black Box.

Put this at the beginning of the Black Box text field:

<p style="background-image:url(http://the.squidoocdn.com/imgs/themes/new/valentine/bg.jpg); color: white; padding: 10px;">

Change the URL to match the header graphic of your choice.

Featured Lenses: Useful Graphics

Pimp Your Lens!

Loading

Guestbook

Phew! Hope this is useful. It's a charity lens, anyway, so I'm glad you dropped by.

submit
Show All

by

Greekgeek

I've written several Squidoo T-Shirt by Greekgeek more »

Feeling creative? Create a Lens!

Explore related pages

Featured Lenses 

Loading

I finally figured out where Squidoo came from... 

SQUIDS FROM ATLANTIS

LEGO Atlantis Gateway of the Squid (8061)

LEGO Atlantis Gateway of the Squid (8061)

Amazon Price: $24.99 (as of 02/16/2012)Buy Now

Explains a lot, doesn't it?

From Zazzle:

Squidoo Addict T-Shirt shirt
Squidoo Addict T-Shirt by geekhumor
Browse Squidoo T-Shirts

Related Tags