When using pn/Button and applying css_classes, the classes are added to the top DIV instead of the actual underlying button element.
This happens in a lot of widgets, and makes it harder to modify css.
Can we apply those classes to the element itself?
@ItamarShDev, one of your other recent questions relates to Jupyter notebooks, but I’m assuming this question is in regards to deploying to the browser with panel serve
?
If you want to change the CSS styling of all button
s, you could consider something like:
import panel as pn
css = '''
button {
...
}
'''
pn.config.raw_css.append(css)
If you post your current code and a the resulting html found in your browser’s developer tools window, I could venture a more specific suggestion.
Best,
Charles
Thank you for the reply!
I know that I can directly change css, but that’s not what I am after.
Suppose you have multiple buttons in an application, and you want to modify one button.
You would probably go for:
pn.extension(raw_css = [
"""
.my-class {
color: teal;
background-color: black;
}
"""])
...
button = pn.widgets.Button(...., css_classes=['new-class'])
...
But, the css class is added to a grandparent of said button.
see:
This makes handling the custom classes harder.
The current css would have no affect.
And now I need to know where the class is applied.
something like:
.my-class button {
color: teal;
background-color: black;
}
this is too specific and beats the purpose of having the ability to add custom classes
Making a general class can be very tedious, and applying the class to the direct widget would help a lot.
2 Likes
@ItamarShDev, Thanks for the additional details.
Here’s an idea. In addition to creating new classes, pn.config.raw_css
can also override existing classes.
Panel provides five built-in button styles, each of which is styled with a distinct (and override-able) CSS class.
For example, a 'primary'
and 'warning'
button would normally render like this:
But if I override the .bk-btn-warning
class as follows…
css = '''
.bk-root .bk-btn-warning {
color: teal;
background-color: black;
}
'''
pn.config.raw_css.append(css)
… then I can force a stylistic change to the 'warning'
button without affecting the 'primary'
button:
This doesn’t unlock infinite possibility, but it does give you the option of five distinct custom buttons styles. (One for each of the five built-in classes.)
Does this help address your use-case? Or am I missing something? I’ll be curious to know either way, and can try to come up with some more solutions if this does not suffice.
Best,
Charles
1 Like
Thank you
I actually already do that.
My question because I have some Buttons that should look a bit different than others.
I will stick to the specific class per widget.
But I still think this issue should be addressed in some way or another because this makes css_classes a bit confusing to use
2 Likes