Skip to navigation | Skip to content

Share your knowledge. Make a difference.

squidoo css - my favorite code

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 2 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Ranked #213 in Tech

6 people favorited this page

Rated G. (Control what you see)

Created by spirituality (contact me)

I'm a webmaster and student of religion and spirituality. See my website on religion and spirituality: www.katinkahesselink.net

Join my fanclub if you...  (more...)

Start your own Squidoo page

Your fans are waiting!

Squidoo coding - css examples

 

I've gathered my favorite Squidoo-code for later reference. I'm tired of trying to find that specific lens I used a css effect on and then having to go to edit-mode, copy paste, and then go back to the lens I was working on. This lens will help me be a better lensmaster and perhaps it will help some other squids as well.

Some basic HTML explanations 

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>

These are called the opening and close tags. Your text should go 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.

Orange Box 

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>

Light blue background 

The style of the new 'contents at a glance' bit

This is the precise color of light blue that is used in the new contents at a glance and explore related pages part of squidoo. I haven't used this yet, but for unity of style on a page, this could really work



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


Closing tag: </p>

(Light) Yellow background 

This is the background-color used in the 'created by' bit that's at the top of each lens. For a consistent look throughout a 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>

Blue Typed Text 

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: #1f94bf; line-height: 1em;
font-size: 150%; font-family: '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: #1f94bf; line-height: 1em;
font-size: 150%; font-family: 'courier new'; padding: 10px;"><b>


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

More blue text, but without the special font 

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: #1f94bf; line-height: 1.2em; font-size: 150%; font-weight: bold; padding: 10px; margin: 10px;">


Closing tag: </p>

More blue letters, font size a bit larger than usual 

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.


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


Closing tag: </p>

More squidoo blue 

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


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


Closing tag: </p>

More blue text 

This text is bold, but no larger than the standard font-size. The color is another variety of blue.


Opening tag:
<p style="color: #1f94bf; font-weight: bold">


Closing tag: </p>

Orange text 

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>

Red text, within a paragraph. 

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>

Heads up on HTML and CSS options on squidoo 

For all you HTML or CSS-coding geeks on squidoo... it looks like squidoo disables the following:

  • font-size in pixels (px)

  • <hr> :horizontal lines

  • i-frames



Let me know in the guestbook what disabled HTML features I missed.

More lenses on how to be a lensmaster 

So, what did you think of my Squidoo css tips? 

MerryM

thanks for this! faving for future reference.

Posted May 14, 2008

WordWhisperer

Thanks for this lens. It will be great resource for this newbie squidooer.
Maggie
http://www.squidoo.com/wordwhispererchannel

Posted May 04, 2008

clouda9

Yeah! Lovin' it, thanks for sharing.

Posted May 04, 2008

jince

nice work

Posted April 29, 2008

XP

Thank you for the code ... will add this to my new Lens Typography lens. 5*s too. :)

Posted April 23, 2008

More lenses by me 

Was This Lens Helpful?

So many ways to show your appreciation! Rank this lens with the little stars at the top. Check out the advertiser's, if you are interested in their products. Stumble it. Digg it. Add it to your lens roll. Leave a comment. Favorite it.

Thank you!

X

Hi, I'm spirituality

spirituality

Join my fan club

I'm a webmaster and student of religion and spirituality. See my website on religion and spirituality: www.katinkahesselink.net

Join my fanclub if you want to be kept updated on new (spiritual) lenses I make.

More pages by me...

See all my pages