Override DOM style for Tabs, header level


I have been trying to custom my Tab widget with css_class overriding with it with a style.css as I used to do without previous bokeh versions, although since the 3.0. the same approach does not work. I tried to use css_classes, styles, stylesheet and the only one that worked well was styles which I can pass a dictionary and it overrides the root values.
My problem is that I trying to reach the headers level to change the border-bottom-color, or even border-bottom to 0px.

 :host(.bk-above) .bk-header {
 1. border-bottom: 1px solid #0e0922;
   1. border-bottom-width:1px;
   2. border-bottom-style: solid;
   3. border-bottom-color: rgb(14, 9, 34); }

I inspect the element in the console, I checked the bokeh documentation css_widgets. I have tried a lot of different approaches and I can’t get it to work.

Minimal sample:

from bokeh.models import TabPanel, Tabs
from bokeh.plotting import figure, show


p1, p2 = figure(), figure()

p1.background_fill_color = '#010727'
p1.border_fill_color =  '#010727'
p1.outline_line_color = '#010727'

p2.background_fill_color = '#010727'
p2.border_fill_color =  '#010727'
p2.outline_line_color = '#010727'

tab1 = TabPanel(child=p1, title="Fastest Lap")
tab2 = TabPanel(child=p2, title="Median Lap")

tabs_ = Tabs(tabs=[tab1, tab2], styles={ 'font-size':'15px', 'border-bottom': '0px', 'align':'right', 'header border-bottom-color':'green',  'border-bottom-color':'green', 'background-color':'#010727', 'color':'green'})



This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.