How do you guys change the “hospital green” background of the Multi-File Uploader?
Javascript to add CSS?
A more customizable plugin?
Other suggestions?
Hi,
Has anyone managed to style it? I tried by adding an HTML element with CSS.
<style>
#test {background-color:white !important}
</style>
Assigned the ID “test” to the Multi File Uploader.
Didn’t work.
I managed to resolve this by replacing any element background within the upload control with the preferred color.
-
Add a Multi File Uploader to your page.
-
Enable "Expose ID attribute (…) in App Settings.
-
Assign an id to your Multi File Uploader.
-
Add a HTML element to your page with the following value:
#multifileuploader-id *{background-color:white;}
Replace the multifileuploader-id with your id value.
I still think the Bubble Teamp should add a background style property for the row element though…
Nice tip - I find the Multi File Uploader unnecessarily ugly, and have to mess around with custom states, transparency to make it look reasonable.
By the way I’m moving this into tips category
So, what do you use for multi file upload?
I also connected the File Dialog to a button so I could hide the Multi File Uploader completely.
I do agree that it is ugly.
Nice tip from @codecompany. Thanks! Took the CSS hack a little bit further to customize the multi-File Uploader. Here is what I achieved:
Played mainly with 4 CSS classes: dz-preview, dz-remove, dz-progress and dz-upload.
Hi Mehdizirari, I’d really like to do this too. May you please share a screenshot of the code you used? I can’t seem to figure it out.
Actually, I don’t like the multifile uploader plugin from bubble as it is not easily customization, so I build a plugin that enables me to build a custom multi uploader style and control it as I want
you can try it here Multi uploader Plugin | Bubble
it’s free
Sorry for the late answer… Haven’t checked the forum for a while.
Here is the code used to hack the multifile uploader:
<style>
#multifileuploader-id .dz-preview {
background-color:white;
border-bottom: solid 1px #D8D8D8;
box-shadow: none;
height: 44px;
}
#multifileuploader-id .dropzone.dz-max-files-reached {background-color: #F8F8F8;}
#multifileuploader-id .dz-remove {
background:white;
color:#6302E7;
font-size: 12px;
right: 0px;
}
#multifileuploader-id .dz-progress .dz-upload {
margin-top: 7px;
background-color:#6302E7;
background-image: none;
right: 0px;
height: 6px;
}
</style>
Hello all,
here is the correct solution that works. Finally, i managed to change "Hospital Green "
-
Add a Multi File Uploader to your page.
-
Enable checkbox “Expose ID attribute (…)” in Settings → General → General appearance.
-
Assign an ID to your Multi File Uploader. Means in “ID Attribute” field you need to type any word you like. I use a word: uploader
-
Add a HTML element to your page:
<style> #uploader *{background-color:#A8A8A8;} </style>
-
Done (it works).
Choose color you like by typing it in words or as a number: background-color:black; or background-color:#A8A8A8; both works.
Regards
Valerij
Saw your plugin it works amazingly, but 1 thing im not sure where to get it
current workflow api… appreciate if you can guide me to it… thanks
Unfortunately the issue is not clear to me can you send me more info or screenshot , you can DM me anytime
are you able to use Box as the storage service for the files? I couldn’t see where to update this part of the code
currently the plugin only support bubble storage , I will publish a pro version of the plugin which will support different storage providers