Squidoo CSS - my favorite code to spice up a lens

Most of the code I use here is based on the paragraph HTML-code.

<p> Your text here </p>

Notice that it starts with <p>
and ends with </p>

The first is the opening tag. The second is the closing tag. The text you want to format goes between those two tags.

Paragraph tags are great because after the closing paragraph tag your next text will automatically go on the next line. In squidoo you can also just push <enter> - but that won't work in ordinary HTML

The other basic HTML tag I use is bold:

<b>your text here</b>

Opening tag: <b>
Closing tag: </b>

This can be in a paragraph - and works if you want to style a single word.

So the basic message here is: if you want your text styled, use both the opening and the closing HTML-tags.

This is a style I like to use when I want some of the look of 'the most important thing' module, but not all.

Opening tag:
<p style="border: solid 10px #ff6600; padding: 10px">

Closing tag: </p>

Because this is the first example, I'll also give the full code of the orange box above (code highlighted in bold):

<p style="border: solid 10px #ff6600; padding: 10px">This is a style I like to use when I want some of the look of 'the most important thing' module, but not all. </p>

This is a slightly lighter color of light blue than is used in the new background to the default theme. I think it fits that theme very well.

Opening tag:
<p style="background: #E1E8F2; padding: 15px; margin: 0;">

Closing tag: </p>

This is the background-color was once used in the 'created by' bit that's at the top of each lens. It could be used to highlight text in a way that's not too flashy. (Orange is flashy, light yellow is more mellow - yes that rimed).

Opening tag:
<p style="background: #FCF8C0; padding:15px; margin: 0;">

Closing tag: </p>

A variation on the previous example, inspired by stuff I've seen on other lenses recently. I created it for a lens where I had some advice that I wanted to stand out.

Opening tags:<p style="border: dotted 2px #ff6600; background: #FCF8C0;
padding: 10px">

Closing tags: </p>

text that floats to the right, has a blue background that combines well with most templates and a larger font-size etc.
This is just text that goes on... and on, and on, etc... Normal text. Can be a list, can even be the content in your rss or contents module.

This trick can be done in most modules. Just start with the text you want to highlight and enclose it in the following code:

Opening tag:
<b style="background: #76a0cC; width: 200px; float: right; padding: 15px; margin: 15px; font-size: 150%; line-height: 1.5em;">


Closing tag: </b>

post it
Making your own floating post it-note. Using the style of squidoo, but with a twist.

I love the post it note module, but have often wished the post it note to be INSIDE a text/write module. Now you can do that, like I did here.

Here's the code:

<p class="postit-inner" style="float: right; "> your text </p>

Don't use too much text - the style will break and you will end up with text against a white background.

Pictures give your lenses just that little bit of extra. I'll leave it to you to find those pictures, or take them.

What I will show you is how to float your images to the right and give them some space.

This will work in all kinds of modules. I particularly like the effect in the guestbook module, but it will also work in for instance the table of contents module.

So here's the code:
<img style="float: right; padding: 10px;"
src="http://www.yourwebsiteorsomething.com/picture.JPG" />


And, upon request, how to put a border around a picture. Experiment with the border width (10px in this case), the padding and the margin. To get the effect here see:

<img style="float: right; padding: 10px; margin: 10px; border: 10px solid #154679;"src="http://www.something.com/picture.JPG" />

I use this for quotes sometimes. It gives a nice contrast and the colors go well with the squidoo colorscheme

Opening tag:
<p style="color: #154679; font: 150%/1em 'courier new'; padding:
10px;">


Closing tag: </p>

Similarly - combined with a bold font, the effect can be a bit more striking.

Opening tag:
<p style="color: #154679; font: 150%/1em 'courier new'; padding:
10px;">
<b>

Don't forget to close both the bold and the paragraph tags like this: </b></p>

This text is bold, blue, larger than usual and has space between the lines that you probably won't notice but still makes it more legible.

Opening tag:
<p style="color: #223E5B; line-height: 1.2em; font-size: 150%; font-weight: bold; padding: 10px; margin: 10px;">

Closing tag: </p>

For a calmer effect this color, with a font-size just a few pixels larger than the usual squidoo font-size can work very well. It's the precise color of the default titles.

Opening tag:
<p style="color: #1A67B8; font-size: 150%; ">

Closing tag: </p>

This is definitely a fancier way to do quotes, I think you'll agree. I've used this on two squidwho lenses so far and feel it fits that rather subdued design well.

Opening tag: <p style="color: #1A67B8; line-height: 1.5em; font-size: 150%; padding: 0 15px; margin: 5px; border-bottom: 1px dashed;">

Closing tag: </p>

this is the precise color the headings and links have in squidoo

Opening tag:
<p style="color: #1A67B8;">

Closing tag: </p>

look at this

Opening Code:

<p
style="width:100%;color:white;background: #1A67B8;padding-top:3px;padding-left:5px;font-family:Georgia, 'Times New Roman',Times,serif;font-size:30px;font-weight:bold;line-height:1em;padding-bottom:5px;"><b>

Closing code: </b></p>

I've used these orange letters on a jokes page. The orange is related to the several orange colors in use on squidoo. the font-size is just a bit larger than the standard-squidoo lettering and the style is bold

Opening tag:
<p style="color: #f60; font-size: 150%; font-weight: bold">

Closing tag: </p>

So far I've shown how to give a whole paragraph a new look, because that's what I usually do. But sometimes it's just fun to turn some text red right in the middle of a paragraph.
Opening tag:
<b style="color: red">

Close this off with: </b>

In ordinary HTML a blockquote is used to indent text. Officially this should only be used for quotes, but that's a detail. I've given a lot of suggestions on how to format quotes on this lens, but what follows is the bareback version. An answer to the question:

how do I indent text on squidoo?

Here's the code:

Opening tag: <p style="margin-left: 20px">

Closing tag: </p>

While these are on a lot of lenses, I think this style is over the top. Use with caution.

rounded corners...

Do you like them?

I like the double border - and a dark background and white letters while I'm at it.

So here's the code. Openingtag:

<p style="border:double 5px #000033; -moz-border-radius: 15px;
-khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius:
15px; background: #1A67B8; color: #fff; padding: 5px;">

closing tag: </p>

BTW - this code doesn't work in the introduction module, unfortunately.

For all you HTML or CSS-coding geeks on squidoo...

Squidoo disables the following:

• <strike>: which would normally make text have a horizontal line through it.


• <hr> :horizontal lines


• i-frames

What you CAN use

• font-size in pixels (px) - or can you? It doesn't seem to work for me, but a few days ago it did. A good designer doesn't use pixels anyhow, so I'd advise using % to size text - as I show in the examples.

If you have to correct something in a coding lens - where the previous text needs to stay in place, you can use this.

<b style="text-decoration: line-through; font-weight: normal">

closing tag:
</b>

Unfortunately changes in my personal life, and in the way squidu is managed, have made me decide to stop answering questions on that forum. I'm also too busy to answer questions elsewhere.

I am available for consulting though, but that doesn't come cheap. For $99 you get a month of asking whatever questions you want and advice on your SEO strategy, link building, optimizing your blog etc. SEO consult online publishing.

If you aren't willing to pay up, you'll have to be content to stay updated on my Marketing Spiritual Blog where I am also willing to answer any questions related to the posts. It also contains a free ebook.

I'm active on twitter and facebook.