Jump to content

(HELP) in changing timers Progress Bar


Recommended Posts

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

function 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 by lionhrt
Link to comment
Share on other sites


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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...