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 = Button(label="Press Me", css_classes=['myclass'])
curdoc().add_root(button)

回答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

回答2:

Ok, I've got this far:

import os
from bokeh.plotting import curdoc
from bokeh.models import Button
from jinja2 import Environment, 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?

回答3:

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="<link rel='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.

来源：https://stackoverflow.com/questions/48848485/how-to-setup-custom-css-with-bokeh-serve