Change color

[Fernando Candido]

How do I change accordion colors?

[Satheesh Kumar Balasubramanian]

Hi Fernando,

You can use AccordionItem CssClass property to change accordion item colors.

Index.razor:

<SfAccordion>

    <AccordionItems>

        <AccordionItem CssClass="margaret-class" Header="Margeret Peacock" Content="Margeret Peacock was born on Saturday , 01 December 1990. Now lives at Coventry House Miner Rd., London,UK. Margeret Peacock holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>

        <AccordionItem CssClass="laura-class" Header="Laura Callahan" Content="Laura Callahan was born on Tuesday , 06 November 1990. Now lives at Edgeham Hollow Winchester Way, London,UK. Laura Callahan holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>

        <AccordionItem CssClass="albert-class" Header="Albert Dodsworth" Content="Albert Dodsworth was born on Thursday , 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle,USA.Albert Dodsworth holds a position of Sales Representative in our WA department, (Seattle USA). Joined our company on Friday , 01 May 2009"></AccordionItem>

    </AccordionItems>

</SfAccordion>

<style>

   .e-accordion .margaret-class.e-acrdn-item.e-select > .e-acrdn-header {

     background: red;

   }

   .e-accordion .laura-class.e-acrdn-item.e-select > .e-acrdn-header {

     background: yellow;

   }

   .e-accordion .albert-class.e-acrdn-item.e-select > .e-acrdn-header {

     background: green;

   }

</style>

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B

Attachment: Accordion_(2)_b29171a2.zip

[Fernando Candido]

I need to have easy color control, i also want different color fonts when i click at the same in initial state.

Attachment: Accordion_c5272455.zip

[Ruksar Moosa Sait]

Hi Fernando,

We have modified your shared sample as per your requirement by using the below CSS classes

.e-accordion .margaret-class.e-acrdn-item .e-acrdn-header .e-acrdn-header-content{

     color:aqua;

   }

   .e-accordion .laura-class.e-acrdn-item .e-acrdn-header .e-acrdn-header-content{

     color:antiquewhite;

   }

   .e-accordion .margaret-class.e-acrdn-item.e-select.e-expand-state>.e-acrdn-header .e-acrdn-header-content,

   .e-accordion .margaret-class.e-acrdn-item.e-select.e-selected.e-expand-state>.e-acrdn-header .e-acrdn-header-content {

       color:aqua;

   }

   .e-accordion .margaret-class.e-acrdn-item.e-select.e-selected.e-expand-state>.e-acrdn-header,

   .e-accordion .margaret-class.e-acrdn-item.e-select.e-expand-state>.e-acrdn-header{

       background: red;

   }

 

   .e-accordion .laura-class.e-acrdn-item.e-select.e-expand-state>.e-acrdn-header .e-acrdn-header-content,

   .e-accordion .laura-class.e-acrdn-item.e-select.e-selected.e-expand-state>.e-acrdn-header .e-acrdn-header-content {

       color:antiquewhite;

   }

  .e-accordion .laura-class.e-acrdn-item.e-select.e-selected.e-expand-state>.e-acrdn-header,

   .e-accordion .laura-class.e-acrdn-item.e-select.e-expand-state>.e-acrdn-header{

       background: yellow;

   }

Output:

Kindly try the attached sample and let us know if you need any assistance.

Regards,

Ruksar Moosa Sait

Attachment: AccordionModified_3425ae92.zip

[Fernando Candido]

I had the same difficulty with the TreeView, how do I do it? To make Hover a different color from the selected one, it also has the font colors in each state.

[LeoLavanya Dhanaraj]

Hi Fernando,

You can customize the tree nodes level-wise by adding a cssClass property to the component. Using the cssClass property you can be able to override the TreeView component styles. For reference, check the below documentation link.

Documentation : https://blazor.syncfusion.com/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels

Refer the below code snippet for the different color while hovering on the tree node. By using this code, you can override the TreeView component styles.

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

    background-color: green;

}

Please follow our suggested way and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj