Styling on the built-in File Upload Window

[scrimej]

Is there anyway to set the font color on the built in file upload window. I am using the Alpha Dark theme and the file label has a default color of black making the label hard to read.

Untitled.png

[peteconway]

Re: Styling on the built-in File Upload Window

First thingfileupload.jpg change the image to something more suitable. Let me know how that goes, also just delete the text that says click on the image..

[scrimej]

Re: Styling on the built-in File Upload Window

Thanks Pete, that will definitely help. It's not a show stopper, but after they select a file, the file name of the file they selected replaces the text "Please select a file" making that difficult to read as well. If there is not an easy way to change this text from black to some other color then I'll take your suggestions and make the best of it.

[peteconway]

Re: Styling on the built-in File Upload Window

Ask for it to be changed by Alpha, it needs it.

[Davidk]

Re: Styling on the built-in File Upload Window

Jeremy,

All of this is just css. If you can find how a thing is rendered, you can usually get to it. In this case Alpha uses a wretched process of assigned a sequential # to a popup dialog window. If you can get that, then you can proceed. Again, in this case, it is probably "A5dlg0". Looking at the rendered page you can see that the popup window has a BodyContainer, and inside that there is an HTML Document.
You get the document, get the input area, and change it's style.

Now, I can't get Alpha-Dark to work because...well... Alpha's implementation of this stuff is horrible. It should simply work, and it should work simply... but it doesn't. So, you need to find out the rendered Classes for Alpha-Dark. I think I have them right, but double check.

When you pop up your File Upload dialog, run this code a couple of seconds after it popups up. In my test, I'm running it 4 seconds after the popup appears, but you don't need that much time.

setTimeout(function(){
	debugger;
	var popup = $("A5dlg0.BODYCONTAINER");
	var popupDoc = popup.childNodes[1].contentDocument;
	var fileEle = popupDoc.getElementsByClassName("Alpha-DarkInput Alpha-DarkEdit");
	var inputEle = fileEle[0];
	inputEle.style.width = "90%";
	inputEle.style.backgroundColor = "blue";
},4000);

Here I'm an getting the popup window named "A5dlg0" and gettings it's BODYCONTAINER. Then I get the document. Then I go after that input line which has a class of "Alpha-DarkInput Alpha-DarkEdit". This is the part you'll need to confirm... the Classes used.

Once we get the span that has that class, then we can change it's style. In this case I'm extending the length of the input area... and changing it to blue.

[peteconway]

Re: Styling on the built-in File Upload Window

I'm sure that's very helpful as well and thank you, i'll report it anyhow as needs fixing.
Again thanks.

[scrimej]

Re: Styling on the built-in File Upload Window

David and Pete. Thanks. I don't know if there is still an issue with css icons, but when I changed the default upload icon to a css icon the upload dialog threw a 500 error and would not load. I know this issue was reported in the past that css icons were not displaying, but I thought they had fixed it. I am running the latest available production ready version. The workaround was to use a built in icon but the css icons are so much nicer.

[iRadiate]

Re: Styling on the built-in File Upload Window

If I change the upload icons to anything but the 'built-in' ones, I also get errors so I suspect there's something not right with the upload action builder.

[Davidk]

Re: Styling on the built-in File Upload Window

That's correct... there's a lot of bugs in this process. CSS and SVG Icons do not work yet are available to choose. These have never been tested by Alpha. You get a 500 Internal Server Error.

With the code above, you can get to the <img> tag and set your own icon by drilling down into the children of the document. Even if Alpha does fix this, it means you're into another round of pre-release bugs... so you might as well change the img yourself.

It's tougher if you want to use an SVG or CSS icon because you'd have to remove the <img> tag and add your own <i> or <svg> tag. This is what you get because Alpha will not test it's work.