Overriding styles in the default Blazor theme

Hi. Can you please tell me how to override your blazor theme or how to add my own css styles? For example, I would like to make a frame with round corners in RichTextEditor or make some button with my animation. I tried using CssClass="custom" from the documentation and it can only change the background. Many thanks.


Attachment: Screenshot_2_2ed8784b.zip

3 Replies

VJ Vinitha Jeyakumar Syncfusion Team October 31, 2023 06:10 AM UTC

Hi Aron Ko,


We have prepared a sample as per your request to achieve rounded corners for the RichTextEditor by customizing and overriding the CSS styles. Please check the code and sample below,

Code snippet:
<SfRichTextEditor CssClass="custom">
    
</SfRichTextEditor>
<style>
    .custom.e-richtexteditor.e-rte-tb-expand .e-rte-content, .e-richtexteditor.e-rte-tb-expand .e-source-content {
    border-radius: 20px;
    margin-top: 10px !important;
    border: 1px solid #dee2e6 !important;
    }
    .custom.e-richtexteditor {
    border: none !important;
    }
    .e-toolbar .e-toolbar-items {
    border-radius: 20px ;
    }
    .custom.e-richtexteditor .e-rte-toolbar.e-control[class*=e-toolbar], .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar.e-control[class*=e-toolbar] {
    border-radius: 20px !important;
    border: 1px solid #dee2e6;
    }
    </style>




Regards,
Vinitha



AK Aron Ko November 4, 2023 06:34 PM UTC

Thanks for the support. It works. You're the best.



VJ Vinitha Jeyakumar Syncfusion Team November 6, 2023 05:45 AM UTC

Hi Aron Ko,


We are glad to assist you.

Regards,
Vinitha

Loader.
Up arrow icon