CODEWITHSUNDEEP
cssbokehpython-3.7
Sibghat Shah
Sibghat Shah

Reputation: 21

Adding custom styling to Bokeh Tabs widget

Is there a way to add custom styling to the bokeh tabs widget, Specifically I want to change the font size and color for title property under each Panel widget. I have tried a variety of different ways to add styling to the tabs widget on the project I am working on but nothing seems to work. I have tried with this approach Change style of tabs in bokeh plot, https://discourse.bokeh.org/t/change-design-of-tab-panes/2767/7, and none of the approaches seem to work. I have also tired to use css classes but it seems that they don't work with the Tabs widget.

I preferably would like to keep the current structure of the project; which in this case is just a singular python file that imports different classes pertaining to the project. I was wondering if it's better to refactor the code for this Bokeh app so that it works with an index.html and styles.css page or if it would be better to use a different approach.

I have attached the code block below:

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"))

EDIT: I have also tried the following code snippets that use css_classes but they don't display anything when I call bokeh serve --show app.py.

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 %}
"""]))

Upvotes: 1

Views: 2934

Answers (3)

Sibghat Shah
Sibghat Shah

Reputation: 21

Solved by doing the following 

  divTemplate = Div(text="""
            <style>
            .bk.sent-later {
                font-size: 20px;
            }
            </style>
    """)
    tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0])
    tabs.css_classes.append('sent-later')

Upvotes: 1

Eugene Pakhomov
Eugene Pakhomov

Reputation: 10727

I preferably would like to keep the current structure of the project; which in this case is just a singular python file

This is possible but the code will become so convoluted and unreliable that it's not worth it.

I was wondering if it's better to refactor the code for this Bokeh app so that it works with an index.html and styles.css page

Yes, that's exactly the intended usage of directory applications (as opposed to single file applications).

or if it would be better to use a different approach.

It's up to you to decide what's better, but you can definitely write a single file application for this case. The issue is that you will have to manually do all the scaffolding that bokeh serve does for you. As a consequence, you will also have to run your app as just python app.py.

Upvotes: 0

austintpg
austintpg

Reputation: 23

The solution in the first link you added (enter link description here) worked for me. I had to include the {% block postamble %} ... {% endblock %} at the very end of the header of the Django template base.html. I also managed to make it work with Jupyter. How did you applied the solution in that post?

Upvotes: 0

Related Questions