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
Vanilla 2.6 is here! It includes security fixes and requires PHP 7.0. We have therefore ALSO released Vanilla 2.5.2 with security patches if you are still on PHP 5.6 to give you additional time to upgrade.

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.