lionhrt Posted August 29, 2005 Share Posted August 29, 2005 (edited) Is there a way to change the timer's progrees bar to either match your themes color xcheme or to use a pic instead?noticed this in the timers.jsfunction tProgressBar(){var table = '<table width="124" border="0" cellpadding="0" cellspacing="0" class="timer"><tr><td><img src="./Graphics" height="10" width="120" id="timerImg" /></td></tr></table>';document.write(table);}also noticed this in the wpi.htm]<!-- Timer starts here --> <div align="center"> <script> if(timer=='on') startInterval(); if(timer=='off') stopInterval(); if(timer!='off'&& timer!='on') window.alert('Timer Value can only be "on" or "off" Please Change it in config.js'); </script> <span style="vertical-align: bottom"><strong> <font size="2" color="#afaeae" face="Arial"> <script> if(timer=='on') document.write(getText(lblTimerTitle)); </script> </font></strong> <form name=display size="4" class="txtboxshow" style="align: center; font-size: 24pt; font-family: Arial; font-weight: bold; color: #afaeae; vertical-align: baseline; width:100; height:37"></form></font> <strong><font face="Arial" size="1" color="#afaeae"> <script> if(timer=='on') tProgressBar(); if(timer=='on') document.write(getText(lblTimerStop)); </script> </font></strong> </span><p> </div> <!-- Timer ends here -->Can anyone advise Edited August 29, 2005 by lionhrt Link to comment Share on other sites More sharing options...
blinkdt Posted August 29, 2005 Share Posted August 29, 2005 Hey, nice find, lionhrt. I had been wondering how to change the color of the bar myself but was stumped. Based on your query, I took another look and, well, check this out:1. The code snippet src="./Graphics" found in the third line of your first code quote is just begging for an actual image to work with. For example, you will notice that the "Graphics" directory is empty, resulting in a transparent progress bar.2. But let's say you want a red-colored bar. Just create a 1x1 pixel colored image and dump it in the graphics folder, then change the code to refer to the new image, like so: src="./Graphics/redbar.jpg" You can also edit the height and width of the bar, within the confines of the left column, of course.Now you have a red progress bar counting down atop a background placeholder that you can change by editing the class "timer" found in the wpi.css file located in the "Themes" directory. It looks like this by default:.timer { background-color: #18339f; border: 1px solid #000000; padding: 1px;}So you can change the background color, the color of the border, you can even mess with the padding setting if you so desire.One note: if you use an actual picture to act as the coutdown bar, it will obviously become distorted as it shrinks. That has some interesting possibilities, I suppose, but I can't think of any at the moment.Editing your second code block mostly affects the timer-related text. Play with it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now