Change design of tab panes

Hi Eugene,

so this is a part of my code which I use in order to generate the bokeh-plots by running the python code:

from bokeh.plotting import figure, Figure, output_file, show, ColumnDataSource

from bokeh.models import LinearAxis, Range1d, CustomJS, ColumnDataSource, Slider, FuncTickFormatter

from bokeh.models import HoverTool

from bokeh.layouts import column, widgetbox

from bokeh.models.widgets import RangeSlider

from bokeh.layouts import column

from bokeh.models.widgets import Panel, Tabs

from bokeh.io import output_file, show

···

p_1 = figure (plot_width=1400, plot_height=650, tools=“pan, wheel_zoom, box_zoom, save, reset”, title=“Temperature”)

start_value = df_graph_1.iloc[0, 0]

end_value = df_graph_1.iloc[-1, 0]

p_1.line (df_graph_1.iloc[:, 0], df_graph_1.iloc[:, 7], line_width= 2, legend = “Temperature”, color=“#FF0000”, alpha=1, muted_color=“#FF0000”, muted_alpha=0.15)

p_1.legend.location = “top_left”

p_1.legend.click_policy=“mute”

p_1.xaxis.axis_label = “Time”

p_1.yaxis.axis_label = “Temperature [C]”

tab1 = Panel(child=p_1, title=“Temperature 1”)

p_2 = figure (plot_width=1400, plot_height=650, tools =“pan, wheel_zoom, box_zoom, save, reset”, active_scroll=‘wheel_zoom’, title=“Temperature”)

p_2.line (df_graph_2.iloc[:, 0], df_graph_2.iloc[:,5], line_width= 2, legend = “Temperature”, color=“#880015”, alpha=1, muted_color=“#880015”, muted_alpha=0.15)

p_2.legend.location = “top_left”

p_2.legend.click_policy=“mute”

p_2.xaxis.axis_label = “Uhrzeit”

p_2.yaxis.axis_label = “Temerature [C]”

tab2 = Panel(child=p_2, title=“Temperature 2”)

output_file(“Tabs.html”)

tabs = Tabs(tabs=[tab1, tab2])

show(tabs)

While python generates my HTML (“Tabs.html”) file I would like it to also generate some costum styles to control for instance de background color of the “Tabs.html” page or to change de font-size inside the tabs and so on.
Am I able to implemet this somewhere in my existing python code or do I have to develop an entire app for that with the file stucture provided in the bokeh user’s guide?

On Friday, February 2, 2018 at 2:44:39 PM UTC+1, Eugene Pakhomov wrote:

What plots do you generate? Static, via “bokeh serve”, with a Bokeh Server?

  • Eugene

On Friday, February 2, 2018 at 8:29:53 PM UTC+7, golanu’ de la mare wrote:

Hi Eugene,

thanks for your reply. :slight_smile:

Do you happen to know an online example for this? I’ve been researching this for a while now and don’t seem to find anything relevant.

I would like to write my css code directly in my python code from which I am generating the bokeh-plots.
Is there a clever way of doing this?

Cheers!

On Friday, February 2, 2018 at 6:48:16 AM UTC+1, Eugene Pakhomov wrote:

Hi,

Yes, sure. Just invoke a context menu on some of the tabs and press “Inspect” - you’ll see the DOM tree with all relevant classes (Bokeh classes start with “bk-”) like “bk-bs-nav-tabs” and “bk-bs-active”.

Regards,

Eugene

On Friday, February 2, 2018 at 4:17:30 AM UTC+7, golanu’ de la mare wrote:

Hello there!

Is there a way to change the design of the tabs panes (https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/widgets.html#tab-panes)?
I mean with a css file or something similar?

Thanks!