向Bokeh Tabs小部件添加自定义样式

Question

是否可以将自定义样式添加到bokeh选项卡小部件，特别是我想更改每个Panel小部件下title属性的字体大小和颜色。我尝试了多种不同的方式将样式添加到我正在处理的项目的tabs小部件中，但是似乎没有任何效果。我已经尝试过这种方法Change style of tabs in bokeh plot，https://discourse.bokeh.org/t/change-design-of-tab-panes/2767/7，但似乎没有一种方法可行。我也已经厌倦了使用CSS类，但似乎它们不能与Tabs小部件一起使用。

我最好保持项目的当前结构；在这种情况下，它只是一个单一的python文件，该文件导入与项目有关的不同类。我想知道为这个Bokeh应用程序重构代码是否更好，使其与index.html和styles.css页面一起使用，还是最好使用其他方法。

我在下面附加了代码块：

from bokeh.models import (
    TextInput,
    Button,
    Paragraph,
    Div,
)
from bokeh.models import (
    Label,
    FileInput,
    Select,
    CheckboxGroup,
    Panel,
    Tabs,
    RangeTool,
    CustomJS,
)
from bokeh.plotting import show, figure, curdoc
from bokeh.models import ColumnDataSource,
from bokeh.layouts import layout, column, row
from bokeh.models.widgets import (
    DataTable,
    DateFormatter,
    TableColumn,
    HTMLTemplateFormatter,
)
from bokeh.models.widgets import Div

from tornado import gen
from functools import partial



   # Layout
    tab_dashboard = Panel(
        child=layout(
            [
                column(select_site, div_value),
                [div1, div2, div3, div4],
                data_table,
                button_download,
            ],
        ),
        title="Export",
    )
    tab_import = Panel(
        child=layout(
            [
                [column(Div(text="Upload CSV file"), button_upload, div_value)],
                [div1, div2, div3, div4],
                data_table,
                button_import,
            ],
        ),
        title="Import",
    )

    tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0])
    # add the layout to curdoc
    doc.add_root(layout(textStatus, tabs, sizing_mode="stretch_both"))

我还尝试了以下代码片段，当我尝试使用css_classes时，我也尝试过这些代码片段也引发了错误。

tab_import = Panel(
        child=layout(
            [
                [column(Div(text="Upload CSV file"), button_upload, div_value)],
                [div1, div2, div3, div4],
                data_table,
                button_import,
            ],

        ),
        title="Import",
    )
    tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0], css_classes=["""
{% block postamble %}
<style>
.bk-root .bk-tab {
    background-color: cyan;
    width: 200px;
    color: red;
    font-style: italic;
}
.bk-root .bk-tabs-header .bk-tab.bk-active{
background-color: yellow;
color: blue;
font-style: normal;
font-weight: bold;
}
.bk-root .bk-tabs-header .bk-tab:hover{
background-color: yellow
}
</style>
{% endblock %}
"""])
    # add the layout to curdoc
    doc.add_root(layout(textStatus, tabs, sizing_mode="stretch_both"))

tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0])
    # add the layout to curdoc
    doc.add_root(layout(textStatus, tabs, sizing_mode="stretch_both", css_classes=["""
{% block postamble %}
<style>
.bk-root .bk-tab {
    background-color: cyan;
    width: 200px;
    color: red;
    font-style: italic;
}
.bk-root .bk-tabs-header .bk-tab.bk-active{
background-color: yellow;
color: blue;
font-style: normal;
font-weight: bold;
}
.bk-root .bk-tabs-header .bk-tab:hover{
background-color: yellow
}
</style>
{% endblock %}
"""]))

Answer 1

您添加的第一个链接（enter link description here）中的解决方案对我有用。我必须在Django模板base.html标题的末尾添加{％block postamble％} ... {％endblock％}。我还设法使其与Jupyter一起使用。您如何在该帖子中应用解决方案？