I have gotten a few requests for the progress bar widget (or lack thereof) on the top right of my page. I initially did some research finding the best way to add a progress bar to my site, but had some issues. I have about a .001% knowledge of how CSS and PHP and stylesheet yada yada work. I know enough to make my website work, but all the sites I found said it was easy, but I was flailing trying to find a good way to make it work. Apparently a few folks have, so if you’re good at CSS and PHP look @ ajaxian, fiveone.org, schjerning, widgetsblog, dojo, effbot, uwinni, toolbookdeveloper, livepipe, riverusers, or blogherald.
Conveniently, I AM good at Adobe Photoshop. So if anyone out there just HAS Adobe Photoshop, they can open this file and modify it to fit your own progress. It’s pretty slick and I dug the colors from the Apple progress bar window –
So when you open the .PSD file in Adobe Photoshop, be sure you go to the top of the options menu and click “Window” and then “layers” (also be sure “tools” is selected). This will show you the 6 layers this image covers. It should look like or similar to this:
From there it is fairly self explanatory. Click on the toolbar for text, it should look like this: .
and then click on the “layer” that you want to change from here: (in this case “Long Blue Bar”which will pull out further as you progress on your progress bar).
and to change the values, just change the highlighted choice in “layers” to what you need to modify, switch to the text tool, and double click on the image where you need to change – like this:
That’s about as simple as I can lay it out – if you need help, I’m happy to help you out, just leave a message to this thread or send me an email at [hank]aht myinvestingblog dottt com.
If you DO decide to use this, all I ask for is a link back to this page stating it’s working properly! Thanks for your support!
Filed Under: Uncategorized