The Stylish Squid - Cool Graphics To Deck Out Your Lens!

These divider and banner designs are a great way to give your lens its own unique look and feel! They provide a nice and visually appealing way to break up your ideas, modules, or whatever you want. All of these banner and divider graphics are designed by me, just for you. :]

Header and footer designs are also a nice way to add a unique touch to highlight a single module or to theme your entire lens. Feel free to mix and match different graphics together, they are all made in the same Squidoo themed colors and can fit well together.

The best part is they are so easy to integrate into any lens design!

The necessary HTML and CSS code is already provided for you. All you have to do is pick out the design you want and then copy its URL address into the code.

There's more than just code to make dividers too. Try jazzing up your lens or highlighting important points with your own personalized headers and banners like the one below.

It's So Easy! And Don't Forget...

Be sure to check back with this page as fresh new designs will be added periodically. Don't forget to stop by the guestbook, I'd love to hear some suggestions for new and interesting designs.

Thanks for stopping by The Stylish Squid. Have fun prettying up those lenses!

http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv1.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv2.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv3.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv4.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv5.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv6.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv28.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv7.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv8.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv9.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv13.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv14.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv15.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv16.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv17.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv18.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv19.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv20.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv21.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv34.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv10.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv33.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv11.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv32.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv12.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv39.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv22.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv38.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv23.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv37.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv24.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv36.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv25.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv35.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv26.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv27.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv29.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv31.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv30.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv40.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv41.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv42.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv43.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv44.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv45.gif





http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv46.gif

NEW!
http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv47.gif




NEW!
http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv48.gif




NEW!
http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv49.gif




NEW!
http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv50.gif




NEW!
http://img.photobucket.com/albums/v644/CoconutSquash/squidoo%20graphics/sqdiv51.gif

<p align="center"><img src="PASTE_URL_HERE" /></p>

Each of the designs above has its URL address listed beneath it. All you need to do is copy that URL address in place of where it says PASTE_URL_HERE in the code listed above. Be careful not to delete the quotation marks!

Then, just copy the finished code into a text/write module in your lens and you're all finished. See how easy that was?

This will display the design on your lens just as it is shown above.

But that's not all you can do with these designs...

Headers!

Banners!

Footers!

It's worth saying that any of the designs listed on this lens can have text displayed over them with the codes below.

However, it's also worth saying that maybe not all of them look the best with text, as some have high contrast colors and may make text illegible.

But who am I to tell you what to do? Go nuts!

Here are the codes for you to make your own headers, banners, and footers with text like the ones shown above.

The Header Code:

<p align="left" style="width:590px; height:50px; background-image:url('PASTE_URL_HERE'); background-repeat:no-repeat; background-position:center center; color:FONT_COLOR; font-size:250%; font-family:Trebuchet MS,Arial,Helvetica,sans-serif;"><b style="position:relative; left:16px; top:16px;">YOUR_TEXT</b></p>


The Banner Code:

<p align="center" style="width:590px; height:50px; background-image:url('PASTE_URL_HERE'); background-repeat:no-repeat; background-position:center center; color:FONT_COLOR; font-size:250%; font-family:Trebuchet MS,Arial,Helvetica,sans-serif;"><b style="position:relative; top:16px;">YOUR_TEXT</b></p>


The Footer Code:

<p align="right" style="width:590px; height:50px; background-image:url('PASTE_URL_HERE'); background-repeat:no-repeat; background-position:center center; color:FONT_COLOR; font-size:250%; font-family:Trebuchet MS,Arial,Helvetica,sans-serif;"><b style="position:relative; right:16px; top:16px;">YOUR_TEXT</b></p>

This should all be pretty self explanatory, but I'm going to explain it anyway.

• YOUR_TEXT - This is where you place your header, banner, or footer text.
• FONT_COLOR - This changes the color of the text.
• PASTE_URL_HERE - Just as before, this is where you insert the URL for the desired design.

And of course, just insert the code wherever you want inside of your text/write module.

So, you don't know what do you put in place of FONT_COLOR?

That's okay, I'll explain all about that here. There are two different ways you can input color here, and they both work just fine.

The first way is a HEX code for the color you want. These are usually preceded by a # symbol and can be followed by six or three characters. This method is good for pinpointing exact colors you want. Most good imaging software will give you a HEX code for a chosen color.

There are three different HEX colors that are worth noting. These are the official Squidoo colors. A big thank you to this lens for providing them.

• #069


• #C60


• #F90

The other way to define what colors to use in place of FONT_COLOR is to just type in a color name. All of the generic colors that you could think of are pretty much covered such as red, blue, green, grey, aquamarine, salmon, etc, etc, etc.

You can find a nice list of unique color names along with their corresponding HEX codes here.

And if that still wasn't enough colors for you, you can try consulting the ridiculously huge color chart.

A few other useful things that might help you in using this, as well as any, HTML code in your website.

<br />

The <br /> tag is quite helpful in Squidoo as it allows you to add extra spaces between lines, paragraphs, and graphics. This is very helpful with the positioning of graphics and text on your lens. Squidoo text/write modules don't allow you to have more than return per space, so using the conventional return key will not work to separate your paragraphs more than one line.




See, this is a paragraph that is substantially separated from the paragraph above. This was done by adding a few <br /> tags between the two paragraphs.




<p> and </p>

Be careful with your <p> tags! You'll notice that all of the code on this page starts with a paragraph tag (<p>). So make sure that you close out any previous <p> tags with a </p> before you input any of the HTML codes from above.

So why bother using <p> tags you ask?

Since Squidoo does not allow tables, nor does it allow any type of HTML centering code with images and text, it is necessary to use the <p> tag to get images and text centered properly on lenses. Unfortunately, unlike <table> tags, <p> tags should not be placed inside one another.

For example:

<p>
text text text
<p>
image
</p>
text text text
</p>

Does not work. Whats worse is that Squidoo will try and fix the broken code and could possibly mess up any previous HTML code that is on your lens.

This would be the correct way to execute the code from above.

<p>
text text text
<p/>
<p>
image
</p>
<p>
text text text
</p>

Each <p> tag must be closed before another one is opened for them to function properly.