Accordion Styling - would someone share?

Radzen Studio Blazor WebAssembly
1

Hi, I'm not terribly good when I inherit styles from someone else so I'm struggling to get the Accordions to look a little more to my liking. I have a set of nested Accordion, so one for the Topics and one for the content of each.

I just want to be able to control a little more, the color and font size at each level.

This

        <RadzenAccordion Multiple="false">
            <Items>
                @if (_faqTopics != null)
                {
                    foreach (var item in _faqTopics.OrderBy(x => x.DisplayOrder))
                    {
                        <RadzenAccordionItem Text="@(item.Title)" Icon="admin_panel_settings">
                            <RadzenAccordion>
                                <Items>
                                    @if (_faqs != null)
                                    {
                                        foreach (var item in _faqs.OrderBy(x => x.DisplayOrder))
                                        {
                                            <RadzenAccordionItem Text="@(item.Question)" Icon="account_balance_wallet">
                                                @item.Answer
                                            </RadzenAccordionItem>
                                        }
                                    }
                                </Items>
                            </RadzenAccordion>
                        </RadzenAccordionItem>
                    }
                }
            </Items>
        </RadzenAccordion>

And this

.rz-accordion-header .rzi {
    color: #4f4f50 !important;
    font-size: 1.8em !important;
}

.rz-accordion-header a[role='tab'] {
    color: #4f4f50 !important;
    font-size: 1.4em !important;
}

.rz-accordion-content {
    color: #4f4f50 !important;
    font-size: 1.2em !important;
}

Are having very little effect... and it the wrong spots..

image
image1118×338 19.5 KB

2

Hi @TimCadieux,

What are you trying to achieve? I don't see any questions in your post.

3

Sorry, I was just trying to figure the best way to modify the font size / color for the text and icon for both the Top level Accordion and content and then the same, but a bit smaller for the nested accordion.

4

Your CSS works as expected when I test it (the icon and the text are bigger).
image

Make sure you are including the CSS - you can verify what CSS applies via your developer tools:

image
image1580×1540 183 KB