Apply css_classes to the actual element

Panel
#1

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?

#2

@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 buttons, 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

#3

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:

image
image1213×546 84 KB

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
#4

@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:

Screen Shot 2021-01-26 at 1.23.36 PM
Screen Shot 2021-01-26 at 1.23.36 PM1454×286 39.4 KB

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:

Screen Shot 2021-01-26 at 1.22.57 PM
Screen Shot 2021-01-26 at 1.22.57 PM1458×270 46.8 KB

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
#5

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

1 Like