Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
After February 6, this site will no longer have Facebook, Twitter, or OpenID sign-in options. Read our announcement about social media SSO support in 2.8 for more info.

Make sure you have a current, valid email address set in your profile and set a password so you can login without it. If you get locked out after that time, you can choose "Forgot Password" to fix it as long as a valid email is on your account.

Custom Upload Progress Bar

vrijvlindervrijvlinder Papillon-Sauvage MVP
edited August 2013 in Tutorials

If you want to customize your progress bar for your file upload you can use this css I made and attach the image I made for my own but it gives you an idea about size and stuff. You can use any animated image you want.
Just add this to your custom.css file.

.UploadProgress {
margin: 10px 0;
background:url(images/upload-progress-back1.gif)!important;
width: 200px;
height:39px;
z-index: 0;
color: #fff;
text-shadow: 0 1px 1px #000;
border: 1px solid #666;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
}
div.AttachFileWrapper table.AttachFileContainer tr.FileAttachment td div.ProgressBar {
   width: 126px;
   border: 2px solid gray;
   background-color:transparent;
   height:39px;
   background url(images/upload-progress-back1.gif)!important;
   border: 0px;
font-size: 14px;
}
div.AttachFileWrapper table.AttachFileContainer tr.FileAttachment td div.ProgressBar div.ProgressTicker {
   height:39px;
   background-color:transparent;
   background:url(images/upload-progress-back1.gif)!important;
   line-height: 14px;
   font-size: 14px;
   color: #fff;
   padding-right: 2px;
   text-align: right;
}
peregrineBrandonPDavidShine
Sign In or Register to comment.