How can the font size of the title of Tabs be changed?

I had posted a similar question How can the font size of a widget obect be changed? which had been sloved. I also tried to change the title of Tabs using the same solution, but it seems not effective.

My folder structure is as same as the posted issue How can the font size of a widget obect be changed?.

myapp
|
+--main.py
+--Templates
   |
   +--index.html
   +--styles.css

main.py

from bokeh.io import curdoc
from bokeh.models import Div, Paragraph, Select, Button, RadioButtonGroup, Column
from bokeh.models import Panel, Tabs
from bokeh.plotting import figure

select_data = Select(title = 'Select Data', value = 'example_1', options = ['example_1', 'example_2'])

btng_norm = RadioButtonGroup(labels=['center', 'scale'], css_classes=['btn_style'], active=1)

tab = []
for shiftId in range(3):
	shiftName = "Monday"
	if shiftId == 1:
		shiftName = "Sunday"
	elif shiftId == 2:
		shiftName = "Saturday "
	emptyFig = figure()
	panel = Panel(child=emptyFig, title=shiftName)
	tab.append(panel)
tabs = Tabs(tabs=tab, css_classes=['btn_style'])
tabs.active = 1

menu_dataset = Column(select_data, Div(text="""Preprocess Data""", css_classes=['missing_labels']), btng_norm, Div(text="""Analyse Data""", css_classes=['missing_labels']), tabs, name='menu_dataset', width=250)

curdoc().add_root(menu_dataset)

styles.css

.missing_labels {
	color: #83329F !important;
    font-weight: bold !important;
	font-size: 30px !important;
    display: inline-block !important;
}

.pad {
    padding-bottom: 80px !important;
	font-size: 30px !important;
}

.bk-root .btn_style .bk-btn-default {
    border-color: #adadad !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
	font-size: 20px !important;
}

.bk-root .btn_style .bk-btn-default:hover {
    border-color: #adadad !important;
	font-size: 30px !important;
}

.bk-root .btn_style .bk-btn:active {
    background-color: #2F329F !important;
	font-size: 30px !important;
	/*background-color: #f5f5f5 !important;*/
    /*box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
        <style>
             {% include 'styles.css' %}
        </style>
  </head>
  <body>

{% extends base %}
{% block contents %}

<div class='panel'>
    <p class='axs'>DATA</p><hr><br />
    {{ embed(roots.menu_dataset) }}
</div>

{% endblock %}
</body>
</html>

The result page is as follows.

image654×669 24.5 KB

@yvechang In cases like this you will need to open a browser DOM element explorer to learn what CSS targets to use. Offhand, it looks like <div class="bk bk-tab"> is the relevant target.

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