Async Upload button increase size and change color

[Jagat]

Hello,

 

I am having trouble in increasing the size of the button. I did change the height and color options in the css file but it does nto change. I attached a image to this email which shows the button. How can i increase the size of this button?

 

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="pdf,jpg,jpeg,txt"
                                       MultipleFileSelection="Automatic"  CssClass="wizInternalLabels" dir="rtl"
                                       PostbackTriggers="btnCustomFinish"  >
                                       <Localization Select=" Select a document to upload "   />

                                   </telerik:RadAsyncUpload>

 

.ruButton.ruBrowse
{
min-width:500px;
font-size:18px;
    color:Red;
font-weight:bold;
height:100px;
}

 

.wizInternalLabels
{
color:#00008B;
font-size:x-large;
height:200px;
}

 

 

Thanks in Advance

[Peter Milchev]

Hello Jagat,

Firstly, I would suggest using the Lightweight RenderMode of the AsyncUpload. 

Then, the styles you have provided would increase the button size. 

The color is not applied because the default selector is "stronger", more specific than the one you use t set the button's color. 

Generally, for further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

In your case, the following improvement would be enough:

<style>
    html div.RadAsyncUpload .ruButton.ruBrowse {
        min-width: 500px;
        font-size: 18px;
        color: Red;
        font-weight: bold;
        height: 100px;
    }

    html div.RadAsyncUpload.wizInternalLabels {
        color: #00008B;
        font-size: x-large;
        height: 200px;
    }
</style>

Regards,
Peter Milchev
Progress Telerik