Panel - Is it possible to customize the background color, text colors of the active and inactive tabs' tags

Panel
,
1

Is it possible to change the color themes of the active and inactive tabs’ tags? For example, it is possible to change the inactive tabs’s tag with grey background, while keep the active tab’s tags with white background, but bold and change the text color of the text of the active tab’s tag? Please see the screenshot below for the tabs in Excel spreadsheet.

For multiple inactive tabs, is it possible to add boundary lines for each tab’s tag?

Also, instead of having a gray stripe on top of the active tab’s tag, it is possible to change the color of the the top stripe of the active tab’s tag.

Excel:
image

Thanks!

2

Below is a screenshot of tab’s tags from Panel.

Panel:

image
image1115×88 5.5 KB

3

You can use custom CSS to style almost anything, e.g. to style inactive tabs you’d do:

import panel as pn
css = """
.bk.bk-tab:not(bk-active) {
  background-color: lightgray;
  color: white;
}
"""
pn.extension(raw_css=[css])
2 Likes
6

Thanks, Philipp. It works. Where could I get all the properties of css for different widgets in Panel, if I would like to customize them later?

7

For example, “not(bk-active)” is for inactive tabs, how about if I would like to change the color, boldness, etc. for active tabs? Thanks again!

8

So the best way is simply to use your browser’s console and tweak the CSS there and also read up on CSS selectors a little bit. For active tabs you simple change the selector a bit:

import panel as pn
css = """
.bk.bk-tab.bk-active {
  background-color: lightgray;
  color: white;
}
"""
pn.extension(raw_css=[css])
9

Thanks, Philipp. I used the browser’s console to find the CSS selector for active tabs, and it works perfect:

.bk-root .bk-tabs-header .bk-tab.bk-active {
…
}