HTML for Squidoo Themes

Browse the whole page your first time through. If you come back to this lens as a resource, feel free to click on an item in this list and jump to that section. Use the TOP button found throughout to get back to this table of contents.

What is HTML?
Basic HTML Commands
How to Choose a Theme
Default Theme
Default with Divider
Gone Camping
Purple People Eater
Easy Street
Moment of Zen
Paintball
Highlighter
The Professor

HTML stands for HyperText Markup Language. It's the programming language that tells browsers how to display the contents of a web page. A lot of that programming has already been done in the form of the modules and Squidoo templates but inside each module you can add additional HTML to make your text look like so much more than words splattered across a boring, white background.

Oh, there are times when a plain background is absolutely the best display for your information. Your choices of theme and color should be tied to the topic of your lens so a lens of a serious nature - for instance, current affairs regarding nuclear weapons - should probably not use the Purple People Eater theme nor should it have smiley faces or cute, flowery borders.

We're going to walk through how to use HTML, what types of HTML formatting works best with which themes, tools for finding colors, borders, and backgrounds for your lenses and, best of all, we'll give you some HTML you can simply copy and paste to get you going.

First, let me show the difference between formatted text and unformatted text in a module. See below.

FORMATTED TEXT:
See how the right side of the unformatted text wanders all over the place? Magazines and newspapers align their text so it's even on both the left and right hand side. The font is slightly different and, in some themes, the font is smaller and the line height is much too small. There's also no structure to the unformatted text, whereas the formatted text has a nice box around it to keep your reader's eyes as firmly on your material as possible.

It makes a difference, right?

I know, when you're creating a lens or bookmarking it somewhere, you're asked for "tags", keywords that describe the contents of your lens. HTML uses the word tag, too, but here it means a tag describing the type of text you're formatting.

Most often, you'd be using the paragraph tag, or <p style=".

To write HTML, you have to:

1. Tell the browser you're starting some HTML code.

2. Describe the attributes you want applied to the text or images in that piece of code.

3. Tell the browser you're ending the HTML code.

4. Get all of the semi-colons and colons in the right place.

Your opening code gets sandwiched between a pair of Less Than (<) and Greater Than (>) signs and a pair of quotes. This is followed by your content. Then you close the whole package up with a close tag (</p>) that matches your opening tag. The close tag is also sandwiched between a Less Than and Greater Than sign.

Attributes are used to define everything about how that content should look such as line height, font size, font color, text alignment, text indentation, space between the text and any border, whether or not there is a border, background color...well, hopefully you get the point.

(In fact, there are so many ways to format the text, it would take more time and knowledge than I have to cover them all. I'm going to cover the basics and I'll give you links at the end of this lens about where you can go to learn more advanced HTML.)

The format of an attribute is attribute: value.

See that colon in there? Don't miss that or your code won't work and you'll be looking letter by letter to figure out why. :)

Let's look at some basic content attributes we can control:

I've decided that I want these things in my text module -

Lines that are 20 pixels (screen measurement) high = line-height: 20px

Font to be 15 pixels high = font-size: 15px

Padding between the border to be 15 pixels on all sides = padding: 15px

Text to be nice and even on both sides = text-align: justify

Border to be solid, 3 pixels wide and in blue = border: solid 3px blue

Separate attributes by semi-colons and put them in between your opening and closing tags. The final code would look like this:

<p style="line-height: 20px; font-size: 15px; padding: 15px; text-align: justify; border: solid 3px blue">My content goes in here.</p>

That bit of code goes right into the body of your text module like so:

When you first create a lens, the Default theme is automatically applied. You can select one of a number of new themes that Squidoo produced for lensmasters in June 2009. These themes are only available to lenses that are set on Max settings. If you've chosen to remove banners and ads from your lens (in the My Workshop area when editing a lens), then you will not have the ability to use the new themes on that lens.

To change the theme for a specific lens, go in to your lens Workshop for that specific lens:

1. Click on the Themes drop down menu on the top, right of your Workshop.
2. Select the radio button for the theme you'd like to use.
3. Click on Apply to attach that theme to the lens.
4. Click Save Draft.

Publish the lens when you're ready.

Note: While in My Workshop, you can also select a theme to be applied globally to all lenses.

Top Border: Blue
Sidebars: Blue
Background: White
Titles: Blue
Subtitles: Black
Hyperlinks: Blue
Right Side Divider: No

The Default module has a blue background and no divider running down the right side of your text. As the right margin becomes white the further you scroll down, you lose any border to keep your visitor's eyes on your material. I think big pockets of white space can be a distraction to your readers.

Bright themes work well with topics that are fun, creative, artistic.

Coordinating colors that work well with the Default theme are various shades of: Orange, Blue, Yellow, and very light Browns.

Tip: Use an intro image with similar shades as the theme to keep a continuous flow of similar colors.

Following are HTML examples of borders and colors that match the Default theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #f60">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #ddddff">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FDE38C">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069; background: #ddddff">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #f60; background: #FDE38C">Your text here</p>

Top Border: Blue
Sidebars: Blue
Background: White
Titles: Blue
Subtitles: Black
Hyperlinks: Blue
Right Side Divider: Yes

The Default with Divider theme has a built in border running down the right hand side of the lens so you can get away without creating your own border in HTML.

The same colors and tips that work for Default also work with Default with Divider.

Following are HTML examples of borders and colors that match the Default with Divider theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #f60">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #ddddff">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FDE38C">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069; background: #ddddff">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #f60; background: #FDE38C">Your text here</p>

Top Border: Green
Sidebars: Green
Background: White
Titles: Green
Subtitles: Black
Hyperlinks: Orange
Right Side Divider: No

Gone Camping has a green background, green titles and black subtitles. Hyperlinks are orange when lit. There is no border on the right hand side (leaving that open white space I mentioned earlier.)

This is a great theme for topics about gardening, the outdoors, play, games, going green, and kids' items.

Coordinating colors that work well with the Gone Camping theme are various shades of: Brown, Teal, Pale Yellows, and Pinks.

Following are HTML examples of borders and colors that match the Gone Camping theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #3A9440">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #37557C">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #7CA2D2">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FD6763">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #BF9D75; background: #F8FDCD">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #0C8014; background: #EDFA8A">Your text here</p>

Top Border: Purple
Sidebars: White (only the top is purple)
Background: White
Titles: Purple
Subtitles: Black
Hyperlinks: Purple
Right Side Divider: No

I love the name Purple People Eater. Yes, it's a purple background and the background has a repeating pattern within. Titles are purple, subtitles are black and hyperlinks are purple. The side borders are all white so really watch out for lots of white space on the sides of your lens. Borders in HTML come in handy here.

This is a great theme for topics about flowers, arts and crafts, play, games, fabric arts, humor, about me lenses, and kid's items.

Coordinating colors that work well with the Purple People Eater theme are various shades of: Blue, Pinks, Olive Greens, and Pale Yellows.

Following are HTML examples of borders and colors that match the Purple People Eater theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #7C1E67">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #E3BEE9">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FFBFBD">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #C8C5EC">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #7C1E67; background: #F8FDCD">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #7C1E67; background: #FFDBDA">Your text here</p>

Top Border: Black
Sidebars: Black
Background: White
Titles: Black
Subtitles: Black
Hyperlinks: Black
Right Side Divider: No

Easy Street - black and I love it! Black titles, black subtitles, and black hyperlinks. There is no border on the right side - white space issues beware!

You can blend shades of almost any color with this theme - in moderation. Because of all that black, a lens could get dark very quickly. It could also go neon on you if you use bright, vibrant contrasting colors like lime green or yellow. Soft shades will keep it a little more upscale, in my opinion, and bright shades should be reserved for fun topics. Of course, this is one theme that works really well for almost any theme but really well suited to music, Halloween, and cars.

Almost any color - in the right shade - works well with the Easy Street theme. Of course, I have a thing for combinations of red, black and white.

Following are HTML examples of borders and colors that match the Easy Street theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px red">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px yellow">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #B0AEC8">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black; background: #BFBFB8">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #9C9CA1; background: #F5E9EB">Your text here</p>

Top Border: Light Gray
Sidebars: Light Gray
Background: White
Titles: Black
Subtitles: Dark Gray
Hyperlinks: Orange
Right Side Divider: Yes

This was easily my first favorite of the new themes. It's great for making your pictures pop. I used it for a lens on bonsai trees (I mean, with a name like Moment of Zen, what else would I use with bonsai trees?) The background is the barest shade of gray and this theme does have a border running down the right side so if you want as much light background as possible, you can easily go without a border.

This is a great theme for home decor lenses, interior design, photo topics, serious topics, and any lens where the products themselves are brightly colored and have visual appeal. All shades of blue work well with this theme as do deep raspberry colors, pale yellows, and other shades of gray.

Following are HTML examples of borders and colors that match the Moment of Zen theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #9D9AA0">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px yellow">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #A04C5E">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069; background: #E5E6EB">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px yellow; background: #FFFDC2">Your text here</p>

Top Border: Blue
Sidebars: Blue, fading to white quickly
Background: White
Titles: Raspberry
Subtitles: Black
Hyperlinks: Raspberry
Right Side Divider: No

I laugh every time I see this theme name. My son plays Paintball. His splatters never looked quite this elegant! The background is blue with an impression of blue splotches at the top and the bottom.

Titles are a deep raspberry so you're options are limited unless you're working with an unusual topic - like banana-raspberry-blueberry floats, or something. Subtitles are black and hyperlinks are also raspberry.

Nice coordinating colors would be more shades of Blue or Pink, Gray, and Pale Greens.

There is no border on the right side and the sides go white very quickly leaving a ton of open white space on each side. I highly recommend borders on this theme.

Lens topics that work well with this theme follow the suggestions for Default and Default with Divider.

Following are HTML examples of borders and colors that match the Paintball theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #924481">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #ddddff">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #B1AEB1">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069; background: #ddddff">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #924481; background: #F5F2F6">Your text here</p>

Top Border: Black
Sidebars: Black (left), Light Gray (right)
Background: White
Titles: Black with Yellow Highlight
Subtitles: Black
Hyperlinks: Black with Yellow Highlight
Right Side Divider: Yes

The black background and black titles highlighted in a soft yellow do a great job of keeping sections separated on the Highlighter theme. The subtitles are a deep gray and hyperlinks are also highlighted in the same shade of yellow as the titles.

There is no border on the right hand side.

Nice coordinating colors would be more shades of Yellow, pale Blues, pale Greens, soft Orange, and Brown tones.

This lens is well suited towards serious or instructional lens topics, home decor, and how-to lenses.

Following are HTML examples of borders and colors that match the Highlighter theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FFEE64">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FFD26B">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #644F87">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #96B361">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069; background: #E5E6EB">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FFEE64; background: #FFF9DB">Your text here</p>

Top Border: Black
Sidebars: White
Background: White
Titles: Orange
Subtitles: Black
Hyperlinks: Orange
Right Side Divider: No

Like the Professor from Gulligan's Island, this is a great theme for serious topics and how-to lenses. Titles are orange, subtitles are black and hyperlinks are also orange.

There is no border on the right hand side.

Nice coordinating colors would be shades of Yellow, Orange (especially for Halloween), Blues and Reds (for the right topic), and Greens.

This lens is well suited towards serious or instructional lens topics, home decor, and how-to lenses. The bright, white background does a great job showcasing images, too.

Following are HTML examples of borders and colors that match the Professor theme for you to copy and paste into your own modules:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #192294">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #6E7A77">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #FFBB00">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069; background: #E5E6EB">Your text here</p>

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px #069; background: #FFF9DB">Your text here</p>

I pulled some formatting tricks in this lens that won't be covered here, but it is important to know a few things about additional formatting you can do with text to make key points stand out for the reader. Remember, your visitor is likely only browsing your text. They're most likely not going to read every word. So, if you say:

Big sale on Friday!

They might miss it. But if you say:

Big Sale on Friday!

You might get some attention.

Additional formatting:

Bold = <b>Text to be bolded</b>

Underline = <u>Text to be underlined</u>

Italicize = <i>Text to be italicized&lt/i>

Highlight = <b style="background: yellow">Text to be higlighted</b>
(Note: B style is the bold tag with extra information so this will both bold and highlight text)

You can mix and match any of the above to make your text stand out. Just make sure you open and close the tags in order. All together it looks like this:

<b style="background: yellow"><u><i>Text to be formatted</i></u></b>

This does not go inside your <p style=" tag. It goes anywhere in your text that you need to apply the formatting. For example:

I'm typing along about something really important and I want to highlight and underline the word "important", the entire text - including my original formatting in the text module, would like this:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify">I'm typing along about something really <b style="background: yellow"><u>important</u></b> and I want to highlight and underline the word "important", the entire text - including my original formatting in the text module, would like this:</p>

Did you notice something in the suggestions for borders and backgrounds I used under each theme?

I had multiple border and background combinations in each text module.

You can have multiple <p="..."> HTML codes in a single text module. That gives you another way to highlight certain points or facts.

I'll provide answers to the plexo questions above in this box. See the following for answers to the current list of questions.

Question: How do you add the wall paper border on the left of the text box?

Answer: The step by step directions for using an image as a border can be found here on my HTML Borders and Backgrounds lens. It includes information on where to get free background images and the tool to make those images into borders like you see above.

Question: How do I change the main background color of my lens?

Answer: If you mean the side border at the far left and right hand side of the page, then you can only change these through the use of different themes as described in the body of this lens. If, however, you mean how do you change the background color for the content of your modules, you need to include a background attribute in your HTML code. This is written as:

background: #hexidecimal color code

For example, let's say you want a nice sunny yellow background using hexidecimal color #FFF673. Using one of the HTML examples from up above, the complete code would look like this:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black; background: #FFF673">Your text here</p>

And the finished product would look like this:

Now, I have a black border and a sunny, yellow background filling my text space.

Question: How do you use a border in a text/write module with an uploaded image?

Answer: If you uploaded an image using the text module's image uploader, the codes above will work to provide a border around the entire text module, including the image - although sometimes the border thins out around the top and side of the image.

If you are linking to your own image within the text module, the border will still wrap around your entire module, including the image, if you include the image details inside of your HTML code. The code would look like this:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here...<img src="Image URL"></p>

Getting a bit trickier, let's say you want a separate border around an image you are linking to in your text module - a different border than you have around the text module itself. An image can have its own style description by including HTML attributes inside the <img src=.....> code like this:

<p style="padding: 15px; line-height: 20px; font-size: 15px; text-align: justify; border: solid 3px black">Your text here...<img src="Image URL" style="border: #FFF673"></p>