Slider colors and background

Community Support
1

I just discovered bokeh and I am building my first report. I can’t find a way to change the DateRangeSlider color theme other than the “bar_color” attribute? I would like to make the slider at the top of my report match the dark theme I created for the rest of the report. I read some things about using Javascript for further customization, but I am not very familiar with Javascript so I was wondering if there was a way to achieve this in python?

2

Hi,

Is this a standalone Bokeh plot, or is this a Bokeh server application? The slider is a DOM element that Bokeh wraps, so it will have to be styled by targeting its CSS rules.

Thanks,

Bryan

···

On Apr 5, 2018, at 05:02, beezerlm <[email protected]> wrote:

I just discovered bokeh and I am building my first report. I can't find a way to change the DateRangeSlider color theme other than the "bar_color" attribute? I would like to make the slider at the top of my report match the dark theme I created for the rest of the report. I read some things about using Javascript for further customization, but I am not very familiar with Javascript so I was wondering if there was a way to achieve this in python?

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/763fd797-986f-4733-9d23-bb3a18e2a0d9%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

3

Thanks for the quick reply Bryan.

This is a Bokeh server app. I have no experience with CSS. Are there any tutorials regarding the use off CSS for a bokeh app?

···

On Thursday, April 5, 2018 at 8:08:56 AM UTC-4, Bryan Van de ven wrote:

Hi,

Is this a standalone Bokeh plot, or is this a Bokeh server application? The slider is a DOM element that Bokeh wraps, so it will have to be styled by targeting its CSS rules.

Thanks,

Bryan

On Apr 5, 2018, at 05:02, beezerlm [email protected] wrote:

I just discovered bokeh and I am building my first report. I can’t find a way to change the DateRangeSlider color theme other than the “bar_color” attribute? I would like to make the slider at the top of my report match the dark theme I created for the rest of the report. I read some things about using Javascript for further customization, but I am not very familiar with Javascript so I was wondering if there was a way to achieve this in python?

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/763fd797-986f-4733-9d23-bb3a18e2a0d9%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

4

Hi,

Check out the crossfilter example app under examples/app in the GitHub repo. It demonstrates how to use a template with custom CSS.

Thanks,

Bryan

···

On Apr 5, 2018, at 05:59, beezerlm [email protected] wrote:

Thanks for the quick reply Bryan.

This is a Bokeh server app. I have no experience with CSS. Are there any tutorials regarding the use off CSS for a bokeh app?

On Thursday, April 5, 2018 at 8:08:56 AM UTC-4, Bryan Van de ven wrote:

Hi,

Is this a standalone Bokeh plot, or is this a Bokeh server application? The slider is a DOM element that Bokeh wraps, so it will have to be styled by targeting its CSS rules.

Thanks,

Bryan

On Apr 5, 2018, at 05:02, beezerlm [email protected] wrote:

I just discovered bokeh and I am building my first report. I can’t find a way to change the DateRangeSlider color theme other than the “bar_color” attribute? I would like to make the slider at the top of my report match the dark theme I created for the rest of the report. I read some things about using Javascript for further customization, but I am not very familiar with Javascript so I was wondering if there was a way to achieve this in python?

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/763fd797-986f-4733-9d23-bb3a18e2a0d9%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/a2cedd72-719e-4afb-949c-539358d1882e%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

5

Hi, here is an example:

folderapp/main.py :

from bokeh.models import Slider
from bokeh.io import curdoc

slider = Slider(start=0,end=10,step=1,value=0,css_classes=[“custom_slider”])

curdoc().add_root(slider)

``

folderapp/templates/styles.css :

.custom_slider {
background-color: black;
color: white;
width: 200px;
}

.custom_slider .bk-noUi-target{
background:lightblue;
}

.custom_slider .bk-noUi-connect {
background-color: blue !important;
}

.custom_slider .bk-noUi-handle {
background:orange;
}

``

folderapp/templates/index.html :

{{ bokeh_css }} {{ bokeh_js }} {% include 'styles.css' %} {{ plot_div|indent(8) }} {{ plot_script|indent(8) }}

``

To figure out how to call each component just display the widget and inspect the document with the browser console, when you mouse over the html components in the console they get highlighted in the browser.

···

Le jeudi 5 avril 2018 11:21:20 UTC-4, Bryan Van de ven a écrit :

Hi,

Check out the crossfilter example app under examples/app in the GitHub repo. It demonstrates how to use a template with custom CSS.

Thanks,

Bryan

On Apr 5, 2018, at 05:59, beezerlm [email protected] wrote:

Thanks for the quick reply Bryan.

This is a Bokeh server app. I have no experience with CSS. Are there any tutorials regarding the use off CSS for a bokeh app?

On Thursday, April 5, 2018 at 8:08:56 AM UTC-4, Bryan Van de ven wrote:

Hi,

Is this a standalone Bokeh plot, or is this a Bokeh server application? The slider is a DOM element that Bokeh wraps, so it will have to be styled by targeting its CSS rules.

Thanks,

Bryan

On Apr 5, 2018, at 05:02, beezerlm [email protected] wrote:

I just discovered bokeh and I am building my first report. I can’t find a way to change the DateRangeSlider color theme other than the “bar_color” attribute? I would like to make the slider at the top of my report match the dark theme I created for the rest of the report. I read some things about using Javascript for further customization, but I am not very familiar with Javascript so I was wondering if there was a way to achieve this in python?

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/763fd797-986f-4733-9d23-bb3a18e2a0d9%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/a2cedd72-719e-4afb-949c-539358d1882e%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

1 Like
6

Awesome thanks! I will give this a shot.

···

On Thursday, April 5, 2018 at 1:33:50 PM UTC-4, Sébastien Roche wrote:

Hi, here is an example:

folderapp/main.py :

from bokeh.models import Slider
from bokeh.io import curdoc

slider = Slider(start=0,end=10,step=1,value=0,css_classes=[“custom_slider”])

curdoc().add_root(slider)

``

folderapp/templates/styles.css :

.custom_slider {
background-color: black;
color: white;
width: 200px;
}

.custom_slider .bk-noUi-target{
background:lightblue;
}

.custom_slider .bk-noUi-connect {
background-color: blue !important;
}

.custom_slider .bk-noUi-handle {
background:orange;
}

``

folderapp/templates/index.html :

{{ bokeh_css }} {{ bokeh_js }} {% include 'styles.css' %} {{ plot_div|indent(8) }} {{ plot_script|indent(8) }}

``

To figure out how to call each component just display the widget and inspect the document with the browser console, when you mouse over the html components in the console they get highlighted in the browser.

Le jeudi 5 avril 2018 11:21:20 UTC-4, Bryan Van de ven a écrit :

Hi,

Check out the crossfilter example app under examples/app in the GitHub repo. It demonstrates how to use a template with custom CSS.

Thanks,

Bryan

On Apr 5, 2018, at 05:59, beezerlm [email protected] wrote:

Thanks for the quick reply Bryan.

This is a Bokeh server app. I have no experience with CSS. Are there any tutorials regarding the use off CSS for a bokeh app?

On Thursday, April 5, 2018 at 8:08:56 AM UTC-4, Bryan Van de ven wrote:

Hi,

Is this a standalone Bokeh plot, or is this a Bokeh server application? The slider is a DOM element that Bokeh wraps, so it will have to be styled by targeting its CSS rules.

Thanks,

Bryan

On Apr 5, 2018, at 05:02, beezerlm [email protected] wrote:

I just discovered bokeh and I am building my first report. I can’t find a way to change the DateRangeSlider color theme other than the “bar_color” attribute? I would like to make the slider at the top of my report match the dark theme I created for the rest of the report. I read some things about using Javascript for further customization, but I am not very familiar with Javascript so I was wondering if there was a way to achieve this in python?

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/763fd797-986f-4733-9d23-bb3a18e2a0d9%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/a2cedd72-719e-4afb-949c-539358d1882e%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

7

That was exactly what I needed. It worked great. Thanks for the help!

···

On Thursday, April 5, 2018 at 1:33:50 PM UTC-4, Sébastien Roche wrote:

Hi, here is an example:

folderapp/main.py :

from bokeh.models import Slider
from bokeh.io import curdoc

slider = Slider(start=0,end=10,step=1,value=0,css_classes=[“custom_slider”])

curdoc().add_root(slider)

``

folderapp/templates/styles.css :

.custom_slider {
background-color: black;
color: white;
width: 200px;
}

.custom_slider .bk-noUi-target{
background:lightblue;
}

.custom_slider .bk-noUi-connect {
background-color: blue !important;
}

.custom_slider .bk-noUi-handle {
background:orange;
}

``

folderapp/templates/index.html :

{{ bokeh_css }} {{ bokeh_js }} {% include 'styles.css' %} {{ plot_div|indent(8) }} {{ plot_script|indent(8) }}

``

To figure out how to call each component just display the widget and inspect the document with the browser console, when you mouse over the html components in the console they get highlighted in the browser.

Le jeudi 5 avril 2018 11:21:20 UTC-4, Bryan Van de ven a écrit :

Hi,

Check out the crossfilter example app under examples/app in the GitHub repo. It demonstrates how to use a template with custom CSS.

Thanks,

Bryan

On Apr 5, 2018, at 05:59, beezerlm [email protected] wrote:

Thanks for the quick reply Bryan.

This is a Bokeh server app. I have no experience with CSS. Are there any tutorials regarding the use off CSS for a bokeh app?

On Thursday, April 5, 2018 at 8:08:56 AM UTC-4, Bryan Van de ven wrote:

Hi,

Is this a standalone Bokeh plot, or is this a Bokeh server application? The slider is a DOM element that Bokeh wraps, so it will have to be styled by targeting its CSS rules.

Thanks,

Bryan

On Apr 5, 2018, at 05:02, beezerlm [email protected] wrote:

I just discovered bokeh and I am building my first report. I can’t find a way to change the DateRangeSlider color theme other than the “bar_color” attribute? I would like to make the slider at the top of my report match the dark theme I created for the rest of the report. I read some things about using Javascript for further customization, but I am not very familiar with Javascript so I was wondering if there was a way to achieve this in python?

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/763fd797-986f-4733-9d23-bb3a18e2a0d9%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/a2cedd72-719e-4afb-949c-539358d1882e%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.