Squidoo CSS - My Favorite C..

Squidoo CSS - my favorite code to spice up a lens http://www.squidoo.com/squidoo-css?utm_campaign=lensmaster-disco...
The Squidoo Answer Deck
Hi, Rosemary
Log Out
Dashboard
SquidLinks
What's Squidoo?
SquidU
SquidBlogs
Top Lenses
Connect Facebook Twitter Gmail
Go! Create Your Own Lens

Search Squidoo Go
Amazon.com
Mermaid Pink Child Little Girl Hallo... Easy Halloween Costumes for Adult's Milk Carton Easy Halloween
New $21.21 Children... C...
Leila Albala
Privacy Information
Squidoo CSS - my favorite code to spice up a lens

by 389 people | Your rating:
Ranked #57 in Squidoo Tips, #3,711 overall
Stumbleupon
Facebook
MySpace
Twitter
Digg
Delicious
RSS
Email
Lensroll
Favorite It
Ads by Google
5 Tips for a Flat Belly:
Unusual article with crazy tips to help you burn abdominal fat.
www.TruthAboutAbs.com
CSS Templates
High quality, fully customizable CSS templates & Website templates

www.pixelmill.com
Squidoo coding - css examples
1 de 20 19/11/2009 01:07
Squidoo CSS - my favorite code to spice up a lens http://www.squidoo.com/squidoo-css?utm_campaign=lensmaster-disco...1
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.
I've adapted the colors on this lens to fit the default theme of squidoo lenses (as of June 2009). But an
easier way to make sure your colors fit your theme, is to pick the black-white-gray 'Zen' theme. So
instead of going in and changing all your CSS, just go and change your theme.
Contents at a Glance
1. Some basic HTML explanations

2. FAQ - any questions?
3. Orange Box
4. Light blue background

5. A note for CSS newby's
6. CSS and HTML books
more...
Some basic HTML explanations

Most of the code I use here is based on the paragraph HTML-code.
 Your text here 
Notice that it starts with 

and ends with 
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:
your text here
Opening tag: 

Closing tag: 
This can be in a paragraph - and works if you want to style a single word.
2 de 20 19/11/2009 01:07
So the basic message here is: if you want your text styled, use both the opening and the closing HTML-tags.
36
FAQ - any questions?

This module is only for questions. Please tell me how great you feel this lens is in the guestbook at the bottom :)
add your comment submit
Reply
spirituality spirituality Sep 18, 2009 @ 1:46 am | in reply to LindaBee
Try putting the border code in the UL or OL part instead of the LI part. If that doesn't work, it's
simply not possible.
Reply
spirituality spirituality Sep 18, 2009 @ 1:45 am | in reply to Defever
You put the html in any module, but not the title. So you need to open your lens by clicking 'edit' ,
then click 'edit' on any module, then copy paste the code you want to try out. then click save.
Reply
LindaBee LindaBee Sep 17, 2009 @ 4:46 pm
Lots of helpful code here. I cannot seem to get a border around an ordered list or an unordered list.
The border only surrounds the paragraph part of the text and not the list.
An example on this lite is the box "A note for CSS newbies."
Thanks for your help as always.
Reply
Defever Defever Sep 17, 2009 @ 4:41 pm
how do you enter the html codes in squidoo????? I have been going in circles on this.
Reply
spirituality spirituality Aug 19, 2009 @ 1:54 pm | in reply to thewishpearl
CSS is what you add to HTML to make it look good. Don't worry about it beyond that. Just try it out
and use it.
Load More
Show All
Share this Guestbook

Stumbleupon
Facebook
MySpace
Twitter
Digg
Delicious
RSS
Email
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:

Closing tag: 
3 de 20 19/11/2009 01:07
Because this is the first example, I'll also give the full code of the orange box above (code highlighted in bold):
This is a style I like to use when I want some of the
look of 'the most important thing' module, but not all. 
Light blue background

The style of the new 'contents at a glance' bit
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:

Closing tag: 
A note for CSS newby's

If you don't get this lens, don't worry: just try:
1. Copy, paste the code of your choice into a module of your choice
2. Save that module: you will now see an approximation of what that module will look like in the end result
3. Publish
4. View The page
The worst that can happen is that that module looks awful or nothing happened. Just delete the code and try
again.
I learned by trial and error, so can you!
CSS and HTML books

All this is based on a solid knowledge of HTML and CSS. To be precise: I'm using inline CSS styles, which is all
the CSS squidoo allows.
Head First HTML with CSS...
CSS: The Definitive Guide
4 de 20 19/11/2009 01:07
Learning Web Design: A Be...
Build Your Own Web Site t...
CSS: The Missing Manual
(Light) Yellow background
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:

Closing tag: 
Really make something stand out: yellow and orange
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:
Closing tags: 
Floating text to the right, and giving it color & post-it note
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. text that floats to
This trick can be done in most modules. Just start with the text you want the right, has a blue
to highlight and enclose it in the following code:
background that
Opening tag:
 most templates and
5 de 20 19/11/2009 01:07
Closing tag: a larger font-size

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

Making your own floating post it-note. Using the style of squidoo, but with a twist.
 your
text 
Don't use too much text - the style will break and you will end up with text against a white background.
Floating pictures to the right

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" />
Keep track of your favorite code

Squidoo code can be kept in any text document. You can just use MS word for instance.
I try to keep all the code on the same subject (an affiliate program, or logincodes, or codes used on squidoo) in
one file.
It saves time and energy to just keep those codes in one place. This makes for quick and easy mass editing and
you don't have to look things up.
Blue Typed Text
6 de 20 19/11/2009 01:07
I use this for quotes sometimes. It gives a

nice contrast and the colors go well with the
squidoo colorscheme
Opening tag:

Closing tag: 
Similarly - combined with a bold font, the

effect can be a bit more striking.
Opening tag:


Don't forget to close both the bold and the paragraph tags like this: 
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:

Closing tag: 
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. It's the precise color of the
default titles.
Opening tag:

7 de 20 19/11/2009 01:07
Closing tag: 
Blue text, dotted line under paragraph - a more fancy way to do quotes
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: 
Closing tag: 
More squidoo blue

this is the precise color the headings and links have in squidoo
Opening tag:

Closing tag: 
Very beautiful subtitles that fit the style of squidoo
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;">
Closing code: 
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
8 de 20 19/11/2009 01:07
Opening tag:

Closing tag: 
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:

Close this off with: 
Common problem
The one thing I find when I can't make the code work is that I need to delete line-breaks.
Make sure there are still spaces between the different parts of the code, but make sure there isn't a hidden in
there somewhere.
Indenting text - the alternative for using blockquote
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: 
Closing tag: 
Rounded corners
You've seen them on more and more lenses: rounded corners...
Aren't they cute?
I like the double border - and a dark background and white letters while I'm at it.
9 de 20 19/11/2009 01:07
So here's the code. Openingtag:

closing tag: 
BTW - this code doesn't seem to work in the introduction module, unfortunately.
Heads up on HTML and CSS options on squidoo

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.
Let me know in the guestbook what disabled HTML features I missed.
Strike through
If you have to correct something in a coding lens - where the previous text needs to stay in place, you can use
this.

closing tag:

More on using CSS on squidoo

I've made a special lens to explain just how to combine the code on this page. Learn how to combine the borders
with the fonts etc.
And another to teach you how to use the theme-colors, fonts and font-sizes.
10 de 20 19/11/2009 01:07
Advanced css for squidoo - spice up your lens MORE
My lens about css for squidoo often gets the question: how do I combine the code? This lens is an answer
to that question.
Using the styles of the Squidoo themes
Squidoo HQ is working on a way to use classes to help us pull the style of the theme into our text/write
modules so we can really experiment with them. That is - not having to use complicated CSS, still being
able to use the colors and fonts in ways...
23
More Squidoo Help Lenses - squidoo answer deck etc.

Vote for your favorite squidoo answer deck lens (well, mine anyway)
Vote Up
Vote Down
squidoo css - my favorite code
I've gathered my favorite Squidoo-code for later r more...25 points
11 de 20 19/11/2009 01:07
Vote Up
Vote Down
Lensrank explained (really)
Well, squidoo lensrank has, by common consensus, t more...13 points
Vote Up
Vote Down
SEO for squidoo - getting found in google: search engine optimization
SEO - search engine optimization - has many differ more...8 points
Vote Up
Vote Down
All Posters.Com the cutest affiliate program EVER
I do love this affiliate program. allPosters.com g more...8 points
Vote Up
Vote Down
Advanced css for squidoo - spice up your lens MORE
My lens about css for squidoo often gets the quest more...7 points
Vote Up
Vote Down
How to do Keyword Research for squidoo
It is an under statement to say that keywords are more...7 points
Vote Up
Vote Down
Retired Squidoo Angel - Spirituality
The squidoo angels decided to take more specific r more...7 points
Vote Up
12 de 20 19/11/2009 01:07
Vote Down
Stumbleupon explained for lensmasters
Stumbleupon is great fun, and a tool for self-prom more...6 points
Vote Up
Vote Down
Squidcasting - how to squidcast on squidoo
Squidcasting is THE way to let people within squid more...6 points
10
Vote Up
Vote Down
Would you rather have a squidangel blessing or a quality link?
Would you rather have a squidangel blessing or a q more...6 points
11
Vote Up
Vote Down
If you want to become popular on squidoo...
In some ways squidoo is like a popularity contest. more...5 points
12
Vote Up
Vote Down
Squidoo money makers
This lens is meant to investigate what ways people more...5 points
13
Vote Up
Vote Down
Vox - blogging made simple and (more) social
I recently found Vox through a web search. It turn more...4 points
14
Vote Up
Vote Down
13 de 20 19/11/2009 01:07
Cute modules to spice up your lens
Cute modules that will help your lens stand out. G more...4 points
15
Vote Up
Vote Down
The Introduction Module in Squidoo
Squidoo recently changed the Introduction module. more...4 points
16
Vote Up
Vote Down
Editing your squidoo lens - ideas
It's the last week of the month. To get your lense more...3 points
17
Vote Up
Vote Down
Google Blogsearch Module
I love to make a lens better by using google blog more...3 points
18
Vote Up
Vote Down
Thank you lensmaster
I started the thank you lensmaster - squidoo revie more...2 points
19
Vote Up
Vote Down
Inspiring Dashboard messages in squidoo
This is likely to be one of those squidoo lenses t more...2 points
20
Vote Up
Vote Down
Using the styles of the Squidoo themes
14 de 20 19/11/2009 01:07
Squidoo HQ is working on a way to use classes to h more...2 points
21
Vote Up
Vote Down
Low votes in squidoo should be banned!
I think people should lighten up about the star ra more...1 point
22
Vote Up
Vote Down
Human Forum Promotion
This lens is a list of tips for promoting your onl more...1 point
23
Vote Up
Vote Down
How to make a banner for your website or myspace
I make my own banners because I just don't want an more...1 point
Share this list

Stumbleupon
Facebook
MySpace
Twitter
Digg
Delicious
Email
Grab this list

253
So, what did you think of my Squidoo css tips?
add your comment submit
Reply
TasiL TasiL Nov 3, 2009 @ 1:15 pm
Thanks for sharing I'm a newbie here and your lens is very helpful! thanks again.
Reply
spirituality spirituality Oct 31, 2009 @ 2:11 am | in reply to hayleylou
15 de 20 19/11/2009 01:07
When you're editing the intro module, click 'view source' - then you can use most of the code used
in this lens.
Reply
hayleylou hayleylou Oct 30, 2009 @ 5:24 pm
Great lens, it is already one of my favourites as I keep returning. How do you get the blue box
around text in your intro ? I want to have a few text modules in my lens with this on, thanks
Reply
kiwisoutback kiwisoutback Oct 30, 2009 @ 7:48 am
I still use this lens all the time as a reference on and off Squidoo. Thanks Katinka! Blessed.
Reply
Lisa-Marie-Mary Lisa-Marie-Mary Oct 28, 2009 @ 4:04 pm
Totally awesome - thank you so much for taking the time to make this lens! Very helpful!!
Load More
Show All
Share this Guestbook

Stumbleupon
Facebook
MySpace
Twitter
Digg
Delicious
RSS
Email
More lenses by me
If you don't know that much about webdesign, myspace or search engine optimization, my website is a good
place to start.
Katinka Hesselink - my other lenses
I'm a lensmaster, webdesigner an oldest child, an eternal student, a former teacher and single. Most of you
know me here on Squidoo as lensmaster 'spirituality' - but I've also got a life outside my interests in
spirituality (though perhaps that's n...
Nerdy lenses - digital info, tips and fun
Meet the nerd in me... I've made some lenses in which I share some of the things I've learned while
designing websites and earning a living. These are them: some SEO tips, CSS tricks, Myspace tips and
more.
Thanks for all your support!
16 de 20 19/11/2009 01:07
A big thank you to all of you who've supported my online work by:
linking to any of my web projects
Helping me win a spot on the Giant Community Showcase Blog
voting on my lenses
buying stuff from my lenses
asking questions
giving constructive feedback
Donating money...
Stumbleupon
Facebook
MySpace
Twitter
Digg
Delicious
RSS
Email
Lensroll
Favorite It
Ads by Google
5 Tips for a Flat Belly:
Unusual article with crazy tips to help you burn abdominal fat.
www.TruthAboutAbs.com
CSS Templates
High quality, fully customizable CSS templates & Website templates

www.pixelmill.com
spirituality
Giant 100
Angel
Mentor
Gold Star
by spirituality
I'm a webmaster and student of religion and spirituality. See my website on religion and spirituality:
www.katinkahesselink.net or my spiritual blog:... (more)
Explore related pages
My Favourite CSS Tricks on Squidoo

The basic tools provided by Squidoo will do pretty much everything you need to g...
17 de 20 19/11/2009 01:07
Super Advanced HTML Tips and Tricks to use on Squidoo

These html tricks for Squidoo are not really that super advanced. But they are s...
Tables for Squidoo Lenses

The <table> and associated tags are not permitted on Squidoo, and if you a...
Low votes in squidoo should be banned!

I think people should lighten up about the star ratings. Even a low star rating...
Would you rather have a squidangel blessing or a quality link?

Would you rather have a squidangel blessing or a quality link? I'd rather h...
Lensrank explained (really)

Well, squidoo lensrank has, by common consensus (at least) the following factors...
www.TruthAboutAbs.com Ads by Google
Related Topics
Squidoo Tips
squidoo tips
advanced css
advanced html
advanced html code
advanced squidoo
More...
spirituality Recommends...
Resolve a dispute through Email? with a friend, college, customer or your boss
Beautiful stumbleupon photoblogs
Katinka Hesselink - my other lenses
Best free software - for pc newbies
Katinka's Squidoo Answer Deck
More...
Favorited By
18 de 20 19/11/2009 01:07
Mickie_G
Moving4ward
goldenecho
glockr
AdrienneJenkins
GypsyPirate
absolutely
WhippetTalk
SusanFaye
besbrodepianos
marieinolympia
Tobbie
x0xpinkyx0x
tandemonimom
GonnaFly
ss834
Lamarena
WendyKrick
DoraArtDesignStudio
GrahamMarshall
mahalia
Niki_Goddard
joerice
EditionH
Donita_Marie
WhitePineLane
KNR
LasgalenArts
MindGuru
freewithme
See all 390 people | Favorite it!
Create a Lens!
Squidoo
About Squidoo
About Us
Terms of Service & Privacy
The Squidoo Blog
The SquidU Review
Lens of the Day
Help & Feedback
The Answer Deck

SquidU Forum
Policy FAQ
Feedback and Bugs
Report Abuse
Support Charity
Charity Central
How it Works
Donating is Easy
Charity Sign-Up
19 de 20 19/11/2009 01:07
Copyright © 2009, Squidoo, LLC and respective copyright owners

This page and all the pages on Squidoo generate income for lensmasters and charities based on affiliate relationships with our partners, including Amazon,
Google, eBay and others. Have fun.
More Info
20 de 20 19/11/2009 01:07

Squidoo CSS - My Favorite C..

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Squidoo CSS - My Favorite C..

Uploaded by

Copyright:

Available Formats

Squidoo CSS - my favorite code to spice up a lens http://www.squidoo.com/squidoo-css?utm_campaign=lensmaster-disco...

The Squidoo Answer Deck

Go! Create Your Own Lens

Squidoo CSS - my favorite code to spice up a lens

Ranked #57 in Squidoo Tips, #3,711 overall

5 Tips for a Flat Belly:

High quality, fully customizable CSS templates & Website templates

Squidoo coding - css examples

1. Some basic HTML explanations

4. Light blue background

Some basic HTML explanations

<p> Your text here </p>

Notice that it starts with <p>

The other basic HTML tag I use is bold:

<b>your text here</b>

Opening tag: <b>

FAQ - any questions?

add your comment submit

Share this Guestbook

Closing tag: </p>

Light blue background

Closing tag: </p>

A note for CSS newby's

4. View The page

I learned by trial and error, so can you!

CSS and HTML books

Head First HTML with CSS...

CSS: The Definitive Guide

Learning Web Design: A Be...

Build Your Own Web Site t...

CSS: The Missing Manual

(Light) Yellow background

Closing tag: </p>

Really make something stand out: yellow and orange

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

Closing tags: </p>

Closing tag: </b> a larger font-size

Here's the code: post it

Floating pictures to the right

What I will show you is how to float your images to

This will work in all kinds of modules. I particularly

So here's the code:

And, upon request, how to put a border around a picture. Experiment

<img style="float: right; padding: 10px; margin: 10px; border:

Keep track of your favorite code

Blue Typed Text

I use this for quotes sometimes. It gives a

Closing tag: </p>

Similarly - combined with a bold font, the

More blue text, but without the special font

Closing tag: </p>

More blue letters, font size a bit larger than usual

Closing tag: </p>

This is definitely a fancier way to do quotes, I think you'll agree. I've

Closing tag: </p>

More squidoo blue

Closing tag: </p>

Very beautiful subtitles that fit the style of squidoo

Closing code: </b></p>

Closing tag: </p>

Red text, within a paragraph.

Close this off with: </b>

Indenting text - the alternative for using blockquote