Collapsible - how to set background and color of the title of Collapsible?

[tibor95]

Hi,

I found no way how to manipulate the header/title of Collapsible, the code:

            new_col = Collapsible(*new_widgets, title="Actors:", collapsed=True)
            self.mount(new_col)

So I need manipulate 'Actors:' colors, on the creation of the Collapsible ideally.

Thanks

[TomJGooding]

You can change the CollapsibleTitle style in your CSS or use content markup, depending whether you want to change the colors of the whole title or just its text.

[tibor95]

MARKUP works, I will probably stick with it.

I was also trying this:

Collapsible.error-title  > .title{
    color: red;
}

Collapsible.warning-title  > .title{
    color: yellow;
}

Collapsible.ok-title > .title {
    color: green;
}

and code:

with Collapsible(title=f"Actors [{len(actors_widgets)}]", collapsed=True, id=DetailTextBoxWidget.create_uid(f"{self.asset}_actors"), classes="ok-title"):

no errors, but no effect. But if you have an idea how to make it work...

Thanks anyway

[TomJGooding]

I think the reason your CSS didn't work is because there isn't anything with a title class in this widget?

You could do something like Collapsible.error-title > CollapsibleTitle { color: $error; }, but like I mentioned this will style the whole 'title' including the icon. If you only want to style the text, then using content markup is probably the way to go.

[tibor95]

This works great:

Collapsible.error-title > CollapsibleTitle { color: $error; },

And is much more flexible than markdown, thanks!