Bokeh server change style and css

Community Support
1

I’m serving up some bokeh servers using Panel. Anyway, I want to change the color of a button, but I can only find a way to do that if I’m serving up the plots in an html file I have, but how do I do it when running a bokeh server?

Here’s the solution I found if I wasn’t running a bokeh server

So basically, is it possible to add my own custom css to overwrite the bokeh.min stuff if I’m running the bokeh apps and elements in a bokeh server?

2

Do you mean having a custom css while serving using bokeh serve --show ? If that so, answer is same as mentioned on the link you provided.
Create a new folder called templates and place them as mentioned in the stack overflow answer

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

Inside index.html, insert following

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            body {}
        </style>
        <meta charset="utf-8">
        {{ bokeh_css }}
        {{ bokeh_js }}
        <style>
             {% include 'styles.css' %}
        </style>
        <div class="content">
        </div>
    </head>
    <body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
    </body>

</html>

Inside styles.css, insert the following

.bk-root .bk-btn-default {
    color: black;
    font-size:10pt;
    background-color: #05b7ff;
    border-color: #05b7ff;
}

When you run myapp (or the folder containing main.py), you’d have the color of button changed to #05b7ff

Thanks.

2 Likes