HTML Borders Backgrounds

HTML Examples, Backgrounds and Borders to Copy and Paste

Have you seen sharp looking lenses formatted with HTML borders and backgrounds and wished you could do the same? There are already plenty of EXCELLENT how-to-HTML lenses available, so I thought I'd do something a little different.

There are two main topics in this lens:

First half of this lens - tons of html examples that can easily be copied and pasted into your own lens to create borders, background colors, boxes, and image borders. If you need formatting in a hurry or have little HTML experience, this may be a helpful tool for you. Scroll through the html examples of simple borders, backgrounds, and combinations. If you see something you like, copy the html code and paste it into your own lens. Insert your own content where each code says YOUR STUFF HERE.

Second half of this lens will show you how to easily add color and pattern to your lens, add buttons to drive visitor behavior, and create your own personal logo. I've found a free site that provides thousands of backgrounds and a generator module that lets you customize all kinds of things like buttons, tabs and logos. Store all your creations in your personal folder on the website and link directly to the site (free hosting!). Pick your favorites, enhance them with any of the customization modules, and save the image in your personal folder. In your folder, you'll find the HTML code needed to insert your designs. Check it out - GRSites.

If you don't want to scroll through the first section and want to get right into the slightly more advanced section, click on the COLOR button below.

Solid Borders
Left Borders Only
Solid Backgrounds
Solid Background with Borders
Dashed Borders
Dotted Borders
Double Borders
Inset Borders
Groove Borders
Outset Borders
Ridge Borders
Rounded Border no Backbround
Rounded Border with Backbround

Three Images Side by Side

Text Box and Image Side by Side

Text Box and Image Rounded Corners

Border, Background, Text and Images (added 5/5/09)

Image Backgrounds, Hyperlink Buttons, and Logos

Text Boxes as Buttons

NEW 4/18/09 HTML Tab Menus

Guestbook

Solid Borders - HTML Examples

Following are html examples of borders in colors that match Squidoo's theme. You can modify these html examples on your own by changing the six digit color codes (a combination of numbers and/or letters) for the border and the font. (Too much of the same thing can get BORING!) Refer to an HTML color chart for other color codes. Two html examples of each border are presented, one with plain font and one italicized.

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Left Borders Only - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Solid Backgrounds - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Solid Background with Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Dashed Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Dotted Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Double Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Inset Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Groove Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Outset Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Ridge Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Rounded Border no Background

Rounded corners will not work in Internet Explorer browsers but this code will work in most others.

<p style="border: solid 10px #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

Rounded Border with Background

Rounded corners will not work in Internet Explorer browsers but this code will work in most others.

<p style="border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #ddddff; background: #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #ddddff; background: #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #005588; background: #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE

<p style="border: solid 10px #005588; background: #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE

Three Images Side by Side

I often put affiliate picture links side by side so I can get more items in a smaller space. I used this format a lot on my Modern Throw Pillows lens. To do this, you have to tell the module to put your images right next to each other by using the HTML "float" attribute. By telling each image to "float: left" they line up next to each other. Here are three images side by side.

To put them all together, you can insert "float: left" within the "img src" tag. The HTML code for three images of this size sitting side by side is:

Copy and paste this code. Your images need to be hosted somewhere else (like Photobucket). Include the URL link to each of your three images where noted. When you copy and paste the code, it might put spaces in your code that don't belong there. Delete the unnecessary blank spaces. If you have put a border around your module in which the images reside, it might be adding too much width to keep these images together. If that's the case and an image rolls to the next row, change the image width of one or more of the images by a few pixels in the code (where it says "width=#px") until they all fit.

But what if you want to put a link, caption, or text under each picture? Your going to make each image a separate box with it's own tag with room under the picture for your text. Looks like this:

html borders Time to join the new family. First day home!

html images Such a happy dog.

Um...what mud on my face?

The HTML code for three images of this size sitting side by side is:

<img src="URL to Image #1" border="0" float="left" width="188px" height="185px" alt="html borders" />Text for Image #1<img src="URL to Image #2" border="0" float="left" width="189px" height="185px" alt="html images" />Text for Image #2<img src="URL for Image #3" border="0" float="left" width="189px" height="185px" />Text for Image #3

Text Box and Image Side by Side

html backgrounds

Putting a bordered text box alongside a bordered image looks pretty sharp but gets a little tricky.

Read the directions below and then see the html code in the examples that follow.

If your image and text fit the exact dimensions of the boxes I have here, you'll be able to copy and paste the html example code, plug in the link to your own image and enter your own text for the text box. Images within text modules must be hosted somewhere else. I use Photobucket, which is free and provides you a direct link (url address) to each of your photos.

However, if you need a larger image, or more text space, you will have to "fiddle" with the dimensions (width and height) in the html examples code. Putting images alongside text where everything lines up this nicely looks great. Images or text boxes that don't match up can look sloppy. The HTML code is basically telling the text module how much space to allocate for each box. While you have a lot of height available to you in your text modules, you have only so much width. The code examples that follow are set for the width of Squidoo text modules. If you try to make one box wider without decreasing the width of the other box by the same amount, one box will try to wrap to the next paragraph and you'll have a broken box....not good.

However, leaving the text box big enough for text and adding another image to the bottom of that text can cause the pic to do something cool at the bottom of the box. See the intro module for my Contemporary Furnishings lens for an example.

I've highlighted the width/height combinations in the html code so you can see where they are. The highlighting will not copy into your own module. There are two width/height combinations for the image box - one for the box around the image and one for the image itself. I've made these the same size. The HTML border and padding settings will provide some definition between the box and the image anyway. The third width/height combination is for the text box. I've made it thinner than the image box so that you have more room for your picture. Notice I've made all the heights the same so the tops and bottoms of both boxes start and end in the same place for clean lines. You can play with the font size, border color, and background color for each box separately or keep them the same for a more visually clean appearance.

HTML Examples - Image to the left:

<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 230px; margin-bottom: 10px;">YOUR TEXT HERE

Trouble spot
HTML Examples - Image to the right:

YOUR TEXT HERE<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" />

Hold on tight....two rows of boxes staggered left/right:

<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 230px; margin-bottom: 10px;">YOUR TEXT HERE

YOUR TEXT HERE<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" />

Text Box and Image Rounded Corners

See instructions in the above module if you need help.

Image to the left:

<p style="float: left; border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 12px; width: 270px; height: 320px; margin-right: 10px; margin-bottom: 10px"><img src="http://YOUR IMAGE URL HERE" width="270px" height="320px" align="left" style="margin-right: 20px" /><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 320px; margin-bottom: 10px;">YOUR TEXT HERE

Image to the right:

And stacked:

html borders

<p style="float: left; border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 12px; width: 270px; height: 320px; margin-right: 10px; margin-bottom: 10px"><img src="http://YOUR IMAGE URL HERE" width="270px" height="320px" align="left" style="margin-right: 20px" /><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 320px; margin-bottom: 10px;">YOUR TEXT HERE

Border, Background, Text and Images Combined

I had a special request to include the code I use to wrap text around images. Images come in really handy when creating a lens. Let's say you have a long text module that you don't really want to break up into smaller pieces with different headings. Long lines of text get to be too much for web browsing but if you break that up with images, reading the text becomes more appealing. In the following, I've combined a border, a background, images, and text that wraps around images. The code follows the example.

html examples This is my Goldendoodle, Apollo, after he discovered the sprinkler system was overflowing near a hole in the side yard. Huh...I wonder how that happened? Now, he's at the patio door thinking he can come in. Guess again, Apollo. (Guess who got a bath after this? Yup. Both of us.)

We can continue to add more images and text wrapping around those images by just adding them anywhere, even in the middle of our sentences. We can also float the images either to the left or the right.

Here's Apollo again. All clean!

<img src="URL TO YOUR 1ST IMAGE" style="float:left; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; width: 200px; height: 200px" />YOUR TEXT HERE

<img src="URL TO YOUR 2ND IMAGE" style="float: right; padding: 15px; width: 200px; height: 200px" />
YOUR TEXT HERE

If you want to do just one image, copy just the first paragraph of code. If you want to do two images, as in my example, copy both paragraphs of code. Insert your own image links where noted and insert your text where noted.

My text in the example was written so that I had enough text to fill the side of each photo. Your code may act differently if your text is shorter or longer than the height of the photo. You can increase the border size by changing the digits where it says "border: solid 10px...". You can also change the border color by changing the six digit color code assigned to the border, change the font-size where it says "font-size: 18px" and change the line height where it says "line-height: 23px".

I've also fixed these images at 200px by 200px. You can change the width and height of each to a size that fits your image. The width of a text module is 600px.

Image Backgrounds, Hyperlink Buttons, and Logos

Give your topic a boost with a coordinated HTML background, border, or button. GRSites makes it very easy. Register for a free account, find a background image that matches your lens theme and start playing around.

Some tips for using GRSites:

It took me a bit to figure out how to stick an image in my personal folder. After you've created the image on the site, scroll to the bottom of the page and click on SEND IT next to the yellow folder icon or where it says to Put This Texture in Your GRSites Folder. You'll then be given the option to go to your folder.

Every now and then, an ad will pop up. It does not happen often enough to be annoying and you have the option to Skip This Ad. Since you're getting all this stuff for free, it's hard to care about the ad.

Be careful about what you delete from your folder. Remember, the code you enter into your lens is linking directly to your folder to present the image. If you delete it, you'll find a blank spot on your lens.

Keep scrolling for more examples.

Background Images

These backgrounds were created using GRSites. Maybe they're a little wild, but you get the idea - anything is possible.

Because these were created with my own account, copying and pasting is not as easy as with the simple HTML colors above. You will need to copy this code, put it in your module, and replace TWO items:

Copy your image's URL link shown in your folder (just the link, not all of the HTML code provided by GRSites) into the code below where it says http://YOUR IMAGE URL HERE

Insert your own text/content where it says YOUR STUFF HERE

This will provide you the pre-formatted border, margin, and text from my code. If you want to format your own, then simply copy and paste the code provided by GRSites into your module.

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

One of my favorites! Yes, that's water and yes it's moving. With rounded corners on the border, no less...You probably wouldn't want to do a whole lot of this one - I'm not sure what the load time might be like - but it sure does catch your attention.

<p style="border: solid 10px #87CEEB; padding: 15px; background-image: url(http://YOUR IMAGE URL HERE); 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE

Images As Borders

A little background goes a long way. How about just some pattern running down the side of your text? Go to GRSites and click on Background Textures in the top menu. Find a texture/pattern you like. After you click on the background, you'll find a two-column list of things you can do with that texture. On the bottom-left you should see an option to "Make Customized Borders". Walk through the step-by-step options, selecting the thickest border setting and a background of white. Save the custom border to your personal folder. While it appears to be a border, it's really a full image. Using the code below will indent your text enough to not print on the side border itself. I've used the thickest border (100px) available. Again, insert your image's URL in the code, insert your own text and VOILA!

<p style=" border: solid 10px #ddddff; background-image:url(http://YOUR IMAGE URL HERE); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR STUFF HERE

<p style="border: solid 10px #556b2f; background-image:url(http://YOUR IMAGE URL HERE); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR STUFF HERE

Buttons

Buttons can help you guide your visitor to one of your other lenses, your storefront, or your profile.

Use the GRSites button maker to create your own. Free accounts are allowed only a small amount of text on the button so keep it short or pony up. Design your button, enter your text, and enter your link's URL. Copy and paste the entire code provided right into your module.

Your code will look something like this:

If the button is too small, play with the "width" and "height" values in your module to change the size.

Beware! All of these buttons are linked to my other lenses so click at your own risk. (Sneaky of me, no?)

For my personal blog, visit:

Logos

Use the logo maker to come up with your own logo. Build your own brand name by putting it on all of your lenses. Easy as copying and pasting the HTML code from your personal folder into your lens.

Text Boxes as Buttons

A quick and simple way to redirect visitors

Use a text box to make your own button. You can use buttons to send visitors to your own website, blog, another lens, or to a resource page. I have a lens that I kept expanding until I eventually had to split the topic into three different lenses. To encourage visitors to see my new lenses, I replaced where those sections had been on the original lens with buttons like these.

Balloon Decoration Ideas

Here's the code:

And italicized:

Visit My Steak Page

Here's the code:

Give Credit Where Credit is Due

Thank you, GRSites!

If you use something from GRSites, you need to give them proper credit. Note somewhere on your lens that you used them for backgrounds, buttons or images and include a link to their site.

Most of this site was made possible because of them and I make no money from referring you to them. I just wanted to share a handy resource.

Great HTML Guides on Squidoo

You don't have to go far

Color Schemes For Your Web Pages

Having trouble figuring out what colors to use on your lenses and web pages? What colors go well together? How many people can actually see the colors that you see? And — most important — read the colors you've chosen? Here, I tell you a...

Make a Fancy Table of Contents

A clickable Table of Contents helps visitors navigate webpages. A table of contents also shows what's on a single webpage, which helps visitors decide whether your page is worth reading! A great table of contents within the first screen is a powe...

Basic HTML for Squidoo

Before you start reading all this, you may want to open Advanced HTML in a new tab, because you'll be wanting to check it out as soon as you've finished this! You can use basic HTML in a few of the lens modules. Mostly used to create hyperlinks (the...

Advanced HTML for Squidoo

The techniques shown here aren't much more advanced then what's in the Basic HTML tutorial. The code being used isn't any more special. But the results and presentation can appear to be more sophisticated. Hence it being the Advanced HTML tutorial. F...

Advanced HTML For Borders & Backgrounds On Squidoo

While looking at various Lenses, I noticed many Lensmasters were having the same problems I have getting the custom borders they make match up with their Lens photos. This is most noticeable when there aren't enough words in an Intro or Text module...

Beautiful Backgrounds for Websites

I was so excited when I came across this lens on Squidoo featuring one of the largest resource lists for free website backgrounds. Some feature incredible artwork as backgrounds or unique patterns designed by graphic artists. You could get lost in these examples for hours! Great fun.

Free Webpage Background Sites

If you want to create your own website at the same time having trouble in finding some nice pattern backgrounds for the pages, the following sites can be very useful for you. You should try these pre-made random designs. Please be patient if some...

Desert Pond

Sojourn's Blog

Just like this lens, I try to touch on a number of topics in my own blog, Desert Pond including how I juggle Squidoo with the rest of my life. Following are some of my recent posts:

Fetching RSS feed... please stand by

My Squidoo Lessons Learned Lenses

I'm relatively new. If you are, too, you've probably figured out there's a lot to learn and so much to read. I journaled my first few months on Squidoo and assembled some tips to help others. You can read these journals in the lenses below.

Sojourns Squidoo Journey

Shortly after I joined Squidoo (while I was still reading more than I was writing), I found a few lenses that detailed lensmasters' step-by-step activities as they worked towards some type of goal - monetary, number of visitors, the look of a lens la...

Study of a Lens

Part 2 in a series of lenses that discuss my trials, tribulations, and lessons learned as I became acquainted with Squidoo. I had so much to learn! My goal continues to be to find free tools that help me plan lenses in advance in order to attract tr...

Don't Miss This Resource!

Get your own brand going

Struggle to find the right image or logo for your lens? Started a niche and you'd like to use the same sort of image or branding on each lens in the niche? Or maybe you started a group and want badges and icons created that you can award to group members or contest winners. Squidoo members can have these created for FREE by our own fellow lensmaster, Janusz! Doesn't matter if you've been on Squidoo for years or just a few days. Here's the lens that displays his incredible work and tells you how to request your own images and logos.

FREE Logos for the Squidoo Community

FREE Squidoo Design Group There are more Logos displayed there & you can add your Lens .. I also display other peoples work :) So get on board. If you need a Logo, Avatar or pic for Lens... Get in contact :) * RequestBook below * I dont...

More HTML to Copy and Paste

As a member of team WiWon Wonder Squids, I created two lesson lenses on HTML. One lens covers HTML for Squidoo themes and the other provides HTML for Squidoo Co-Branded lenses.

AND - if you ever do recipes on your lenses, DO NOT MISS Macs lens on creating a recipe card format for your lenses using HTML tables. She gives you the HTML code to copy and paste - it's amazing!

She's done it again with a great set of step by step instructions for using GRSites to make those neat borders!

Recipe Cards Using Tables

This week our assignment for Rocket Moms was to make a Fall Recipe Lens. I decided to be creative with my design of it and went in search of recipe card template to use. I wanted to make a table in the shape of a recipe card. Understandably, it is...

GRSites Borders & Backgrounds

GRSites takes the hard part out of designing your website and makes it easier. I am going to focus on their backgrounds and borders, but they offer a variety of free online tools that will make your job easier - including Text Boxes, Text Logos, But...

HTML for Squidoo Cobranded Lenses

Welcome! This is the 2nd half of the WiWon School of Wonders HTML Lesson Plan. In the first session, we learned about HTML codes and colors that work with the various Squidoo themes. This time, we're going to cover Squidoo's Co-Branded lens templa...

HTML for Squidoo Themes

Welcome! You are writers, marketers, researchers and artists. Words are your medium and the web is your canvas. There's a lot to learn about building quality lenses that attract visitors, whether it be to share information or sell a product. Squidoo...

Looking for Help with SEO?

Tips from Lensmasters

Need help with SEO? Fellow lensmaster, JeffWend, blogs about SEO on his self-titled blog, Jeff Wendland, and offers his professional services to businesses and website owners who need help with their SEO strategies.

One post with SEO tips from Squidoo lensmasters is a helpful summary of the easiest and most effective things you can do to boost your rankings in the search engines. Visit the post at: SEO Tips from Squidoo Lensmasters.

By the way, Jeff has a mind-boggling 550 lenses of his own. Want to learn how to become a success on Squidoo? Study the lenses of those who have paved the way - like Jeff.

Let Me Know....

Think you'd use any of these HTML borders and backgrounds information on your own lens? Leave any comments, ideas, or requests for additional information right here!

Don't miss GrowWear's new lens on a a free Color Schemes tool that helps you pick the best complementary colors for your lenses!

Also, I tried something new, a study of my start on Squidoo and some basic tips I learned along the way.

submit

Reply

ShirlW ShirlW Feb 9, 2010 @ 7:11 am

Just stopping by again to "borrow" another border....Thanks!

Reply

Johnny_Rock Johnny_Rock Feb 1, 2010 @ 3:52 pm

Awesome resource, especially for a newbie like me. Thanks a million!

Reply

JaredB JaredB Jan 31, 2010 @ 7:26 pm

Thanks for the simple resource for somebody just starting out with this stuff!

Reply

Pastiche Pastiche Jan 30, 2010 @ 12:51 pm

Excellent HTML resource for border and background tweaks on Squidoo. This lens is now featured under HTML How-to for Squidoo at Squidoo Tech Stew - "Recipes" for Successful Lenses (http://www.squidoo.com/squidoo-marketing-design)

Reply

M_S_Beltran M_S_Beltran Jan 28, 2010 @ 8:26 pm

Thank for the great info! I'm not very computer literate but very artistic, so the C&P html is very much appreciated.
Load More

Show All

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

Love This Lens?

Sojourn's Bio

I'm a wife and working mother with three growing boys at home. I escape to Squidoo and my personal blog, Desert Pond, because it's rough being the only female in the house - although I wouldn't have it any other way.

Lensmaster Sojourn has been a member since February 22 2009, has rated 827 lenses, favorited 287, and has created 117 lenses from scratch. This member's top-ranked page is "Lightning McQueen Games". See all my lenses

My Bio

Me? I'm just a busy mom with a hectic, full-time job who often procrastinates on her other home responsibilities by spending countless hours on the web or with my nose in a really, good book.

Modern Throw Pillows

Reverse Phone Lookup

Reverse Lookup for Cell Phone Numbers

Squidoo

HTML Borders Backgrounds

HTML Examples, Backgrounds and Borders to Copy and Paste

Contents at a Glance

Contents at a Glance

Table of Contents

Solid Borders - HTML Examples

Left Borders Only - HTML Examples

Solid Backgrounds - HTML Examples

Solid Background with Borders

Dashed Borders - HTML Examples

Dotted Borders - HTML Examples

Double Borders - HTML Examples

Inset Borders - HTML Examples

Groove Borders

Outset Borders

Ridge Borders

Rounded Border no Background

Rounded Border with Background

Three Images Side by Side

Text Box and Image Side by Side

Text Box and Image Rounded Corners

Border, Background, Text and Images Combined

Image Backgrounds, Hyperlink Buttons, and Logos

Background Images

Images As Borders

Buttons

Logos

Text Boxes as Buttons

A quick and simple way to redirect visitors

Give Credit Where Credit is Due

Thank you, GRSites!

Great HTML Guides on Squidoo

You don't have to go far

Beautiful Backgrounds for Websites

Desert Pond

Sojourn's Blog

My Squidoo Lessons Learned Lenses

Don't Miss This Resource!

Get your own brand going

More HTML to Copy and Paste

Looking for Help with SEO?

Tips from Lensmasters

Let Me Know....

Love This Lens?

Sojourn's Bio

My Bio

by Sojourn

Explore related pages

Related Topics

Sojourn Recommends...

Gold Star

Sojourn is in the Giant Squid 100 club

Sojourn is a Giant Squid

About Sojourn

Sojourn's Pages

About Squidoo

Help & Feedback

Support Charity

Fancy meeting you here.

Loading Workshop

Report this Lens

Login

Join Squidoo for free!