Button formatting

[paul_c]

@Alex_Kolby @mateusz

Help to understand how CSS styling is applied in bokeh

Hello, I am currently trying to understand how CSS styling can be applied to a bokeh server. After reading the documentation it seems like objects can be assigned a css class through the css_classes argument and then CSS code can be created in a GlobalInlineStyleSheet. I have searched the forum here but cannot seem to find a simple example explaining how to apply it. I have included an example where i would like to change the styling of a button. When serving this file and inspecting elements…

This seems to add formatting around the button, but not to the button itself. How do I change the colour of the button?

Thanks

[Bryan]

Please provide an actual complete Minimal Reproducible Example of the code you are trying that is not working how you expect.

[paul_c]

the screenshot is produced by the code provided in the answer by @mateusz that I referenced.

from bokeh.layouts import layout
from bokeh.io import show
from bokeh.models import Button, InlineStyleSheet

style = InlineStyleSheet(css="""
:host(.custom_button_1) {
    background-color: lightblue;
    font-weight: bold;
    color:navy;
    border-style:solid;
    border-width: 10px;
    border-color:navy;
}
""")

button = Button(label = 'hello', stylesheets = [style], css_classes = ['custom_button_1'])

main = layout(button)
show(main)

I was asking how to format the white box around ‘hello’

[nmasnadi]

I don’t know much about how CSS works, but using .bk-btn seems to fix it:

from bokeh.layouts import layout
from bokeh.io import show
from bokeh.models import Button, InlineStyleSheet

style = InlineStyleSheet(css="""
.bk-btn {
    background-color: lightblue;
    font-weight: bold;
    color:navy;
    border-style:solid;
    border-width: 10px;
    border-color:navy;
}
""")

button = Button(label = 'hello', stylesheets = [style])

main = layout(button)
show(main)

[Bryan]

@mateusz is it a regression or an intended change that the css_classes approach does not seem to work as it did earlier?