Slider colors and background

On Apr 5, 2018, at 05:02, beezerlm <beezerlm@netzero.net> 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 bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
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\.

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 beez...@netzero.net 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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.

On Apr 5, 2018, at 05:59, beezerlm beezerlm@netzero.net 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 beez...@netzero.net 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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 bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

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.

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 beez...@netzero.net 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 beez...@netzero.net 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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.

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 beez...@netzero.net 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 beez...@netzero.net 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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.

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 beez...@netzero.net 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 beez...@netzero.net 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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.