CSS Customization

[Jeffrey]

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? 

[Joshna Lingala Uthama Reddy Lingala]

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