Squidoo CSS - my favorite code to spice up a lens

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 345 people | Log in to rate

Ranked #55 in Squidoo Tips, #3,245 overall

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.

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.

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>

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.

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 :)

Lensmaster

Christajayne wrote...

in reply to spirituality Now I understand, thanks for your help!

ReplyPosted June 12, 2009

Lensmaster

spirituality wrote...

in reply to Christajayne I've added an explanation in more detail to my Advanced CSS lens. Please check it out over there.

ReplyPosted June 12, 2009

Lensmaster

spirituality wrote...

in reply to Christajayne If you only want to make one word or sentence and not the whole paragraph different, use b instead of p in both the opening and closing tags. p stands for paragraph, so tags starting with p will affect the whole paragraph.

ReplyPosted June 12, 2009

Lensmaster

Christajayne wrote...

I am having a hard time with code. When I try to place code for background, plus trying to make the first word of the starting paragraph a different font, the whole paragraph changes to that font. What is this newbie doing wrong? :)

ReplyPosted June 11, 2009

Lensmaster

spirituality wrote...

in reply to AngelSong You could use two table of content modules and pick and choose which items to have show up. To have a background of your choice you have to go fancy. See Fancy tables of content.

ReplyPosted June 04, 2009

 
Next Page
1 of 6 pages

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>

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>

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:
<p style="background: #E1E8F2; padding: 15px; margin: 0;">

Closing tag: </p>

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 & XHTML
Head First HTML with CSS...
CSS: The Definitive Guide
CSS: The Definitive Guide
Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics
Learning Web Design: A Be...
Build Your Own Website The Right Way Using HTML & CSS
Build Your Own Website Th...
CSS: The Missing Manual
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:
<p style="background: #FCF8C0; padding:15px; margin: 0;">

Closing tag: </p>

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:<p style="border: dotted 2px #ff6600; background: #FCF8C0;
padding: 10px">

Closing tags: </p>

Floating text to the right, and giving it color 

text that floats to the right, has a yellow background 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: #FCF8C0; width: 200px; float: right; padding: 15px; margin: 15px; font-size: 150%; line-height: 1.5em;">


Closing tag: </b>

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 orange;"
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 


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; 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: #1f94bf; font: 150%/1em '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. It's the precise color of the default titles.


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

Closing tag: </p>

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

Closing tag: </p>

More squidoo blue 

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


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

Closing tag: </p>

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;"><b>

Closing code: </b></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>

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: <p style="margin-left: 20px">

Closing tag: </p>

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.



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 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.

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

closing tag:
</b>

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.
featured lens 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...

featured lens 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.

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

Lensmaster

Frankster wrote...

Thank you for the excellent advice. I'm using some of it now in a new lens. Bear hugs, Frankie

ReplyPosted July 03, 2009

Lensmaster

spirituality wrote...

in reply to Wir55 It should work with the text/write module: works on this lens after all. But it's a long code - so deleting the hidden can be hard. Just keep trying.

ReplyPosted June 29, 2009

Lensmaster

Wir55 wrote...

in reply to spirituality Yeah, I got it. thanks

ReplyPosted June 29, 2009

Lensmaster

Wir55 wrote...

What module does that rounded corners one work with? I tried it with the text module and it doesn't work. thanks

ReplyPosted June 29, 2009

Lensmaster

spirituality wrote...

in reply to TheresaMayhew No - not in the sense of html-table code. However, with the use of this lens : tables on squidoo you can use a table layout without using tables. In fact it's a complicated coding system with paragraphs. Luckily: you can just use a table generator that's built into that lens.

ReplyPosted June 22, 2009

 
Next Page
1 of 45 pages

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.
featured lens 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.

featured lens 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...

Thanks for all your support!

A big thank you to all of you who've supported my online work by:

Related Topics

spirituality Recommends...

Favorited By

Create a Lens!