We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

CSS Customization

I’m new to Syncfusion and am having trouble understanding how to override the CSS styling. For instance, I want to change the color of the button in SfUploader. I looked at the appearance setting on the website but where does this go? I can’t find the syncfusion css styles anywhere so I’m guessing they are in a dll somewhere. So am I supposed to create my own css file and import that? Also, it seems like a lot to simply change the color of a button for the uploader? 


1 Reply

JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team November 1, 2022 12:51 AM

Hi Jeffrey,


To customize the button in Uploader control, after running the sample inspect and locate the element in the developer tools of the browser. Please refer the below images for reference



As the button need to be customized, the CSS class under the styles in the developer tools that is highlighted in the above image and write the customized styles for the button. For example, please refer the below sample code snippets and image for your reference


Code snippets:


 

<style>

   .e-upload .e-file-select-wrap .e-btn{

        color:aqua;

        background-color:chocolate;

}

</style>

 


Output [Customized button]:



For more details, please refer the below link for customizing CSS in file uploader control


https://blazor.syncfusion.com/documentation/file-upload/style-appearance#customizing-the-file-upload-browse-button 


You can customize CSS for Syncfusion controls using CSS isolation or using NPM package reference. You can find the styles of the Syncfusion controls by downloading required stylesheet either from ThemeStudio or CRG, and edit the stylesheet with the required styles and refer in the application. For more details please refer the below links


https://blazor.syncfusion.com/documentation/appearance/themes#npm-package-reference

https://blazor.syncfusion.com/documentation/common/custom-resource-generator

https://blazor.syncfusion.com/documentation/appearance/theme-studio


Please get back to us if you have any queries.


Regards,

Joshna L


Loader.
Live Chat Icon For mobile
Up arrow icon