Home » Squidoo Community

Stylish CSS Snippets for Squidoo

16 Comments
- Know of more CSS tip…
- Say hi!

36 Like

Like 36

Pin It

Ranked #1,857 in Squidoo Community, #181,254 overall

Smange's favourite CSS snippets for Squidoo

After playing around with Squidoo for a while, I decided it was time to collect all my favourite CSS snippets in the one place. Since I'm a sharing kind of person, I decided that place should be in a place where other Squidoo users can easily find it and use the snippets themselves.

I've also snuck a few modules in, because when I first started using Squidoo I thought they were nifty uses of CSS that everybody around here seemed to like. On some levels this is true, but the reality is that they're easy and readily available for anyone. There's only a few of them, and I've sprinkled them throughout the CSS snippets.

So, here's my collection of favourite CSS snippets used for breaking up text, highlighting, quoting etc. I'm going to presume a little background knowledge in using CSS and just get on with sharing the code. Enjoy!

(Squid Teacher by Steve Thompson is licensed under Creative Commons - Available at Squid Art Too)

Skip ahead!

If you know what you want

Quickly get to the best tips!

Grey Boxes
Floating Grey Boxes
Styling Text Inside Boxes
Colour Combinations for Boxes
Using CSS in the Intro Module
Mixing it up
My Favourite Code
Adapting modules with CSS
Using CSS to hack your profile

Keeping it simple

A word of advice

Much as you might love all the CSS snippets available here and elsewhere, it's wise to stick to just one or two different styles per lens. Mix it up by changing shapes and positions, but stick to one/two colours and border styles per lens. Otherwise, your lens will look like a fairground - In fact, it will look like *gulp* this lens. Not cool. :)

Basic Text Styling

Simple text tricks

HTML tags you can use with Squidoo:
 
 <a> 
 <img> <ul>
<ol> <li>

Mostly, I'll be showing CSS snippets using the p (paragraph) tag, but remember you can use these other tags too. Especially good to remember with images! If you want more advice and useful links on HTML, there's a little more info on my "Top Tips For New Squidoo Lenses" lens.

Using Code From This Lens
I'm putting this code out here for people to use in their lenses. I'm making it extra easy for you to use, too. Whenever you see a code snippet, triple-click on the paragraph then copy and paste into your work. Don't forget to change the words later!

Headings on Squidoo

<H1> for Squidoo lenses is the title of the lens, eg. "Stylish CSS Snippets for Squidoo" for this lens.
<H2> for Squidoo lenses is the title of the module, eg. "Basic Text Styling" for this module.
<H3> for Squidoo lenses is the subtitle of the module, eg. "Simple text tricks" for this module.
But, H4 isn't an allowed tag in Squidoo!

In order to keep my styling consistent, I decided to use the same tags whenever I wanted to use a H4 tag. I chose the strong and em tag together.

Here's a makeshift H4 title

Acknowledgements

Thanks to these geeks for their CSS guides

A lot of the examples from this guide are based heavily on things I have found in other CSS guides on Squidoo. My examples are different, but I owe plenty of the ideas to these lenses. Take a look at them for lots of other neat CSS for Squidoo!

Squidoo CSS - my favorite code to spice up a lens by SquidooHelp (I think I originally got the idea for curved corners and the StickyNotes hack from here).
CSS Tricks by thefluffanutta (Some of my favourite ideas come from here, like a CSS border as a divider and hacking the intro title. And although I didn't get the ideas from this, there's great tips on how to use Squidoo classes and float paragraphs. Also check this lens out for how to float paragraphs to make a column effect and other pretty CSS hacks)
Advanced CSS: Layout Tricks and Lab Experiments by GreekGeek (has great CSS info and has more details on curved corners and how to use them to make widgets!)

Grey Boxes

HTML snippets - Grey is subtle and stylish

These are some of my favourites, just because they can look really sleek against the right combination of pictures and theme. I've added all the options so the code is ready on demand and so that if you're still newish to CSS you can start to see which bits of the code change what.

Here's a simple grey box.

Here's your simple grey box code

Here's a simple grey double-bordered box.

Here's your simple grey double-bordered box code

Here's a simple grey dashed-bordered box.

Here's your simple grey dashed-bordered box code

Here's a simple grey box with curved corners.
Note: Not all browsers will render these corners the same way.

Here's your simple grey box with curved corners code

Here's a simple grey double-bordered box with curved corners.

Here's your simple grey double-bordered box with curved corners code

Important!

The Most Important Thing

This is a module called "The Most Important Thing". It only comes in orange, but that's usually a great colour for most themes anyway. If you want something similar in a different colour, you can always do it with a little CSS. But there's none to be found here - this is just a plain and simple module.

Floating Grey Boxes

Code Snippets - For people who aren't simple

All I'm doing to change these boxes is to add a float:left or a float:right plus a width amount. Otherwise, these are exactly the same as the original grey boxes.

float:right; width: 300px;

Here's a simple grey box.

Here's your simple grey box code

Here's a simple grey double-bordered box.

Here's your simple grey double-bordered box code

Here's a simple grey dashed-bordered box.

Here's your simple grey dashed-bordered box code

Here's a simple grey box with curved corners.
Note: Not all browsers will render these corners the same way.

Here's your simple grey box with curved corners code

Here's a simple grey double-bordered box with curved corners.

Here's your simple grey double-bordered box with curved corners code

Styling Text Inside Boxes

They need a little zing!

Here's a simple grey box with larger, bolded text and taller line-height.

Here's your code for the simple grey box with larger, bolded text and taller line-height

Here's your code just for the larger, bolded text and taller line-height

Here's a simple grey box with larger, centred text and taller line-height.

Here's your code for the simple grey box with larger, centred text and taller line-height

Here's your code just for the larger, centred text and taller line-height

StickyNote

These sticky-notes are actually a module called "Stickynote". No CSS required!

Know of more CSS tips?

Share your favourites

If you've written a lens on CSS tips and tricks, please add it here! Also, if you want to share your favourite CSS tips websites feel free to do that too.

1

Vote Up

Vote Down

Squidoo CSS - my favorite code to spice up a lens

I've gathered my favorite Squidoo-code for later r more...0 points

2

Vote Up

Vote Down

My Favourite CSS Tricks on Squidoo

The basic tools provided by Squidoo will do pretty more...0 points

3

Vote Up

Vote Down

Advanced CSS: Layout Tricks and Lab Experiments

Columns! Images! Colored boxes! This lens is my CS more...0 points

Share this list
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- Email

Colour Combinations for Boxes

Getting a little variety

Plug these colours in to the box css code for a change of scenery (the code is now inside of the box):

This is border:#4682B4; background: #B0C4DE;

This is border:#7109AA; background: #FFFF00;

This is border:#D0006E; background: #98ED00;

This is border:#212D43; background: #00A287;

This is border:#183090; background: #F0C0A8;

This is border:#3060C0; background: #F0F000;

This is border:#FF7C00; background: #37B6CE;

This is border:#339A99; background: #FFFFC0;

This is border:#C93F45; background: #FFE932;

This is border:#003090; background: #F0F090;

This is border:#6D6F40; background: #A4E89F;

This is border:#D67D1F; background: #FFC559;

This is border:#30380A; background: #AFFF00;

This is border:#58C0B2; background: #EFF49A;

This is border:#2FA3CA; background: #FFC559;

This is border:#5E4A27; background: #B9862D;

This is border:#303030; background: #00D890;

This is border:#183090; background: #F0C0A8;

This is border:#B9862D; background: #FFE932;

This is border:#5C4B53; background: #8E9689;

This is border:#C0A8C0; background: #FFFFF7;

This is border:#67AFAC; background: #FFFFF7;

This is border:#181848; background: #60B3B3;

This is border:#184818; background: #609048;

I know some of them look a little weird, but I was just experimenting and some of them are great.

If you want to generate some new ideas for colour schemes of your own, try here:

Using CSS in the Intro Module

The intro module is a bit different

Not all CSS can be used to style text in the intro module. Forget pretty corners. Stick to basics.

However, it can be useful to use CSS in the intro module. Scroll through the pages I've favourited and see for yourself why it's worthwhile.

Obviously, you need to work with how the text looks on your lens, too. Choose something subtle and classy if you choose to use CSS in your intro module.

Note: thefluffanutta has detailed a great hack for making the introduction module border sit nicely.

Mixing it up

Find code and mix it up!

Whenever you stumble across some nifty CSS work, take a look at the page source (go to the menu and choose "View" --> "Page Source"). Search for the snippet you liked and try to understand what they've done. Learn, love, remix and re-use.

Mix up the options I've given you on this page!

My Favourite Code

Using combinations of box style, colour and text style

Personally, I'm a big fan of floating styled boxes off to the right, but I'm going to show you my favourite boxes all floated left so they stay together nicely.

This yellow is eye-catching

<p style="float:left; width: 200px; border: 6px double #4682B4; background-color: #B0C4DE; -moz-border-radius: 10px; -webkit-border-radius: margin: 10px; padding: 10px; font-size: 110%; line-height: 1.1em; text-align:center;">With a double curved border, I like to leave off bolding

Very old-fashioned

I like the dashed bordered box only as a simple full-width box

You could use this to write a short paragraph

<p style="float:left; width: 200px; border: 6px double #67AFAC; background-color: #FFFFF7; -moz-border-radius: 10px; -webkit-border-radius: margin: 10px; padding: 10px; font-size: 110%; line-height: 1.1em; text-align:center;">Sweet colours with double curved borders are nice

These are great as floats or full width.

<p style="float:left; width: 200px; border: 2px solid #999999; background-color: #F7F7F7; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 10px; padding: 10px; font-size: 130%; line-height: 1.3em; text-align:center; font-weight:bold; ">Single, gray curved line and larger bold text

Bold and Beautiful

<p style="float:left; width: 200px; border: 6px double #003090; background-color: #F0F090; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 10px; padding: 10px; font-size: 110%; line-height: 1.1em; text-align:center; ">This is border:#003090; background: #F0F090;

Here's one I love from thefluffanutta which I found here:



Note: Don't put any text in the paragraph if you want to get that effect (although, it would look kind of cool with text in it too).

It's not easy being green

<p style="float:left; width: 200px; border: 2px solid #D67D1F; background-color: #FFC559; -moz-border-radius: 10px; -webkit-border-radius: margin: 10px; margin: 10px; padding: 10px; font-size: 120%; line-height: 1.2em; text-align:center; font-weight:bold;">Short and Snappy

Here's a great Quote Indent

<p style="float:left; width: 200px; border: 2px solid #30380A; background-color: #AFFF00; -moz-border-radius: 10px; -webkit-border-radius: margin: 10px; margin: 10px; padding: 10px; font-size: 120%; line-height: 1.2em; text-align:center; font-weight:bold">So Bright!

<p style="float:left; width: 200px; border: 6px double #C0A8C0; background-color: #FFFFF7; -moz-border-radius: 10px; -webkit-border-radius: margin: 10px; margin: 10px; padding: 10px; font-size: 110%; line-height: 1.1em; text-align:center;">It's just like icecream!

Blackbox

This pretty box is actually a handy module called "Black Box". Not just in black either, it comes in black, blue, light blue, green, grey, orange and red. Not a drop of CSS in sight!

Adapting modules with CSS

A small hack with class (but unfortunately an awful sense of humour)

Sticky Note Hack

Here's something that looks like the "StickyNote" module, but is actually CSS

Instead of adding your own styling, just tell the paragraph to use class="postit-inner" and it will look just like the StickyNote module. Then you can do other cool CSS things, like floating left/right around your text. Remember to add a margin so your text doesn't slam up against the side of your floated paragraph.

Here's your StickyNote Hack code

"Most Important Thing" Hack

This module hack can also be done with the "Most Important Thing" module

You can adapt the "Most Important Thing" module to float left/right have an alternate width, border colour, background etc. And yes, you could just style the entire box yourself from scratch, too. But, you like the padding and border width from the "Most Important Thing" don't you?

Here's your "Most Important Thing" Hack code

BlackBox Hack Fail
BlackBox is different, in that the design is made using two divs with different information contained in each. It also uses the id attribute, which gets stripped out of your Squidoo code. So, I'm afraid you'll just have to use CSS to design something similar or stick to using the module.

A word of note
Something else to remember about using the modules over these CSS hacks is that you can have a "hidden" title to the module. Or rather, that when you use the module, the title is contained inside the StickyNote or "Most Important Thing". This has many benefits.

Using CSS to hack your profile

Because it's fun!

Okay, after a bit of mucking around I deduced that the default bio display on a lens will show about 8 lines of text before cutting off with a "more" link. If you add pictures to your bio before that "more" cutoff you can make them display in the lens sidebar.

Here's the trick: Just keep using pictures (and paragraphs containing pictures) until you want the sidebar to stop displaying, then get on with the text. There's no fancy hacks - you can even use line breaks within paragraphs (but not between paragraphs). Plus, you can even get away with a handful of lines of text before you need to start using pictures.

Keeping the profile page neat

Here's the next important thing to note: If you add a long stream of pictures into your default bio it will look pretty ugly on your bio page. So, to get around this, there's a few hacks worth remembering.

Centre your pictures so they don't look so bad (on both your profile and your lens sidebar).
Use paragraph floats to make the pictures sit alongside each other on the bio page, yet in a neat vertical line on the lens sidebar. Note: float:left looks better in the sidebar than float:right, so stack up columns using float:left.

Here's how part of my bio looks (as I write this):

It's a float:left paragraph (with plenty of padding) containing smaller, centred images, followed directly (no line break) by a larger picture. The padding in the paragraph on the left is used to push the larger picture on the right further over. I've also got links around all the pictures, but I'll strip that out and show you the basic code for the layout.

 <img src="http://yourpicturehost.com/Twitter.jpg" > 
<img src="http://ysquidutils.com.com/yourname.jpg" border="0" > < img src="http://yourpicturehost.com/whatever.jpg" ><img style="padding: 15px;" src="http://yourpicturehost.com/TheLargePicture.jpg" >

Note: The first is there (inside the paragraph) because when it was in the lens sidebar it was sitting too close to the picture before it. This was just one way of fixing this issue.

More Squidoo CSS Guides & Snippets

Learn from all of us!

There's plenty more information about Squidoo CSS out there. Here's a random selection of my favourite guides.

Read CSS tips from outside Squidoo

Yes, Squidoo limits the tags you can use and therefore limits what your CSS can achieve, but there's still plenty of neat tips and tricks for CSS out in the rest of the web. Keep your eyes open!

Understanding CSS Filter Effects
CSS Summer Leadership & Counselor Program
PHILADELPHIA, May 30, 2012 /PRNewswire/ -- Covenant Security Services (CSS ...
Lancaster warns players to behave

More Squidoo Tips

Squidoo Tips by Smange

Here's some of the best lenses I've written on Squidoo tips. If you're new around here, I recommend taking a look!

Say hi!

Thanks for stopping by. If you've got any comments, tips or tricks you'd like to add then feel free!

Reply

Mia-Mia Sep 2, 2011 @ 2:44 am | delete

Thank you for a great lens. I'm going to bookmark this one for future reference.

Reply

autowebsite May 25, 2011 @ 3:51 pm | delete

"Here's a simple grey box with curved corners.
Note: Not all browsers will render these corners the same way" - cool!

Reply

EditorDave Jan 14, 2011 @ 1:10 am | delete

Thank you for this amazingly enlightening lens. I've always admired the "decked-out" lenses and wondered how they did it. I'm bookmarking your lens for later reference. And I've liked, favorited, thumbs-upped, and lensrolled your masterpiece. Congrats on a great job!

Reply

the777group Nov 3, 2010 @ 8:47 pm | delete

Squidoo CSS made easy. Thanks.

Reply

ShirlW Oct 20, 2010 @ 9:20 am | delete

Well done and so easy to understand, which is so important to the technically challenged (that would be me).

Blessed today by a Squid Angel and featured on Pay It Forward - My Life As An Angel
Load More

Show All

Share this Guestbook
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- RSS
- Email

Tell me what you think!

Ratings are much appreciated!

This module only appears with actual data when viewed on a live lens. The favorite and lensroll options will appear on a live lens if the viewer is a member of Squidoo and logged in.

Add this to your lens »

36 Like

by smange

I'm an eclectic sort of person who writes on... more »

Feeling creative? Create a Lens!

Squidoo

Stylish CSS Snippets for Squidoo

Smange's favourite CSS snippets for Squidoo

Skip ahead!

If you know what you want

Keeping it simple

A word of advice

Basic Text Styling

Simple text tricks

Acknowledgements

Thanks to these geeks for their CSS guides

Grey Boxes

HTML snippets - Grey is subtle and stylish

The Most Important Thing

Floating Grey Boxes

Code Snippets - For people who aren't simple

Styling Text Inside Boxes

They need a little zing!

StickyNote

Know of more CSS tips?

Share your favourites

1

Squidoo CSS - my favorite code to spice up a lens

2

My Favourite CSS Tricks on Squidoo

3

Advanced CSS: Layout Tricks and Lab Experiments

Please pick your widget size and display. Then click "Make the Widget" to get the code that's just right for you.

Voila! Just copy and paste this code into your own site. Have fun!

Oopsey! Please login to Squidoo in order to add this module to your lens.

Colour Combinations for Boxes

Getting a little variety

Using CSS in the Intro Module

The intro module is a bit different

Mixing it up

Find code and mix it up!

My Favourite Code

Using combinations of box style, colour and text style

Blackbox

Adapting modules with CSS

A small hack with class (but unfortunately an awful sense of humour)

Using CSS to hack your profile

Because it's fun!

More Squidoo CSS Guides & Snippets

Learn from all of us!

Read CSS tips from outside Squidoo

More Squidoo Tips

Squidoo Tips by Smange

Say hi!

Tell me what you think!

Ratings are much appreciated!

by smange

Explore related pages

Related Tags

Want our Newsletter?