Free Online HTML And Style Display

Page defunct: Squidoo is no more so the free formatting utility is no longer relevant. I'm glad people benefited for a while and hope that your future endeavours are fun and profitable.

Seen lenses with fancy backgrounds and colourful borders?

Wondered how to do it and been a bit intimidated? Worried you'll mess up your lens? Just finding it a bit tedious to tweak styles in the Workshop?

Here's a helping hand ...

Most lenses can be improved with a pinch of HTML and a dash of CSS, Unfortunately it can be trial and error to get the display perfect in size and shape and colours. Should I tweak this colour, try a thicker border, what's padding going to do?

Trying all this while creating a lens is a bit of a fiddle; you have to save a module and examine it, then go back to editing. To help speed things up and make changes easy I've created a simple, free online tool for playing with text module look and feel.

Cut and paste into a form, click the button and instant display.

Play with the style, add more or take away a bit, click again and see what you're getting.

Cut and paste from form to lens Workshop - done!

The utility lives at Squid Show. The link is also on the module pics below.

Location will change so bookmark this lens, not the site, if you're going to use it again.

If anyone's wondering about the main site, it's my sister's - my thanks to her for paying for the bandwidth.

You can vary the title, image, text and theme, then view them on screen.

Do remember the points below though:

The display uses Squidoo's stylesheets so is as close as it can reasonably get to what your text module will look like on a lens.

Squidoo downsizes images that are too big -- I don't.

You'll also see that the display incorporates elements of your selected theme - a quick way to look at the options available and judge what will work for you.

As you can see on the image above, the form has four fields:

Module title try titles, for length and appearance

Module image try different images - they can live on any webserver bui remember to upload eventually to Squidoo

Lens theme easy way to see how theme changes display

Textarea write HTML and CSS here, watch the display change when you click the top button. Easy to make small changes and redisplay. When you're happy, cut and paste from here to your lens module

This is included so that you can see some of the effects of changing theme, especially heading colour and link colour.

Not all themes are available to all levels, so check the list in your Workshop in case of disappointment.

Note that the sample link is to my blog: this is a slowly growing set of book and author reviews, PaulOnBooks, with a few book-related rants thrown in. Highly recommended by, well, me. Pay a visit and leave me a comment.

A few things to watch for:

Squidoo strips out HTML that would interfere with its operations and display - Squid Show doesn't. Follow examples in existing lenses and you'll be okay. Don't use divs, headings and iframes. Don't add javascript.

i don't count characters - shouldn't matter anyway - Squidoo is generous on the upper limit.

I don't resize pics so make sure you're trying one that will be okay when uploaded to Squidoo.

Credit to W3Schools who gave me the idea.

Boxed text is easy to achieve; once you've done one you can vary it to change all sorts of subtle attributes.

Boxed text is easy to achieve; once you've done one you can vary it to change all sorts of subtle attributes.

Cut and paste the white text in the box above into Squid Show in a separate window so you can refer to it and play with it as we go through the points below.

• span: a container tag, used to enclose the chunk we want to style in a prticular way. Note the at the end of the HTML
• style=: as you can guess from the name, this lets the browser know that style attributes are coming up
• the attribute list: must be completely enclosed in quotation marks
• the attribute list: contains x:y; patterns - attribute name, colon, attribute value, followed by a semi colon
• float:left This is a directive to the browser to position relative to other elements nearby on the page. I have left on this as I use it next to the text module image. Change left to right and see what happens. Delete the whole float:left; and you may be surprised!
• width: 60% I said this whole thing was a container - well, Squidoo has it enclosed in another container - this bit tells the browser to use 60% of the width of the Squidoo container. Why 60%? To allow for the module image.
• background-color: rgb(239, 239, 255); One way of giving a background colour - I'll say a bit more about colours later, but play with the numbers now and see what happens
• margin-right: 5px; Margin is the gap between this container and its surroundings. I want a little gap between the text and the image so I force it with 5 pixels
• padding: 5px; Padding is the gap between the text in the container and the edges of the container. I'm forcing a small gap all round.
• border: 2px solid rgb(0, 0, 170); Multiple values for one attribute border. In order, thin, unbroken and blue.

Colours are expressed as combinations of red, green and blue. Known as RGB, pronounced Ah-Gee-Bee. You'll usually see values expressed in the format #123456. The hash symbol tells the browser that it's getting hexadecimal values. If you're a geek like me you'll already know about hex numbers, if you're not a geek all you need to know is that instead of going from 0-9 hex digits go 0 1 2 3 4 5 6 7 8 9 A B C D E F.

Back to RGB: Consider #aa900f This tells the browser to mix Red at aa with Green at 90 and Blue at 0f. - to give us this colour (an ugly mustard).

To get black we remove colour, so #000000 gives     . You should be able to guess now what gives us white ...

Just to brighten this lens up a bit, let's have some colours. The first line shows variation in red, from 11 to ff (so #110000 to #ff0000). Next two do the same for green and blue, the final band shows #111111 to #ffffff

11--22--33--44--55--66--77--88--99--aa--bb--cc--dd--ee--ff--

-11--22--33--44--55--66--77--88--99--aa--bb--cc--dd--ee--ff-

--11--22--33--44--55--66-=77--88--99--aa--bb--cc--dd--ee--ff

   1   2   3   4   5   6   7   8   9   a   b   c   d   e   f

Do you need to remember any colour combinations? Well, there are sixteen million combinations so I'd say don't even try. Lenses listed below will tell you what colour Squidoo uses for various page elements in different themes if you want to blend in.

A great, simple tool to view colours and shades is available online at W3schools HTML Color Picker.

A trick someone has just asked about: can I do a two column list? Yes, quite easily:

• aaaa
• bbbbbbb
• cccccccc
• dddddddd
• eeeeeeeee
• ffffffffff
• ggggggggg