Async Upload button increase size and change color

2 posts, 0 answers
  1. Jagat
    Jagat avatar
    150 posts
    Member since:
    Jan 2011

    Posted 07 Mar Link to this post

    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

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    532 posts

    Posted 12 Mar Link to this post

    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: 


    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top