InsaneJournal

• Create Account
• IJ Login
• OpenID Login

Search by :  Username E-mail Region Interest AOL IM ICQ Number Yahoo! ID MSN Username Jabber

• View
  • Create Account
  • IJ Login
  • OpenID Login
• Journal
  • Post
  • Edit Entries
  • Customize Journal
  • Comment Settings
  • Recent Comments
  • Manage Tags
• Account
  • Manage Account
  • Viewing Options
  • Manage Profile
  • Manage Notifications
  • Manage Pictures
  • Manage Schools
  • Account Status
• Friends
  • Edit Friends
  • Edit Custom Groups
  • Friends Filter
  • Nudge Friends
  • Invite
  • Create RSS Feed
• Asylums
  • Post
  • Asylum Invitations
  • Manage Asylums
  • Create Asylum
• Site
  • Support
  • Upgrade Account
  • FAQs
  • Search By Location
  • Search By Interest
  • Search Randomly

Ally -- are you already gone? (wastintime) wrote in rp_tutorials, @ 2011-01-07 10:36:00

Current mood:

accomplished

Working House Thermometers

Live Examples

1000 pts

900 pts

500 pts

0 pts

Code - Table of all 4
<lj-raw><table cellspacing="25px"> <tr> <td> <div style="height: 330px;width: 100px;background: url(http://img407.imageshack.us/img407/802/thermred.png) no-repeat 0 30px;"> <div style="background: url(http://img717.imageshack.us/img717/328/thermsignred.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>1000 pts</b> <div style="padding:20px 0 0 0;"> <div style="background: url(http://img257.imageshack.us/img257/3626/thermcoverred.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:214px;"> </div></div></div></div></div></td> <td> <div style="height: 330px;width: 100px;background: url(http://img257.imageshack.us/img257/7660/thermblue.png) no-repeat 0 30px;"> <div style="background: url(http://img338.imageshack.us/img338/8018/thermsignblue.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>900 pts</b> <div style="padding:30px 0 0 0;"> <div style="background: url(http://img192.imageshack.us/img192/3765/thermcoverblue.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:204px;"> </div></div></div></div></div></td> <td> <div style="height: 330px;width: 100px;background: url(http://img18.imageshack.us/img18/6355/thermyellow.png) no-repeat 0 30px;"> <div style="background: url(http://img257.imageshack.us/img257/8366/thermsignyellow.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>500 pts</b> <div style="padding:126px 0 0 0;"> <div style="background: url(http://img64.imageshack.us/img64/5006/thermcoveryellow.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:108px;"> </div></div></div></div></div></td> <td> <div style="height: 330px;width: 100px;background: url(http://img209.imageshack.us/img209/6710/thermgreen.png) no-repeat 0 30px;"> <div style="background: url(http://img222.imageshack.us/img222/8633/thermsigngreen.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>0 pts</b> <div style="padding:244px 0 0 0;"> <div style="background: url(http://img213.imageshack.us/img213/7382/thermcovergreen.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:0px;"> </div></div></div></div></div></td> </tr> </table></lj-raw>

Code - Red
<lj-raw> <div style="height: 330px;width: 100px;background: url(http://img407.imageshack.us/img407/802/thermred.png) no-repeat 0 30px;"> <div style="background: url(http://img717.imageshack.us/img717/328/thermsignred.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>1000 pts</b> <div style="padding:20px 0 0 0;"> <div style="background: url(http://img257.imageshack.us/img257/3626/thermcoverred.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:214px;"> </div></div></div></div></div></lj-raw>

Images


Code - Blue
<lj-raw> <div style="height: 330px;width: 100px;background: url(http://img257.imageshack.us/img257/7660/thermblue.png) no-repeat 0 30px;"> <div style="background: url(http://img338.imageshack.us/img338/8018/thermsignblue.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>900 pts</b> <div style="padding:30px 0 0 0;"> <div style="background: url(http://img192.imageshack.us/img192/3765/thermcoverblue.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:204px;"> </div></div></div></div></div></lj-raw>

Images


Code - Yellow
<lj-raw> <div style="height: 330px;width: 100px;background: url(http://img18.imageshack.us/img18/6355/thermyellow.png) no-repeat 0 30px;"> <div style="background: url(http://img257.imageshack.us/img257/8366/thermsignyellow.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>500 pts</b> <div style="padding:126px 0 0 0;"> <div style="background: url(http://img64.imageshack.us/img64/5006/thermcoveryellow.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:108px;"> </div></div></div></div></div></lj-raw>

Images


Code - Green
<lj-raw> <div style="height: 330px;width: 100px;background: url(http://img209.imageshack.us/img209/6710/thermgreen.png) no-repeat 0 30px;"> <div style="background: url(http://img222.imageshack.us/img222/8633/thermsigngreen.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;"> <div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;"> <b>0 pts</b> <div style="padding:244px 0 0 0;"> <div style="background: url(http://img213.imageshack.us/img213/7382/thermcovergreen.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:0px;"> </div></div></div></div></div></lj-raw>

Images


Altering the point total...

Find <b>1000 pts</b> change 1000 to any number desired.

Altering the mercury height...

You will have to change numbers in two places. They relate to each other. #THISISIMPORTANT

Find padding:20px 0 0 0; towards the middle and height:214px; at the very end. To lower the mercury, reduce height:214px; and increase padding:20px 0 0 0; by the same number of pixels to desired level.

Maximum mercury height: padding:20px 0 0 0; ... height:214px;
Minimum mercury height: padding:244px 0 0 0; ... height:0px;

Inspired By: The Music Empowers Thermometer

Questions/Feedback?
Leave a comment to this post. Thanks!

(Read comments)

Post a comment in response:

From:	( ) Anonymous- this user has disabled anonymous posting. ( ) OpenID InsaneJournal user Username: Password: Login?  Don't have an account? Create one now.
Subject:	No HTML allowed in subject   Don't auto-format:
Message:	Check spelling during preview