Working minimal example, apply css to TabPanel

Community Support
1

Attempting to modify the font-size of a TabPanel title, have followed other similar topics without success. A minimal example is below.

app
-- main.py
-- templates
---- index.html
---- styles.css

main.py

from bokeh.io import curdoc
from bokeh.models import Tabs, TabPanel
from bokeh.layouts import column

doc = curdoc()
doc.add_root(Tabs(tabs=[
    TabPanel(child=column(), title='tab1'),
    TabPanel(child=column(), title='tab2')]))

index.html

{% extends base %}
{% block contents %}
<style>
  {% include 'styles.css' %}
</style>
{{ super() }}
{% endblock %}

styles.css

.bk-tab {
background-color: red;
}

The app then appears without the red background applied to the tabs.

bokeh serve app --show

2024-03-26_18-44-50
I do see the css code showing up in the page source -

...
    <script type="text/javascript">
        Bokeh.set_log_level("info");
    </script>
  </head>
  <body>

<style>
  .bk-tab {
background-color: red;
}
</style>
    <div id="edce36a3-2f28-442e-92bd-14e41c060ee7" data-root-id="p1005" style="display: contents;"></div>

    <script type="application/json" id="e7c071bf-0465-455b-81a4-ce0a501df462">
...

Any idea what can change to make this all work?
Thank you for the support!

2

In bokeh 3.0 we migrated to “Web Components”, thus CSS of every bokeh’s component is isolated from everything else, and so any custom styles have to be added to components. Most globally defined CSS has no effect on bokeh’s components (except for font definitions, CSS variables, etc.).

You need to do the following:

tabs = Tabs(tabs=[
    TabPanel(child=column(), title='tab1'),
    TabPanel(child=column(), title='tab2'),
])
tabs.stylesheets.append("""
.bk-tab {
  background-color: red;
}
""")

We are currently in process (for bokeh 3.5) of defining a theming mechanism based on CSS variables, which will allow to use a single global stylesheet again.

3

Hi @mateusz that worked, thank you very much for the support and I should have let you know I am using bokeh 3.4. I do like the ability to isolate css by bokeh component and I hope that feature will not be deprecated. I’m also looking forward to progress widgets (here) in bokeh 3.5. If you need advanced testing for bokeh 3.5 please let me know.