Styling for Slider widgets

Community Support
1

HI,
I am having difficulty correctly styling slider widgets in 12.3. My app is running on a server from a directory (“bokeh serve —show myapp.dir”). I am using a theme.yaml and styling in the index.html to set colors and such. This is based directly off the “crossfilter” gallery example.

My trouble is that the “style" tags in the html will set the font color for the slider label but not the value. See the attached screen cap. I really want this entire app to sit on a black background, but there appears to be no way to set the slider value to black along with the rest of the text. Any advice?

Thanks,

JT

<head>

    <style>

        @import url([https://fonts.googleapis.com/css?family=Helvetica](https://fonts.googleapis.com/css?family=Helvetica));

        body {

          font-family: 'Helvetica', sans-serif;

          -webkit-font-smoothing: antialiased;

          text-rendering: optimizeLegibility;

          color: #F00;

          background: #FFFFFF;

         }

    </style>

    <meta charset="utf-8">

    <title>Bokeh Crossfilter Example</title>

    {{ bokeh_css }}

    {{ bokeh_js }}

</head>

2

Hey, since I had tried to work out a similar question (coming from a background of remembering little about css), I’ll point out that you should be able to override any of bokeh’s default styling with appropriate css selectors, keeping in mind that css gives higher priority to selectors which are more strict. Your browser’s developer console should give you full information about which css selectors are being applied to style each html element.

In your case, the browser’s default styling for input elements takes precedence over the font color set in the tag. Its thus sufficient to add a CSS selector like the following to your index.html:

.bk-slider-parent input[type=“text”] {
color: #F00;
}

Best, Andy

···

On Sunday, December 18, 2016 at 9:14:43 AM UTC-5, Jason Tumlinson wrote:

HI,
I am having difficulty correctly styling slider widgets in 12.3. My app is running on a server from a directory (“bokeh serve —show myapp.dir”). I am using a theme.yaml and styling in the index.html to set colors and such. This is based directly off the “crossfilter” gallery example.

My trouble is that the “style" tags in the html will set the font color for the slider label but not the value. See the attached screen cap. I really want this entire app to sit on a black background, but there appears to be no way to set the slider value to black along with the rest of the text. Any advice?

Thanks,

JT

<head>

    <style>

        @import url([https://fonts.googleapis.com/css?family=Helvetica](https://fonts.googleapis.com/css?family=Helvetica));

        body {

          font-family: 'Helvetica', sans-serif;

          -webkit-font-smoothing: antialiased;

          text-rendering: optimizeLegibility;

          color: #F00;

          background: #FFFFFF;

         }

    </style>

    <meta charset="utf-8">

    <title>Bokeh Crossfilter Example</title>

    {{ bokeh_css }}

    {{ bokeh_js }}

</head>