Styling widgets with css

Community Support
1

Hi!

I am developing an app and I am a bit lost on how to style widgets from CSS. I have followed a few questions posted here but it seems that the custom CSS I am calling still does not overwrite the class used in the generated page. At this point I need to mention my ignorance with CSS.

For instance, I create a RangeSlider with css_classes =['sliderCSS'], which I define in styles.css as:

.sliderCSS .bk-noUi-connect .bk-noUi-draggable {
    background-color: #5DADE2; 
}

This does not change the color of the bar of the slider, and when I inspect the element I see that the sliderCSS class is applied but the background color remains grey:

Screenshot 2020-04-17 at 11.04.49 AM
Screenshot 2020-04-17 at 11.04.49 AM1642×316 71.3 KB

Is there something obvious I am missing?

Thanks a lot!

2

That’s likely because of Specificity - CSS: Cascading Style Sheets | MDN

3

Thanks! Is there a way to overwrite that in Bokeh? I was firstly using the .yml file but I could not find a way to access widget’s properties. Is it possible?

4

If that’s indeed the CSS specificity that’s to blame then you can fix the issue by providing a more specific CSS selector for the background color than Bokeh does. No need to do anything else.

5

I removed the specific css_class and changed

.sliderCSS .bk-noUi-connect .bk-noUi-draggable {
    background-color: #5DADE2; 
}

by

.bk-root .bk-noUi-draggable {
    background-color: #5DADE2 !important; 
}

Which seems to fix the problem. Thanks for the enlightening tip!