css code snippets to spice up your lenses

Here's lots of code examples for you to re-use and make changes for your own lenses

Don't copy and paste, because the text you see is not code.

You need to type it.

Let's talk about styling images for lenses

CODE: [< img src="http://squidoo.com/XXX.jpg" alt="name of image" />]

This code:

[< img src="http://static.squidoo.com/resize/squidoo_images/250/draft_lens4154672_1240201438snippets.jpg" alt="logo for this lens" />]

gives this:

CODE:

[ < img src="http://static.squidoo.com/resize/squidoo_images/250/draft_lens4139982module28273882photo_1240105687purple_medallion.jpg" alt="purple medallion quilt" />] [<br />] [<em>Caption here</em>]

Declarations mean:

[ < img src="http://static.squidoo.com/resize/squidoo_images/250/draft_lens4139982module28273882photo_1240105687purple_medallion.jpg" alt="purple medallion quilt" />] = where Squidoo can find the image

[<br />] = put a line break here so that the caption is under the image

[<em>Caption here</em>] - the caption in italics. It could be normal or bold also.

Gives:


Caption here

The same code as the example above, but adding a style element to the image declaration.

CODE for style declaration:

[ style="border:double #ccc 10px; padding:10px; " ]

CODE below

[< img src="http://static.squidoo.com/resize/squidoo_images/250/draft_lens4154672_1240201438snippets.jpg" alt="logo for this lens" style="border:double #ccc 10px; padding:10px; " />]

gives:

Using the code for the above example:

Using the same code as for the above example, except for the border styling:

CODE:
[< style="border: outset #0482CE 30px; padding:30px; " >]

Let's talk about using CSS to style background images

To add an image in the background of a paragraph you use the CSS background property. Let's also have another image inside the paragraph to show you the difference between the two ways to use images in a paragraph.

CODE for background:
[< style="background: url(http://squidoo.com/XXX.jpg); " >]

This paragraph has a background image and an inline image.
The Ulysses is in the background, while the two little butterflies are inside the paragraph.

There are three problems here: the text is unreadable, the image is repeated over and over and over, and you can see the background of the two little butterflies.

First we need to tell the image not to repeat, by adding 'no-repeat' to our background property. I'll also give a 3px space at the top and the left so it doesn't bump into the border.

New CODE for background:
[< style="background: url(http://squidoo.com/XXX.jpg) no-repeat 3px 3px;" > ]

This paragraph has a background image and an inline image.
The Ulysses is in the background, while the two little butterflies are inside the paragraph.

Still some problems...

Let's try aligning all the text in the paragraph to the right.

New CODE for aligning text right:
[ < text-align:right; > ]

This paragraph has a background image and an inline image.
The Ulysses is in the background, while the two little butterflies are inside the paragraph.

Right aligned text is not easy to read because we read from left to right and our eye needs a guide along the left for where the lines begin and end.

Not right yet...

This one has left-aligned text, and left padding to clear the big butterfly, but the small image is not where we'd like it.

New CODE plus line-height of 2 for space between the lines:
[ < style="border:solid #ccc 10px; padding:10px; padding-left:120px; line-height:2;" > ]

This paragraph has a background image and an inline image.
The Ulysses is in the background, while the two little butterflies are inside the paragraph.

Let's float the image to the right.

New CODE for image:
[ < style="float:right;" > ]

This paragraph has a background image and an inline image.
The Ulysses is in the background, while the two little butterflies are inside the paragraph.

The little butterflies are flying outside the frame, so we need to add some negative top margin. This will bring it up so it is inside.

New CODE:
[< style="float:right; margin-top:-42px;" > ]

This paragraph has a background image and an inline image.
The Ulysses is in the background, while the two little butterflies are inside the paragraph.

Now that's the way I like it!

Let's have some more fun with using background images

We start with a paragraph of text.

I'll put a border around the 'box' that the paragraph is enclosed by, so you can see all the changes we make are only happening to the paragraph.

These (usually) invisible boxes are how CSS code works. It's called the box model.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

This our paragraph with 10px of padding, a 2px tourquoise solid border, and line height of 2.

The basics of this lesson are the same code as in the tutorial with both large and small butterfly images, above.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

That's not it! We can't read the writing.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

Now we can see the writing a bit better, but not the beginning.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

Whoops! Not margin, then.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

That's better! Not margin, padding.

[ background url(image location) repeat-x; ]

Here are two cute butterflies behind the paragraph.
They are just in there to have some text so you can see what happens in a real paragraph in a text module.

Uh oh, that's not what we wanted!

We need to add some top padding.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

[ padding-top:50px; ]

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

We should change the padding from top to bottom.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

[ padding-bottom:60px; ]

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

[ padding-left:60px; ] [ repeat-y; ]

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

We should change the padding from left to right.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

[ padding-right:60px; ]

That's better.

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

[ border:none; ]

Here are two cute butterflies behind the paragraph.
The words are just in there to have some text so you can see what happens in a real paragraph in a text module.

Have fun using these techniques in your own lenses.

Makes the text stand out as you might want to do for a special piece.

CODE:

[ < p style=" float:left; padding:20px; margin:6px; border: solid 3px #6B8E23; text-align:left;" > Title, body text </> ]

Declarations mean:

float:left; = box stays on the left of the page
padding:20px; = 20px space inside the border
margin:6px; = 6px of space autside the border
border:
solid = style of the border, such as one line, or dotted or dashed,
3px = thickness of border
#6B8E23 = colour for border;
text-align:left; = text stays at the left inside the box

Gives:

Title of item here

Text text text text text text Text text text text text text Text text text text text text
Text text text text text text Text text text text text text Text text text text text text
Text text text text text text Text text text text text text Text text text text text text

Try some of these to make your lenses more readable.

CODE:

[<em> text here </em>] and [< strong > text here </ strong >]

Declarations mean:

em = italic
strong = bold

Gives:

text here and text here

CSS 2.0 says 'bold' and 'italics' are not to be used here, use em and strong instead.

CODE:

[&#8212;]

This code:

[one word space "&#8212;" space another word]

Gives:

one word — another word

Playing with the white space on your lens or web page will contribute to its readability and user friendliness.

Use the link to my newest css lens below to see an in-depth tutorial about this essential CSS property.