How do I use CSS to modify Panel widgets' style like fontsize and color?

Panel
1

https://panel.holoviz.org/reference/widgets/RadioBoxGroup.html#widgets-gallery-radioboxgroup

I want to increase the fontsize. Probably CSS?

2 
import panel as pn

css = """
.bk.bk-input-group label.bk span.bk {
  background-color: lightgray;
  color: red;
  font-size: 250%;
}
"""
pn.extension(raw_css=[css])

pn.widgets.RadioBoxGroup(options=['a', 'b'])

image

the CSS tags are from browser console.

  1. First right click, inspect image
  2. Use the element select tool image
  3. Click on the element you want to edit image
  4. Read from the console what the tags are
    image
    image750×57 3.38 KB
  5. use that to construct your CSS:
css = """
.bk.bk-input-group label.bk span.bk {
  background-color: lightgray;
  color: red;
  font-size: 250%;
}
  1. Google CSS style keywords

I think this should be documented somewhere

5 Likes
3

A more complex example:

image
image666×784 123 KB

  1. Ignore div
  2. Prefix with periods if there’s a div prefix
  3. Add spaces in between
.bk.card .bk.card-header .bk.card-header-row .bk.card-title .bk.bk-clearfix {
    font-size: 2em;
}
4

Hi all,

I have been trying to get the different widgets to behave according to different custom css I have defined but it is not working as expected.

This is the example I used:
import panel as pn
pn.extension()
css = ‘’’
.bk.panel-widget-box {
background: #f0f0f0;
border-radius: 5px;
border: 1px black solid;
font-size: 8px;
}
‘’’
pn.extension(raw_css=[css])
pn.Column(
pn.widgets.FloatSlider(name=‘Number’, margin=(10, 5, 5, 10)),
pn.widgets.Select(name=‘Fruit’, options=[‘Apple’, ‘Orange’, ‘Pear’], margin=(0, 5, 5, 10)),
pn.widgets.Button(name=‘Run’, margin=(5, 10, 10, 10)),
css_classes=[‘panel-widget-box’])

All the components get adjusted to the 8px font-size but the button.
In other to get the button to have different font-size by trial and error :

“”" it is requiered that both .bk-root .bk-btn are included in the definition “”"
css_f= “”"
.bk-root .bk-btn {
font-size: 8px;
}
“”"

pn.extension(raw_css=[css, css_f])
pn.Column(
pn.widgets.FloatSlider(name=‘Number’, margin=(10, 5, 5, 10)),
pn.widgets.Select(name=‘Fruit’, options=[‘Apple’, ‘Orange’, ‘Pear’], margin=(0, 5, 5, 10)),
pn.widgets.Button(name=‘Run’, margin=(5, 10, 10, 10), css_classes=[‘btn’]),
css_classes=[‘panel-widget-box’])

I know… too much guessing, my fault. Anyhow it is good to mention that even though it works for this example it didn’t scale up for a more complex UI with multiple buttons, TextInputs, etc., meaning that I have no control over individual widget font-sizes…
What am I doing wrong? Some suggestion?
Thanks in advance

5

Each widget has its own unique CSS label so you’ll have to adjust each one painstakingly if I’m not mistaken. Maybe panel could expose it as a keyword arg so users don’t have to look into CSS.

6

Thanks for your reply.
Disclaimer, I am new to CSS, JS, and HTML. My fault. Maybe this is my reason for loving Panel.

My problem is not related to any painful task, my problem is related to why in some cases the ccs_class work for some widgets and not for others. Back to my comment, following the available documentation, I have tried a simple example. My conclusion was that the button widget does not care about the custom CSS I have provided through css_classes but from my observations the other tested widgets work fine.

To get some inside about how to solve the problem I deep into inspecting the generated code using Chrome, and I saw that the button class has two definitions .bk-root .bk-btn. I you see in my example, I have included a new definition and tested and it worked. But as usual new problems arose, some of the components got the same definition and some others like TextInput ignored it. I thought the problem was a result of including .bk-root in the definition thinking that I was overriding something on the predefined CSS from Panel. When I removed the .bk-root definition, button widgets ignored again the css_classes.

When I initially wrote this comment, I was looking for information about how to use css_classes for modifying only some CSS definitions in the widgets, e.g. size-font. But as you may appreciate I am also looking to understand how to make predictable using css_class with widgets.
Any advice about how to proceed from this point on will be appreciated. Am I arising my concerns in the right place…? Maybe I place my concerns in the wrong place so my apologies if I am distracting you.
Thanks in advance.