Where is the Styling Documentation?

[David]

I need to style this component.

I cannot find documentation on the css classes in use.

Is there a doc somewhere I'm just not able to locate?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi David,

Greetings from Syncfusion support.

We would like to inform you that we can customize the Uploader using css with the help of CssClass API. Please find the API link below.

API Link : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CssClass 

Kindly share the requirement of your customization  that will help us to provide the better solution at our end.

Regards,
Jeyanth.

[David]

The API link is not helpful.

It simply describes the  C# CSS Class property. It does not describe the CSS Selectors within the component that Syncfusion is using to style it.

"Kindly share the requirement of your customization  that will help us to provide the better solution at our end."

I did share my requirement. I need to style your component in its entirety. 

- What bootstrap classes do I need to override? 

- Do you have a template doc somewhere that shows how your child elements are built?

- Why do some of your components include styling info and others do not?

Surely it would be cheaper for Syncfusion to create proper documentation vs answering questions like these in the forums all the time.

I need your component, to look like my client desires. Therefore, I need a link to documentation that you have somewhere, that I can't find, that describes what CSS classes you are appending to the HTML elements being produced by the component. 

Thank you.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi David,

Sorry for the inconvenience caused. Please find the details below.

Query1: 

What bootstrap classes do I need to override? 

Response:

Following is the list of classes that provides flexible way to customize the Uploader component.

 

Class Name	Description
e-upload-browse-btn	Applied to browse button of uploader component.
e-file-drop	Applied to drop area(drop files here) of uploader component
e-file-clear-btn	Applied to clear button of uploader component.
e-file-upload-btn	Applied to upload button of uploader component.
e-file-delete-btn	Applied to remove icon of uploader component.
e-upload-success	Applied to status text of uploader component.

Overriding the above classes will be reflected all the Uploader components rendered. You can also make use of cssClass that will be added to the root of the specific Uploader component. 

Query2:

Do you have a template doc somewhere that shows how your child elements are built?
Why do some of your components include styling info and others do not?

Response:

 

In Uploader, we have made use of native input element wrapped with div which also consists of a button to open the file explorer. Also if you select files, li elements for those selected files will be rendered accordingly below the uploader.

We have already considered this requirement of customizing the UI appearance of components and we will refresh this in our UG documentation soon.

Regards, 

Jeyanth. 

[Stefan Heimbach]

So where can i find a documentation for all the components?

[Berly Christopher]

Hi Stefan, 

  

Please find the below documentation link to know about CSS customization. 

  

Component	Documentation Link
ListView	https://blazor.syncfusion.com/documentation/listview/customizing-templates/#template
Tooltip	https://blazor.syncfusion.com/documentation/tooltip/style/
Range slider	https://blazor.syncfusion.com/documentation/range-slider/style/
DashboardLayout	https://blazor.syncfusion.com/documentation/dashboard-layout/style/
Sidebar	https://blazor.syncfusion.com/documentation/sidebar/style/
Grid	https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/
Dialog	https://blazor.syncfusion.com/documentation/dialog/style/
Inplace-editor	https://blazor.syncfusion.com/documentation/in-place-editor/style/
RichTextEditor	https://blazor.syncfusion.com/documentation/rich-text-editor/style/
Splitter	https://blazor.syncfusion.com/documentation/splitter/style/
Toast	https://blazor.syncfusion.com/documentation/toast/style/
Spinner	https://blazor.syncfusion.com/documentation/spinner/style/
Calendar components	We will add the information in UG in Volume 4 SP release
DropDown Components	We will add the information in UG in Volume 4 SP release
Input components	We will add the information in UG in Volume 4 SP release
Uploader	We will add the information in UG in Volume 4 SP release
Chart	CSS styles is not applicable for chart component. We are using API for customizations.
TextBox	https://blazor.syncfusion.com/documentation/textbox/how-to/customize-the-textbox-background-color-and-text-color/

               

  

Regards, 

Berly B.C 

[Andy Richard]

I have no idea how to style the treeview and there is no documentation at all. Through trial and error I was able to change certain things but it really looks bad. How to style the selected item's text color and background color for example. I was able to change the background color on hover but not the text color. PLEASE UPDATE YOUR DOCUMENTATION.

[Berly Christopher]

Hi Andy,  

  

To customize the Selected item text color and background color use the below classes.  

  

// background color change on hovering  

.e-treeview .e-list-item.e-active.e-hover > .e-fullrow {  

   background-color: lightgray;  

}  

//background color change on Selection  

.e-treeview .e-list-item.e-active > .e-fullrow {  

   background-color: lightslategrey;  

}  

// Text color change on hovering  

.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {  

   color: black;  

}  

// Text color change on Selection  

.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {  

   color: white;  

} 

  

Please, refer the below class added for TreeView component to customize its styles:   

  

Customize Expand and Collapse icon in TreeView:  

  

e-icon-collapsible	This class will be added for collapse icon of TreeView component.
e-icon-expandable	This class will be added for expand icon of TreeView component.

  

Customize the TreeView:  

  

.e-treeview	CSS to customize the TreeView.
.e-treeview .e-list-item .e-fullrow	Customize the entire TreeView node
.e-treeview .e-list-item	This class will be added for each TreeView node.

  

Customize the TreeView node based on level.  

  

     /*apply custom css to first level*/  

     .e-treeview .e-level-1 > .e-text-content .e-list-text {  

        font-style: italic;  

      }  

      /*apply custom css to second level*/  

      .e-treeview .e-level-2 > .e-text-content .e-list-text {  

        color: darkmagenta;  

      }  

      /*apply custom css to all the leaf nodes*/  

      .e-treeview .e-level-3 > .e-text-content .e-list-text {  

        font-weight: bold;  

      }   

  

Increase the height of each TreeView node.  

  

.e-treeview .e-list-text {  

    line-height: 50px;  

  }  

  .e-treeview .e-fullrow {  

    height: 50px;  

  }  

  

Hovering the TreeView node:  

  

e-hover

This class is added to the TreeView when hovering the TreeView node.

  

  .e-treeview .e-list-item.e-hover > .e-fullrow {  

    background-color: blue;  

  }   

  

Selection of TreeView node:  

  

e-active

This class is added to the TreeView when selecting the TreeView node.

  

  .e-treeview .e-list-item.e-active > .e-fullrow {  

    background-color: blue;  

  }   

  

We have already considered to update our documentation in any of our upcoming release.  

   

Regards,  

Berly B C 

[Stefan Heimbach]

Please tell me how to customize the simple Sftextbox..

I was able to customize the size but I need to know how I can customize the component if it's 'focused' like the shadow box appearance and so on

Thank you

[Sureshkumar P]

Hi Stefan,  

 

We can override the CSS styles for the SfTextbox component when it is in focu state. Here, we have modified the box-shadow color of the TextBox component and attached it below.  

@using Syncfusion.Blazor.Inputs  

<SfTextBox CssClass="e-custom"></SfTextBox>   

  

<style>  

    .e-custom.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {  

        box-shadow: 0 0 0 3px rgb(255 0 0 / 25%);  

        border-color: #e41616;  

    }  

</style>  

  

Screenshot:  

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Textbox_style_1568881732585712   

 

Else, if you want to change the UI colour of the component, we suggest you use our Theme Studio option. By using this, you can customize the component based on the application needs and download and make use of in the application.  

 

Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material   

 

To know how to use theme studio, please follow the instructions provided in the below documentation.   

UG Link: https://blazor.syncfusion.com/documentation/appearance/theme-studio/?no-cache=1   

 

Regards,  

Sureshkumar P