Squidoo Lens Styling

1. Background Color
2. Background Gradient
3. Background Image
4. Background Gradient + Image
5. Rounded Corners
6. List Styling - Images
7. List Styling - Images + Links
8. List Styling - Images + Links 2
9. List Styling - Images + Links + Floats
10.Guestbook

Example

This is an example block of text.
It is surrounded by 'p' tags.

Code

<p style="padding: 10px 15px; font-weight: bold; color: #fff; background: #FF9900;">This is an example block of text.
It is surrounded by 'p' tags.</p>

Explanation

Firstly, I just write some normal text:

This is an example block of text.
It is surrounded by 'p' tags.

Then I surround the text with an opening and closing 'p' tag:

<p>This is an example block of text.
It is surrounded by 'p' tags.</p>

Lastly, I add the CSS:

<p style="padding: 10px 15px; font-weight: bold; color: #fff; background: #FF9900;">This is an example block of text.
It is surrounded by 'p' tags.</p>

All styles in a Squidoo lens must be inline (i.e. attached directly to the element whose properties you want to alter).

Styles Used

padding: 10px 15px; - adds a padding between the font and the edge of the element (in this case the 'p' tag)
font-weight: bold; - makes the font bold
color: #fff; - makes the font color white
background: #FF9900; - adds the orange background color

Example

This is an example block of text.
It is surrounded by 'p' tags.

Code

<p style="padding: 10px 15px; font-weight: bold; color: #fff; background: #feb951 url(http://webservice.pro/files/bg_gradient.png) repeat-x;">This is an example block of text.
It is surrounded by 'p' tags.</p>

Explanation

In order to get the gradient effect I have taken the code from the 'Background Color' section and just changed:

background: #ff9900;

to:

background: #feb951 url(http://webservice.pro/files/bg_gradient.png) repeat-x;

What I'm doing is telling the page to go and find an image at the address 'http://webservice.pro/files/bg_gradient.png' (which is a 1px wide image) and then repeat it horizontally (repeat-x) in the background.

The image which is being repeated looks like this:



Because the image is placed in the background it is unaffected by the padding which is being applied to the text in the element, and so sits nice and tight to the edge of that element.

Example

This is an example block of text.
It is surrounded by 'p' tags.
Who put that squid there?

Code

<p style="padding: 10px 15px; font-weight: bold; color: #fff; background: #ff9900 url(http://webservice.pro/files/squidoo_bg_image.jpg) no-repeat right top;">This is an example block of text.
It is surrounded by 'p' tags.
Who put that squid there?</p>

Explanation

This is the same idea as the 'Background Gradient' section above, the only difference is that this time I don't repeat the background image (no-repeat) and I also position it over in the right top corner.

Example

This is an example block of text.
It is surrounded by 'p' tags.
Who put that squid there?

Code

<p style="padding: 10px 15px; font-weight: bold; color: #fff; background: #feba52 url(http://webservice.pro/files/squidoo_bg_gradient_image.jpg) no-repeat right top;">This is an example block of text.
It is surrounded by 'p' tags.
Who put that squid there?</p>

Explanation

This is the same code as the 'Background Image' section above just with a different graphic.

The image used looks like this:



Ideally, it would be preferable to use two images - one for the gradient and one for the squid, but due to the code stripping on Squidoo it'd be very hard to implement this successfully.

Instead I just used a single image for the background and then set the background color to match the bottom edge of the image so as to create a smooth transition. If you're doing this on a Maxed lens the image width is 510px.

Example

This is an example block of text.
It is surrounded by 'p' tags.
I can write lots of stuff in here.

Code

<p style="padding: 0; background: url(http://webservice.pro/files/rounded_top.png) no-repeat;">
</p><p style="width: 410px; padding: 0 20px 18px 20px; font-weight: bold; color: #fff; background: #ff9900 url(http://webservice.pro/files/rounded_bottom.png) no-repeat bottom left;">This is an example block of text.
It is surrounded by 'p' tags.
I can write lots of stuff in here.</p>

Explanation

The rounded corners effect requires a little hack and two images.

The images:





The rounded corners effect works by positioning one image at the top of your content, the second image at the bottom of your content, and then using a background color which matches the images to fill the gap in the middle.

The hack:

Unfortunately, Squidoo won't let us use the div tag or span tag, so we have to find another way to attach both images to different elements (because you can currently only attach one background to a particular element).

My solution was to use a pair of empty p tags directly above the p tags which hold the main content.

I could then attach the top image to the empty p tags like so:

<p style="padding: 0; background: url(http://webservice.pro/files/rounded_top.png) no-repeat;"></p>

and the bottom image to the main content p tags:

<p style="width: 410px; padding: 0 20px 18px 20px; font-weight: bold; color: #fff; background: #ff9900 url(http://webservice.pro/files/rounded_bottom.png) no-repeat bottom left;">This is an example block of text.
It is surrounded by 'p' tags.
I can write lots of stuff in here.</p>

Styling it this way allows me put as much content as I want into the content area and not break the rounded corner effect.

Example

• A List Apart
• Digital Web
• Web Standards Project

Code

<ul style="padding: 0;">
<li style="padding: 5px 0 5px 25px; list-style:none; background: url(http://webservice.pro/files/alistapart.png) no-repeat 0 5px;">A List Apart</li><li style="padding: 5px 0 5px 25px; list-style:none; background: url(http://webservice.pro/files/digitalweb.png) no-repeat 0 5px;">Digital Web</li><li style="padding: 5px 0 5px 25px; list-style:none; background: url(http://webservice.pro/files/wsp.ico) no-repeat 0 5px;">Web Standards Project</li>
</ul>

Explanation

A basic unordered list.

padding: 5px 0 5px 25px;

- this adds 5px top padding, 0px right padding, 5px bottom padding, and 25px left padding. The 25px left padding creates a nice clear space for the list item background image.

background: url(http://webservice.pro/files/alistapart.png) no-repeat 0 5px;

- this rule gets an image from a server, tells it not to repeat the image (i.e. show the image only once), and then positions the image flush to the left hand side (0) and five pixels from the top of the element (5px).

Example

• A List Apart
• Digital Web
• Web Standards Project

Code

<ul style="padding: 0;">
<li style="padding: 5px 0 5px 25px; list-style:none; background: url(http://webservice.pro/files/alistapart.png) no-repeat 0 5px;"><a href="http://alistapart.com">A List Apart</a></li><li style="padding: 5px 0 5px 25px; list-style:none; background: url(http://webservice.pro/files/digitalweb.png) no-repeat 0 5px;"><a href="http://digital-web.com">Digital Web</a></li><li style="padding: 5px 0 5px 25px; list-style:none; background: url(http://webservice.pro/files/wsp.ico) no-repeat 0 5px;"><a href="http://webstandards.org">Web Standards Project</a></li>
</ul>

Explanation

This is exactly the same as 'List Styling - Images' above, except that I've added in a hyperlink around the list text.

But what if you want the image to be included as part of the hyperlink? Hmm...

Example

• A List Apart
• Digital Web
• Web Standards Project

Code

<ul style="padding: 0;">
<li style="list-style:none; margin:10px 0;"><a href="http://alistapart.com" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/alistapart.png) no-repeat 0 5px;">A List Apart</a></li><li style="list-style:none; margin:10px 0;"><a href="http://digital-web.com" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/digitalweb.png) no-repeat 0 5px;">Digital Web</a></li><li style="list-style:none; margin:10px 0;"><a href="http://webstandards.org" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/wsp.ico) no-repeat 0 5px;">Web Standards Project</a></li></ul>

Explanation

In this example the list item image is now part of the link.

I do this by taking the styles which I had previously applied to the list items, but now apply them directly to the hyperlink inside of the list item.

Note: The following example doesn't look right in IE6 at present. Although it's not ideal, you could achieve the same effect using tables to ensure proper cross-browser compatibility.

Example

• A List Apart
• Digital Web
• Web Standards Project

• A List Apart
• Digital Web
• Web Standards Project

Code

<ul style="float: left; width: 40%; padding: 0;">
<li style="list-style:none; margin:10px 0;"><a href="http://alistapart.com" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/alistapart.png) no-repeat 0 5px;">A List Apart</a></li><li style="list-style:none; margin:10px 0;"><a href="http://digital-web.com" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/digitalweb.png) no-repeat 0 5px;">Digital Web</a></li><li style="list-style:none; margin:10px 0;"><a href="http://webstandards.org" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/wsp.ico) no-repeat 0 5px;">Web Standards Project</a></li></ul>

<ul style="float: right; width: 40%; padding: 0;">
<li style="list-style:none; margin:10px 0;"><a href="http://alistapart.com" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/alistapart.png) no-repeat 0 5px;">A List Apart</a></li><li style="list-style:none; margin:10px 0;"><a href="http://digital-web.com" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/digitalweb.png) no-repeat 0 5px;">Digital Web</a></li><li style="list-style:none; margin:10px 0;"><a href="http://webstandards.org" style="padding: 5px 0 5px 25px; background: url(http://webservice.pro/files/wsp.ico) no-repeat 0 5px;">Web Standards Project</a></li></ul>

<p style="clear: both;"><strong>Code</strong></p>

Explanation

In this example there are two unordered lists, one floated left and the other floated right.

Each unordered list is given a width (40%).

Finally, I have to add a style of "clear: both;" to the p tag which surrounds the 'Code' heading just below the 'Example' section.

This is necessary because both of the elements above (i.e. the two unordered lists) the word 'Code' are floated. As such they are effectively removed from the flow of the page and this will create layout issues.

Adding style="clear: both;" to the word 'Code' forces it to drop below the floated elements, and line up properly.