How To Setup Custom Css With Bokeh Serve

How to assign css proprties to a custom class assigned to a widget through css_classes if I'm serving my app through bokeh serve --show? from bokeh.models import Button button = Bu

Solution 1:

If you dont mind using a html template, once you define your css classes, their styles can be set in a css file. (If you want to include the css styles from within python this answer wont help you)

This can be included in the html document either inline or by including an external css file. There are some examples in the bokeh gallery (see below links).

The bokeh application folder structure described in the docs:

https://docs.bokeh.org/en/latest/docs/user_guide/server.html#directory-format

See an example here:

https://github.com/bokeh/bokeh/tree/master/examples/app/gapminder

Here is another application which uses external css:

https://gist.github.com/anthonydouc/c8571f0a2f9aa8415bd566e1ac2ba237

Solution 2:

Here's a simple little workaround until the bokeh maintainers get around to adding a link class to the markup widgets or something similar:

header = Div(text="<linkrel='stylesheet'type='text/css'href='myapp/static/mycss.css'>")
layout = column(header, other_content)
curdoc().add_root(layout)

Note that you must run the app in directory mode, and the css file should be in a folder called static inside the app directory, but you don't need to fiddle with any templating or other stuff.

Solution 3:

Ok, I've got this far:

import os
from bokeh.plottingimport curdoc
from bokeh.modelsimportButtonfrom jinja2 importEnvironment, FileSystemLoader

button = Button(label="Press Me", css_classes=['myclass'])
z = curdoc()
env = Environment(loader=FileSystemLoader(os.getcwd()))
z.template = env.get_template('file.html')
z.add_root(button)

But I have a strong feeling there should be something simpler than that. @bigreddot, could you give me a clue?