Styling widgets between 2.x and 3.x

[comperem]

Hello,

Thank you for your hard work to improve Bokeh.

I’m just now migrating from Bokeh 2.4.2 to the 3.1.0 version.

I’ve worked through code changes but now the visuals of buttons and other widgets are substantially different. It seems each widget needs to be styled independently, hopefully with a common struct.

But it’s not clear.

How can I achieve historical button look and feel with the new 3.x releases?

size and font mainly are the difference as illustrated in this screenshot of both using the basic button example code.

Bokeh 2.4.2 renders as shown on left.

Bokeh 3.1.0 renders the same code on the right. Size and maybe font are different.

How to get back to 2.4.2 settings??? I’ve read styling DOM Elements but it’s not clear how to get back to same look and feel.

my runtime context is server with bokeh serve.

[comperem]

can someone explain the differences between these described here?

Styling DOM elements

(a) Styles and Stylesheets

• Styles seem to be default Bokeh attributes whereas Stylesheets is direct css

(b) InlineStyleSheet and ImportedStyleSheet

• will ‘Imported’ require an internet connection? I’d like everything to run locally without externally connected internet
• will the ‘Global’ versions perhaps render faster (or with less cpu) because the html only has the css listed once?

[Bryan]

@comperem

will ‘Imported’ require an internet connection?

Yes ^[1] Perhaps another way to describe things: The ImportedStylesheet models is a mechanism for adding <link rel="stylesheet" href="${url}"> stylesheets to the page, without having to go to all the effort of a custom template.

will the ‘Global’ versions perhaps render faster

It really probably comes down to specifics. If you have one small stylesheet that would only apply to one widget, I doubt it matters. If you have a large stylesheet that would apply to dozens of widgets, then a global version would make sense.

cc @mateusz

---

1. barring special corner cases, e.g. I suppose the URL could be to localhost, etc. ↩︎