Changing font size in widget and tabs

Community Support
1

Hi guys,

I’m new to Bokeh and I’d like to modify the font size of the tab titles and also the title and options of a Selection widget.

I’d really appreciate a step-by-step solution.

Thank you,

Lorenzo Cesconetto.

2

Hello,

Here is how you do it with a bokeh folder app. I still use bokeh 0.12.10 and I believe only the synthax of the index.html file should have changed since then for this example

myapp/main.py

from bokeh.io import curdoc
from bokeh.models import Select,Tabs,Panel
from bokeh.layouts import gridplot
from bokeh.plotting import figure

select = Select(title=‘Title’,options=[‘option 1’,‘option 2’],css_classes=[‘custom_select’])

fig = figure()

grid = gridplot([[fig,select]])

tabs = Tabs(tabs=[Panel(child=grid,title=‘First panel’),Panel(child=figure(),title=‘Second panel’)],css_classes=[‘custom_tab’])

curdoc().add_root(tabs)

``

myapp/templates/index.html

{{ bokeh_css }} {{ bokeh_js }} {% include 'styles.css' %} {{ plot_div|indent(8) }} {{ plot_script|indent(8) }}

``

myapp/templates/styles.css

.custom_tab .bk-bs-nav-tabs span {
font-size: 50pt;
font-family: “Centaur”;
font-style: italic;
}

.custom_tab .bk-bs-nav-tabs>li>span {
color:lightblue;
}

.custom_tab .bk-bs-nav-tabs>li.bk-bs-active>span {
color:navy;
}

.custom_select label {
font-size:30pt;
font-weight:bold;
color:hotpink;
}

.custom_select select {
color:green;
font-weight:bold;
}

``

You run this from the parent directory of myapp with the command “bokeh serve --show myapp”

Here you can see I have given a “custom_tab” and “custom_select” attribute to the Tabs and Select widgets. This allows you to reference the widgets from the css file (and to do so for differently for different Tabs or different Select widgets if you set different class names for them)

Then you need to know to add the bk-bs-nav-tabs to reference the the tabs, to do this I just make the regular tab first with the css_classes and an empty styles.css file. Then in the browser console I inspect the widget structure (you can find it quickly with document.getElementbyClassName(“custom_tab”) in the console).

Here I set the font size and style for all panels, and then I set a different color for the selected and non selected tabs.

I also showed how to set the css for the select widget title and options.

1 Like