Using the styles of the Squidoo themes

The color used in the purple squidoo theme is: #732C7A

One of the more interesting ways of using that color is to really make text stand out like this.

Here's the code:

<p style="background: #732C7A; color: #fff; padding: 15px; font-weight: bold;"> your text </p>

This looks a bit too flashy on the theme I use here, but on Purple People Eater - it will look good.

The yellow used in the module titles in the Highligher theme can be used on any of the black-grey-white themes like this. Your text will really stand out.

The color is: #FAFC7D

Here's the code:

<p style="background: #FAFC7D; color: #000; padding: 15px; ">your text here </p>

This can work on the themes:
- Easy Street
- Moment of Zen
- Highlighter
- The Professor

Don't you just love the going camping style? I've used it on most of my 'green' lenses, vegetarian lenses etc. Stressing text in that theme looks great using the green of the module titles: #266806

Like this for instance

Code:

<p style="color: #266806; font-weight: bold; font-size: 130%; line-height: 1.3em;">like this for instance</p>

I personally think many people are going overboard using color on squidoo lenses. I think it's better to stay within the style squidoo has given us, merely using CSS to stress something just a tad bit more. Using colors of blue that fit the squidoo color scheme is one way of doing that. Here are some blues that fit the description.

this color is the first blue I found for you: #154679

<p style="border: solid 3px #154679; color: #154679;font-weight: bold; padding: 15px;">this color is the first blue I found for you: #154679</p>

this is the second blue that will go well with squidoo: #223E5B

<p style="border: solid 3px #223E5B; background: #223E5B; color: #fff; font-weight: bold; padding: 15px;">this is the second blue that
will go well with squidoo: #223E5B</p>

Another dark blue: #072A4F

<p style="border: solid 3px #072A4F; color:#072A4F;font-weight: bold; padding: 15px;"> Another dark blue: #072A4F</p>

a lighter blue that will only be legible if you combine it with a larger font size or at least - as in this example - a bolded type: #4781BC .

<p style="border: solid 3px #4781BC; color: #4781BC; font-weight: bold;padding: 15px; "> a lighter blue that will only be legible if you combine it with a larger font size or at least - as in this example - a bolded type: #4781BC .</p>

another light blue - could be used as a background color, but in general I think it's too dark for that. I like the use in a border as I did here, but a bolded type may also be able to carry it off as a font color: #6690BC .

<p style="border: solid 3px #6690BC; color: #6690BC;font-weight: bold;padding: 15px;"> another light blue - could be used as a background color, but in general I think it's too dark for that. I like the use in a border as I did here, but a bolded type may also be able to carry it off as a font color: #6690BC .</p>

This lighter blue will work well as a background: #76a0cC

<p style="background: #76a0cC; padding: 15px;font-weight: bold"> This lighter blue will work well as a background: #76a0cC </p>

But one could go even lighter: #86b0dC

<p style="background: #86b0dC; padding: 15px;font-weight: bold"> But one could go even lighter: #86b0dC </p>

And lighter: #96c0fC

<p style="background: #96c0fC; padding: 15px;font-weight: bold"> And lighter: #96c0fC</p>

And lightest perhaps... #b6d0fC

<p style="background: #a6d0fC; padding: 15px;font-weight: bold"> And lightest perhaps... #b6d0fC</p>

The grey used on this theme is very subtle. I don't know if you've noticed (on this lens for instance) but even the letters aren't exactly black, but more a dark grey. I choose using this theme here because the colors come out so well, but it does have the disadvantage of making almost every color look out of place. So on the Zen theme, I suggest using a simple grey background color if you want to emphasize text - like I've don in this module.

<p style="background: #F4F4F4; padding: 15px; font-weight: bold; line-height: 1.5em;"> your text </p>

If you want to, subtly, stress your text a bit more, you can try the following code to add a border of 1px - not defining the color means that the text-color is used for the border. This is will often work very well - as in this case I think.

<p style="background: #F4F4F4; padding: 15px; font-weight: bold; line-height: 1.5em;border: 1px solid"> your text </p>

However, I don't think I'd personally use that. I'd either go with no border at all, as in my first example, or with a dotted border. When you use a dotted border of 1pixel wide you get a very subtle effect, especially if the colors of the border and background are close together.

<p style="background: #F4F4F4; padding: 15px; font-weight: bold; line-height: 1.5em;border: 1px dotted;"> your text </p>