Hi

Just started using the PAU3 extention. so far works fine and as expected. Is there anyway to customise the progress bar that is displayed to not have that faux blue XP type window?

I use the Vistalook bar, and my preference would be the flash control with no window border but ideally with background dimmed out like lightbox does.

Maybe a square border would be required so the close option can be placed, but generally just think the curved window effect that is there just now is a bit messy looking. dosent render correctly in either ff3.6 or ie8.


thanks

Edited by - Ryan Galloway on 16 Feb 2010  10:42:53

Dosen't matter - managed to do it myself.

What was behind the decision to use packer on the javascript functions? After unpacking the javascript functions and using the unpacked version my modification was simple! if the include had just been left unpacked it makes it less hassle when you need to customise code to suit.

Hi Ryan,

I'm curious in what way you customized the Progress Bar. Could you e-mail me a link to an example on ?

Kind regards, Patrick

hi Patrick,

I've emailed you sample code but thought id place a screenshot online for anyone else who is interested in what the modified progress bar looked like.

Edited by - Ryan Galloway on 17 Feb 2010  02:31:51

Hi Ryan / DMXzone Team,

Would love to know how you did this - I'm coming up against the same problem?

DMXZone - why give the option to customize colours, then plonk it all inside a messy blue box? Seems a bit silly to me, and the only real problem I've come across for far. Is there an 'official' work around for this?

Dan

Hi Dan

I believe (not botthered to check) the latest realease may have removed the packing from the javascripts which would allow you to edit the various areas of code to style as you required. If not, just reverse the packer function, and resave over the included .js file, you can then edit scripts as required.

That was all i did, I simply edited/removed/added code as needed to have the box styled as i wanted. the trickiest part was making it cross browser compatible, which the default blue box effort badly wasn't! A much better and sensible approach would have been the code to use seperate include where the styling of the container could have been styled outwith.

Quote

Hi Ryan / DMXzone Team,

Would love to know how you did this - I'm coming up against the same problem?

DMXZone - why give the option to customize colours, then plonk it all inside a messy blue box? Seems a bit silly to me, and the only real problem I've come across for far. Is there an 'official' work around for this?

Dan

Thanks Ryan, I'll take a look.

No comment from DMXZone? I'm disappointed...it's not like I've purchased a $10 extension here, it seems a drastic oversight to have a customizable window and then surround it in an ugly blue box which doesn't even load well in all browsers - are you working on fixing this issue? It's a great shame it's in there as appart from the blue box, it's a great piece of software.

Thanks,

Dan

You can simply use CSS properties to edit the faux window, without messing into JavaScript code
To get the upload progress window stuck (for testing purposes), replace the onSubmit code with this:

onSubmit="<%=pau.submitCode()%>;return false"

Then try to upload a file and inspect the generated code with Firebug to "see how it's done"
Then, add your CSS custom code - a little CSS knowledge required, of course! - to #UploadProgress and its descendant selectors (use !important to overwrite JS rules)

For example, I did this simple window:

#UploadProgress { background:none!important;}
#UploadProgress > div > div {border:1px solid #ccc!important; -moz-border-radius:0!important;}
#UploadProgress > div > div > div:first-child {-moz-border-radius:0!important;background-color:#eee!important;padding:4px 4px 0 0!important;}
#UploadProgress > div > div > div img {margin-top:2px;margin-right:3px}
#UploadProgress > div > div > div > div {color:#333!important;}
#UploadProgress iframe {border:2px solid #eee!important;}

Uhm... needs some tweaking on Safari and mostly IE browsers (the background is still blue), I'll go on working on this...

Edited by - Ivan Halen on 17 Oct 2010  12:31:28

Quote

You can simply use CSS properties to edit the faux window, without messing into JavaScript code
To get the upload progress window stuck (for testing purposes), replace the onSubmit code with this:

onSubmit="<%=pau.submitCode()%>;return false"

Then try to upload a file and inspect the generated code with Firebug to "see how it's done"
Then, add your CSS custom code - a little CSS knowledge required, of course! - to #UploadProgress and its descendant selectors (use !important to overwrite JS rules)

For example, I did this simple window:

#UploadProgress { background:none!important;}
#UploadProgress > div > div {border:1px solid #ccc!important; -moz-border-radius:0!important;}
#UploadProgress > div > div > div:first-child {-moz-border-radius:0!important;background-color:#eee!important;padding:4px 4px 0 0!important;}
#UploadProgress > div > div > div img {margin-top:2px;margin-right:3px}
#UploadProgress > div > div > div > div {color:#333!important;}
#UploadProgress iframe {border:2px solid #eee!important;}

How does that look in IE 6?

This is more browser safe: it looks apparently the same on Firefox, Chrome and Safari, and acceptable on Opera

#UploadProgress { background:none !important; }
#UploadProgress > div > div { padding-bottom:6px; border:1px solid #ccc!important; -moz-border-radius:0 !important; }
#UploadProgress > div > div > div { overflow:auto; -moz-border-radius:0 !important; }
#UploadProgress > div > div > div:first-child { background-color:#eee !important; border-bottom:1px solid #ccc !important; padding:6px 6px 3px !important }
#UploadProgress > div > div > div > div { color:#333 !important; float:left; width:auto !important; padding:0 !important; }
#UploadProgress iframe { border:0 !important; }

IE (8 and 7) are still with the blue window: I guess that CSS can't overwrite JS code, but I can live with it (another good reason to say goodbye to IE)
Can't test on IE6, but hey, we are in 2010! [] And if YouTube and Facebook drop support for IE6 why should I still care about this buggy monster? []

Quote

Can't test on IE6, but hey, we are in 2010! [] And if YouTube and Facebook drop support for IE6 why should I still care about this buggy monster? []

Because the amount of users still using it are still more than browsers such as opera/safari. probably within the top5.

Many users still use this not out of choice but due to coporate IT policies as upgrading causes issues with older corporate software that has yet to be re-written.

If you are unable to test on IE6 then simply install XP mode and create sepearte instances for each IE version. you can then run the IE instance in a virtual shell as if you had them all installed. I often have a IE6,7,9 window open, along with my IE8 (only non virtual version).

Thanks for the suggestion, but the solution just insn't good enough for what i needed (too many clients still stuck on IE6). The way I did it works in every version of IE from 6 - 9, opera 9.6 +, safari 4, firefox 2+ chrome 2+.

The perfect solution would still be if the window was a customisable template via a code snippet file.

Edited by - Ryan Galloway on 17 Oct 2010  14:16:51