How to Make Text Boxes and Borders on your Squidoo Lens

Ranked #1,985 in Squidoo Community, #170,512 overall

Learn how to push Your Lens up the Squidoo rankings to Increase your Popularity and Earnings.

Squidoo is pretty cool! Each lens is a single page on a giant website, the Squidoo.com domain.
Squidoo.com ranks high on search engines because of the number and quality of those pages or lenses. Of course, like any website, each page (lens) is ranked individually according to merit.

Naturally, the best lenses are those whose content and design attract, interest and engage the most visitors, ie., they are the most popular lenses.

Squidoo's basic modules are just that; basic. Fully adequate for the purpose, which is to enable almost anyone who can use a computer keyboard to set up their own web page, but still basic enough to be simple to use.

As lensmasters (web page designers) gain experience, they may wish to add personal touches and enhancements to their work. Putting simple boxes around certain sections of text, serves to catch the visitor's eye and draw them towards items the lensmaster thinks are special and will hold the visitor's interest.

Putting boxes around important pieces of text is only one of many ways of enhancing your lens. But it is a very versatile process and reasonably simple to learn.

My aim here is to show you the easiest way to set up a text box, or border, give you some HTML code you can copy and paste into your own text modules, and show you how to tweak the code to vary the box to suit your own individual requirements.

Good Luck!



Updated 15th March 2012

First Things First

About Boxes and Borders – Can I have different styles, colours, backgrounds, etc?

Of course you can!

You can have any colour you want for your box border!
You can set the thickness from really thick down to invisible!
You can put your box almost anywhere you like within a Text Module.
You can give it a coloured, or even a patterned background or leave it clear.
And finally you can choose from a variety of designs of border.

If that ain’t flexible, I don’t know what is!



Lesson One - Make Your First Box.

Just COPY and PASTE the code when I tell you.

Suppose you are creating some new content in a standard Squidoo Text Module and there is a particular passage you want to draw attention to.

Say this is the text you want to highlight. It may be some special instructions to the reader. Possibly it’s an important message or an interesting quotation, not part of, but relevant to, the surrounding text.


For this box I have used the CSS style attribute in a single HTML element. Ok!Ok! Don’t switch off yet, it’s really quite simple!

In the Squidoo Text Module I typed my text into a paragraph between <p> and </p>

I set the style within the opening <p> and specified a “solid red border 2 pixels thick” to appear all around whatever text I type in. The resulting box will expand to accommodate the text, however many lines I type.

I also specified 5 pixels of padding all round the text to separate it from the box border.

NOTE: At this stage it might be an idea to Bookmark this lens so you can return to it while practising on your own lens.

Now! Here’s the code:-

<p style="border: solid 2px red; padding: 5px;">Type YOUR TEXT here.</p>


SYNTAX: Note the punctuation … border is followed by a colon … the parameters have a space between them, if more than one, and are followed by a semi-colon. The whole style specification is enclosed in double quotation marks.

Simply COPY and PASTE the line into your own lens in a Text Module in the area where it says “Enter your text below”.

This is how it should look when you save the module.

Type YOUR TEXT here



Now in Edit carefully replace “Type YOUR TEXT here” with your own wording.
Warning, DO NOT change any punctuation within the <p> brackets. Just one missing colon, semi-colon, or quotation mark may cause the whole string to malfunction!

Go to the next section to see
what else you can do with your Box.



Earn Money from Writing about what you know.
Publish your Interests on Squidoo! Join for FREE!
Click Here: www.squidoo.com/learnmore

Lesson Two - Try Changing your Border.

How to change the colour, thickness or design of the line.

I’ve shown you how to make a simple box border. Now you can experiment.

In the code I gave you in the last section, border is defined thus:

style="border: solid 2px red;"

The parameters are:
solid — with the alternatives of dotted, dashed, double, groove, inset, outset, ridge and hidden. (see examples in the next section: Box/Border Designs)
2px — which denotes 2 pixels thick and can be changed to any suitable number. 0px would result in a hidden border.
red — the line colour, which can be simply defined as any of the standard HTML colours (blue, green, black etc.) or by inserting a hexadecimal code eg., “#2C60C7″ (see examples)

Tweak the code to see what suits the style of your own lens. Be bold, tweak, save, and re-edit until you come up with a box border you are happy with. Play around as much as you want until you are ready to publish. Squidoo is very forgiving.

Box/Border Designs.

Standard Alternatives acceptable on Squidoo.

border: solid 2px

border: dotted 3px





border: dashed 4px

border: double 6px





border: groove 10px

border: ridge 10px





border: inset 10px

border: outset 10px





border: solid 1px

border: hidden 0px





My Advice: Don’t go mad with Borders! Sometimes less is more. They can become distracting. Decide which type, colour and thickness of box border best suits your particular lens content and mainly stick with it. Not only that, but once you have set the code for one box you can copy and paste it elsewhere in your lens, and indeed to any other lens. Saves a lot of typing if you copy and paste a wodge of code to another lens and simply change a couple of parameters to make the box look completely different.

Add a Bit More Colour to your Lens

This BOX looks
a bit like a
Doctor’s
Brass Plate


Fill your Box with a Tasteful Background

Let’s face it black/gray text on a white background can some times look a tad boring! But, you can brighten up your lens with some colourful backgrounds. These can be a plain colour, or a pattern generated from a small sample, or even a complete whole picture, such as a photograph. Alright, let’s not run before we can walk. Let’s stick to plain colours for the moment.

Here’s
another
Box … Let’s add a pale yellow background.



Here’s the code:

<p style="border: double 6px green; padding: 10px; background-color: #FFFFAA;">Your Text Here</p>


Here’s
our Box
Now … A bit more interesting.



Notice I’ve added:

… background-color: #FFFFAA; …


#FFFFAA is the Hexadecimal code for the colour I chose. (see some examples here)

Again, you can COPY and PASTE the code to your own lens and play around with the parameters. Have fun!

A Textured Background can also Look Good

Oooh! I like
that wallpaper!
It would look
good in the
nursery!



… but don’t overdo it!






As long as it doesn’t overpower the text, a subtle patterned background can enhance your Text Boxes.
It’s a bit more complicated, and you need to find a snippet of the pattern you want to use, in the form of say a .JPEG file, and a means of hosting it. I’m lucky I have my own separate websites I can use for this. If you can’t use your own, there are sites which will host pictures for you. Look for a free one like FreePictureHosting.com



Parchment background Now I have chosen to use this small snippet of “parchment” for my box background. It’s a .JPEG file, parchment.jpg, and it is only about 50px square. I have uploaded it to my hosting website. I will now set up a text box with this pattern as a background. The pattern will automatically be tiled over the box to whatever size it grows as I type in my text content.

So, here’s the box:

As I start to type in my text content I begin to wonder if it might look better in bold type, which might make it easier to read …

Yes, by enclosing my text between <b> and </b> as I Edit, I think it looks better … But, what do YOU think?



Now here’s the code:

<p style="border: solid 5px brown; padding: 15px; background-image: url(YOUR IMAGE URL HERE);">Type Your Text Here</p>


Notice I’ve added:

… background-image: url(YOUR IMAGE URL HERE); …


COPY and PASTE the line into your Edit Text area and insert the full URL of your hosted image in the form:

http://www.domain.com/yourimage.jpg

Once again, when editing HTML code, be very careful not to disrupt the syntax.

Go on, have a go yourself! And, Good Luck!



Was This Guide Helpful?

Please give it a thumbs up and add any comments or suggestions on the Guestbook below. Thanks for coming.

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 »

Did You Find these TIPS Helpful?

Any criticisms or suggestions? Please share them here.
  • Follow
    Share to:
    Alert message
  • PolyScholar Feb 09, 2013 @ 7:49 am
    This is an excellent lens! I've started adding borders and even a bit of background color to my lenses, in moderation of course! Thank you so much for sharing your knowledge.
  • LaPikas Jan 26, 2013 @ 2:36 am
    Very Useful !! Thanks for the tips, for sure I will use them when creating my next lens.
  • ocoyorg Dec 07, 2012 @ 1:21 pm
    It's great to know we can use inline css on Squidoo. Am I correct in assuming the full range of css attributes is available, including floats? In otherwords, I could create a fully unique design within a text module including non-default fonts, font sizes, images, etc?
  • BobBlackUK Dec 08, 2012 @ 11:39 am
    Thanks for the comment. If you know HTML you can do pretty much as you please.
  • Dec 05, 2012 @ 9:28 am
    Very useful. Thanks
  • cjbmeb14 Nov 26, 2012 @ 5:29 am
    This is really a great guide and I have just added some borders to my lens. I copied the codes like you suggested here and my lens looks great now.
    Thanks.
  • LittleLindaPinda Aug 30, 2012 @ 11:01 am
    You explain it so clearly. Thank you so much.
  • rawwildcrafter Jul 31, 2012 @ 9:18 pm
    Love these helpful easy to understand tips. Thanks! You explained things so well.
  • seiboimisao Jul 16, 2012 @ 3:23 am
    great..helpful
  • WriterlyChick Jun 16, 2012 @ 2:30 am
    Thanks for the easy to follow and extremely helpful tips!
  • themeaparty Jun 08, 2012 @ 5:43 pm
    Great tips, but I'd also like to know how to make those nifty round borders and backgrounds, such as what you have in the "Earn Money from Writing about what you know." paragraph. Thanks!
  • themeaparty Jun 08, 2012 @ 6:01 pm
    Just figured it out - the Black Box module. Very cool
  • ForestBear Jun 07, 2012 @ 12:46 am
    Nice tips, thank you for sharing
  • athomemomblog Apr 28, 2012 @ 9:09 am
    Very helpful, thanks! I needed to do a quick text box that would jump out on the lens and you made it nice and easy. :)
  • laurenrich Apr 03, 2012 @ 10:57 pm
    I found this information very helpful, but I will need o study it to work with it. Thanks for the information.

See all comments