I would like to change the font_name and font_size of the labels for my checkboxgroup widgets. I know we can change the size(height/width) of the widget but it does not affect the label size.
There is not currently and API to control this. The only means would be to target CSS. You can add CSS classes to the widgets setting the css_classes property on them, then using CSS rules to change the appearance. You could provide a custom output template with your stylesheet to use with file_html or alternatively you should be able to set the css_raw property of the BokehJS resources you are using (inline or cdn) to add CSS rules.
Edit: here is a concrete example of employing css_classes:
I am assuming that the texts should have border and colours. Is that right?
Have you got a screenshot of the output?
I am using Bokeh 2.3.1 and the browser is Microsoft Edge.
@Bryan We tested on Windows + Chrome, Windows + Firefox and Linux Firefox. They all show the same result (no border and background colour). And there is no error displayed on the browser console.
This is the script copied from the link above:
from bokeh.plotting import figure, output_file, show
from bokeh.io import save
from bokeh.layouts import column
from bokeh.models import Div, Paragraph
from bokeh.util.browser import view
template = """
{% block postamble %}
<style>
.bk.custom {
border-radius: 0.5em;
padding: 1em;
}
.bk.custom-1 {
border: 3px solid #2397D8;
}
.bk.custom-2 {
border: 3px solid #14999A;
background-color: whitesmoke;
}
</style>
{% endblock %}
"""
p = Paragraph(text="The divs below were configured with additional css_classes:")
div1 = Div(text="""
<p> This Bokeh Div adds the style classes:<p>
<pre>
.bk.custom {
border-radius: 0.5em;
padding: 1em;
}
.bk.custom-1 {
border: 3px solid #2397D8;
}
</pre>
""")
div1.css_classes = ["custom", "custom-1"]
div2 = Div(text="""
<p> This Bokeh Div adds the style classes:<p>
<pre>
.bk.custom {
border-radius: 0.5em;
padding: 1em;
}
.bk.custom-2 {
border: 3px solid #14999A;
background-color: whitesmoke;
}
</pre>
""")
div2.css_classes = ["custom", "custom-2"]
#output_file("css_classes.html", title="css_classes", mode='inline')
#show(column(p, div1, div2), template=template)
save(column(p, div1, div2), template=template)
view("css_classes.html", new='tab')
Unfortunately I cannot attach the html file produce by the script.
I copied the exact code in the link above. Did I need to change anything?
I am quite supprise that it does not work neither o Windows and Linux!
@Bryan ok I have updated my bokeh from 2.31 to 2.3.2 and it looks ok.
Before closing this discussion I would like to make it work for my original issue (change font-size and front-colour of the labels of the checkboxgroup widgets).
Thanks for your help. I let you know how I went this the checkboxgroup widgets
@Bryan, how can I achieve this solution on a bokeh server? I need to set this template after the server has started (on the fly). The “Document” class has a property “Template”, can it be used for that purpose? Or this property is set when the server fired up using the index.html file in the folder Template?
I just went through this process as well → Conditional Colouring of Checkbox Group background - #7 by gmerritt123 There are some working examples in here. For the most part I think the new set up (using stylesheet models) is a lot nicer but yeah will take a bit of work to bring my existing stuff in line with it.
@gmerritt123 , I tried to follow the examples you mentioned but I cannot achieve what I like to. I would like to change the colour of the “checkboxgroup” text (label). Have you got any idea how I could achieve it.
Thanks
