ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • HubPages Tutorials and Community

Free Online HTML And Style Display

Updated on November 4, 2014

Previewing Text Modules

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!

So Where Is It?

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.


Squid Show section 1: display area

Squid Show: main display area
Squid Show: main display area
Squid Show main display
Squid Show main display

The Main Display Area

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.

Squid Show section 2: form

Squid Show: form
Squid Show: form
squid show
squid show

The Form

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

Squid Show section 3: the right hand side

Squid Show section 3: the right hand side display
Squid Show section 3: the right hand side display
Squid Show: right hand side
Squid Show: right hand side

The Bit On The Right

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.

The Small Print

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.

How Do I Do Those Boxes?

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.

A Bit About Colours

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 ...

A Bit More About Colours

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.

Two Column Bulleted List

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

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

Design Books

Web Design All-in-One For Dummies
Web Design All-in-One For Dummies

Basics to advanced in the hugely successful Dummies series. I love these books

 
Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics
Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics

Taking a step up, getting a bit more serious about presentation

 

What do you think? Any issues/suggestions? - And can you recommend other styling lenses?

    0 of 8192 characters used
    Post Comment

    • profile image

      markwilson123 4 years ago

      Many websites offering free online designing tools and software.

      Web Development Nyc

    • profile image

      anonymous 4 years ago

      Glad I found you today. Bookmarking for future reference, many thanks!

    • gottaloveit2 profile image

      gottaloveit2 4 years ago

      I'm a bit further along in understanding than the first time I read this. Perhaps by the 3rd time, I'll get it! Thanks so much for this very valuable tool though. I'm all over it. You are the master, Paul!

    • John Dyhouse profile image

      John Dyhouse 4 years ago from UK

      Nice tips here Paul, I have seen the lens before but lost the bookmark - clusmsy, I know - made sure this time.

    • profile image

      getmoreinfo 4 years ago

      Thanks for the tips, appreciate it, very useful.

    • NausetViews profile image

      Kristen 4 years ago from Boston

      What a help. Thank you Paul for this great tool and all of your tips.

    • tfsherman lm profile image

      tfsherman lm 4 years ago

      Lots here to work with, thanks.

    • Bebopis profile image

      Bebopis 4 years ago

      thanks for the info. you have an informative site:) thanks again

    • Wednesday-Elf profile image

      Wednesday-Elf 4 years ago from Savannah, Georgia

      Hi Paul. How perfect -- just yesterday I was wishing there was a way to 'preview' different styles before adding them to a WIP lens. Thank you so much for this unique online tool and for all your resources and suggestions listed here. Of particular interest was your well explained 'break-down' of code for 'boxed text'. It took me ages to learn even a little bit about reading 'code', and I still didn't know the 'whys and 'where-fors' of the code I was looking at. And breaking down the 'color code' into parts made me really 'see' for the first time what it was all about. Wow, definitely bookmarking this page for reference and further study. Thank You!

    • BestRatedStuff profile image

      BestRatedStuff 4 years ago

      Looks cool, going to experiment with it.

    • kislanyk profile image

      Marika 4 years ago from Cyprus

      Awesome tool Paul!

    • LisaDH profile image

      LisaDH 4 years ago

      Very helpful! I'm CSS-challenged, so I'm always looking for tools to help me muddle through. :-)

    • profile image

      Ruthi 4 years ago

      You gave me just what I asked for and then some. Thank you!

    • profile image

      smsr0100451 4 years ago

      Good tips. Too many points about HTML. Thanks

    • Nancy Hardin profile image

      Nancy Carol Brown Hardin 4 years ago from Las Vegas, NV

      Thank you for all these html tips. I think they're fun to use, and can give a lens a really dramatic look. Thanks for sharing your expertise. Blessed by a SquidAngel.

    • Srena44 profile image

      Srena44 4 years ago

      great lens

    • patinkc profile image

      patinkc 4 years ago from Midwest

      This lens is so helpful. Going to put it to use right away to make my lenses look better!

    • LaurisB LM profile image

      LaurisB LM 5 years ago

      Thanks for doing this. I had been wanting to make these boxes - and you made it so easy!

    • linhah lm profile image

      Linda Hahn 5 years ago from California

      I'll study this a bit since I need to learn some kind of formatting for Squidoo.

    • squidoopets profile image

      Darcie French 5 years ago from Abbotsford, BC

      I will return here again to use some of these great lens styling tools, many thanks!

    • hollywood528 profile image

      hollywood528 5 years ago

      Great info, thanks for writing this. Great for people just starting out with HTML.

    • coldsore lm profile image

      coldsore lm 5 years ago

      Very useful information to help customise a lens and give a personal touch.

    • profile image

      anonymous 5 years ago

      How have I not come across this page before? Thank you Paul for putting it together :)

    • TransplantedSoul profile image

      TransplantedSoul 5 years ago

      Thanks. I had been looking for this.

    • Protasker profile image

      Barbara 5 years ago from USA

      This show up on Squidoo Show but not on my lens. I've seen this on other pages but I CAN'T get it to work on mine? I did every thing you said. Text module shows up blank? What am I doing wrong?

      Great lens by the way, I will be back for sure, so much information here!

    • Linda Pogue profile image

      Linda Pogue 5 years ago from Missouri

      Very helpful. Blessings.

    • mary lighthouse15 profile image

      mary lighthouse15 5 years ago

      Thanks for sharing this!

    • oyningen profile image

      oyningen 5 years ago

      Good to know! :) well constructed lens ^^

    • flycatcherrr profile image

      flycatcherrr 5 years ago

      Bookmarked! Thank you, Paul.

    • favored profile image

      Fay Favored 5 years ago from USA

      Paul I've added this page to my Help Me lens. Appreciate all your hard work. Thanks.

    • BarbRad profile image

      Barbara Radisavljevic 5 years ago from Templeton, CA

      What a helpful lens! I'm bookmarking it now for future reference.

    • profile image

      marjbatesstudio 5 years ago

      Please keep writing! I need you!

    • Philmac128 profile image

      Philmac128 5 years ago

      What a very informative lens, I am still very green so people like yourself who give such great info are a godsend. Many thanks.

    • profile image

      anonymous 5 years ago

      There is another CSS TXT toolbar on this lens it does it all for you Tools for Squidoo Lensmasters I am only a newbie here and I have found that one pretty helpful, I have also bookmarked your post because I like the one that you have suggested also. All I can say is thank god we have people like yourself and all of the other people that offer great advice, and June for putting this information on her My Squid Angels Wings post, as I wouldn't have found your post if she didn't. Thank you

    • Lady Lorelei profile image

      Lorelei Cohen 5 years ago from Canada

      I think that you have covered quite a lot of the concerns and questions that new lensmasters would have on perking up their lenses using unique html design. Wonderful article on border and color html code.

    • favored profile image

      Fay Favored 5 years ago from USA

      I will look for these and give them a try. Thanks.

    • JoyfulPamela2 profile image

      JoyfulPamela2 5 years ago from Pennsylvania, USA

      Thanks for the great suggestions!

    • yourselfempowered profile image

      Odille Rault 5 years ago from Gloucester

      What a brilliant lens - thank you so much for sharing this. I had no idea all of this was possible until you pointed me in the right direction! Thanks again :)

    • HeartBroken62 profile image

      HeartBroken62 5 years ago

      Thank you for such great information. I am new to this and html is not my strong point. This lens will be very useful to me and I am sure many more like me. I am sure I will be back to check out more of your works. Thanks again!

    • TonyPayne profile image

      Tony Payne 5 years ago from Southampton, UK

      Sounds like a useful utility, and some great tutorials on this, nicely done. You just gave me an idea for another HTML lens :) Blessed, and I hope a lot of Squids find this useful.

    • VBright profile image

      VBright 5 years ago

      Looks interesting. Since I don't know about the product you are working with, I don't understand it, but it does look interesting. HTML and CSS lenses do well.

    • profile image

      DoreenMartel 5 years ago

      these various html style lenses have been incredibly helpful. now to just apply some of them ;)

    • Redneck Lady Luck profile image

      Lorelei Cohen 6 years ago from Canada

      There is so much to learn when you work online and I admit that html is one of my weak points. Great tips and links.

    • juditpaton profile image

      Iudit Gherghiteanu 6 years ago from Ozun

      just by chance found this gem for newbies, thank you so much.

    • viscri8 profile image

      viscri8 6 years ago

      Thank you, Paul, you really rock! Many useful stuff here; came by just to greet you but got a gift of some very useful tips on how to show style and display. Keep well!

    • Gloriousconfusion profile image

      Diana Grant 6 years ago from United Kingdom

      I always wondered how the hex numbers were arrived at.

    • profile image

      anonymous 6 years ago

      What a great idea for a tutorial! I did stop in on the pansies and the use of color is awesome!

    • caffimages profile image

      caffimages 6 years ago

      This is the information I've been scouring the forum for. Thanks so much for this!

    • lbos114 profile image

      lbos114 6 years ago

      I am as new to trying html as I am to squidoo, this for me.... answered prayers :)

    • Shoputopian profile image

      Karnel 6 years ago from Lower Mainland of BC

      Great lens sure glad I came across it, loads of information for me

    • profile image

      anonymous 6 years ago

      Thanks Paul, will be using your Squid Show :)

    • profile image

      anonymous 6 years ago

      Great tips and suggestions.

    • ZenandChic profile image

      Patricia 6 years ago

      Cool lens! Blessing it!

    • bossypants profile image

      bossypants 6 years ago from America's Dairyland

      These are amazing enhancements. It's a little beypnd me, right now, but I'll be back once I've mastered the basics. Thanks for generously sharing these features!

    • profile image

      anonymous 6 years ago

      Not only a great tutorial but easy to understand! Thanks!

    • norma-holt profile image

      norma-holt 6 years ago

      Great lens on this subject and now featured on Squidoo Hot Tips

    • Tamara14 profile image

      Tamara Kajari 6 years ago from Zagreb, Croatia, Europe

      This is news to me and I'm going to try it for sure. Thanks a lot for presenting it in such a simple way:)

    • dustytoes profile image

      dustytoes 6 years ago

      I always need lots of help with this kind of thing. Thank you for the info.

    • profile image

      moonlitta 6 years ago

      Seems quite good idea- I'll probably try soon. Here's an angel's blessing for continuing fellow lensmasters' support.

    • profile image

      NuMil3Design 6 years ago

      Lots of potential here Paul. It will be interesting to see what develops out of it.

    • thesuccess2 profile image

      thesuccess2 6 years ago

      Visually appealing and lots of cool CSS

      My First Angel Blessing

    • auntjennie profile image

      Jen 6 years ago from Canada

      Great Suggestion. I think this will help me out a lot:) Thanks

    • Gamganny profile image

      Gamganny 6 years ago

      Great Tip! Blessed :)

    • sorana lm profile image

      sorana lm 6 years ago

      Great tip and tool. Thanks.

    • John Dyhouse profile image

      John Dyhouse 6 years ago from UK

      yea, just the ticket! works wonderfully, just had to come back and comment again. This should help a lot.

    • John Dyhouse profile image

      John Dyhouse 6 years ago from UK

      Looks great I am off to try it out, thanks for your efforts

    • hayleylou lm profile image

      hayleylou lm 6 years ago

      Great resource :)

    • sidther lm profile image

      sidther lm 6 years ago

      Thank you! This will help with some of my upcoming lenses!

    • Brite-Ideas profile image

      Barbara Tremblay Cipak 6 years ago from Toronto, Canada

      Fantastic, I didn't even know about "Squid Show" - I've saved it to my toolbar :)

    • Virginia Allain profile image

      Virginia Allain 6 years ago from Central Florida

      What a great idea!