How to customize Tabs (dcc.Tabs)?

Dash Python
1

Hi,

Is it yet possible to customize size and colors of the Tabs directy with “style” lines. Default parameters are set to a thin blue border (in vertical mode) which appears when a tab is selected. Is it editable ?

I hope you can help me. I really like Dash and things that we can do with it !!
Thanks :slight_smile:

Yann

1 Like
2

This is not customizable yet but it will be. Stay tuned in https://github.com/plotly/dash-core-components/pull/74/

2 Likes
3

Oh nice ! Thanks you and good luck, Dash is amazing !

2 Likes
4

You can edit the overall container Tabs, and have those cascade to the tab elements using the style={} keyword argument, but that won’t change some of the style elements which vary for the individual tabs. For example, I made the font bold

5

Hi Can we edit the color and styles for each tabs now? Else when can we expect this to work?

Thanks,
M

6

I am able to edit the fonts of the Tab headers, but the thin blue border appearing when a tab is selected - i want to change that color? unable to do so!

7

I want to change the top color too :slight_smile:

If you want to do this manually, you can change it here:

https://github.com/plotly/dash-core-components/pull/74/files#diff-87a94af645034b5ac219cbbfb96a6295R35 (line 35 in Tabs.react.js)

You can either change the color directly in the .js file or add a new prop to be able to change the color in Python.

However, I suspect there’s a better long-term solution here. Perhaps adding a tabActiveStyle prop and a tabDefaultStyle prop for full customizability ?

8

Is it yet possible to customizes the color within tabs?

9

It is! We shipped an official version of Tabs in https://github.com/plotly/dash-core-components/pull/213.
This component is now documented in https://dash.plot/dash-core-components/tabs.

To modify the color in particular, see the colors property, in particular colors={'primary': '#FF4136'}.

And if you need some nice shades of colors, I can recommend this site: http://clrs.cc/.

Enjoy!

10

@chriddyp I would like to set tab’s styles from CSS file, as I load different .css for user based on his palette preference. Is it possible to completely disable inline styling and use .css files? As now inline styles override my styling.

Setting custom styling with style attribute of dcc.Tab will require storing the colors definition in two places: .css file and .py or other place easily readable by python. Which I would like to avoid.

11

For now, I’d recommend reading through the source code. dash-core-components/src/components/Tabs.react.js at master · plotly/dash-core-components · GitHub. You will probably just need to override the default styles that we provide in CSS by declaring them after the dash css (and perhaps with a parent level id for greater specificity)

1 Like
12

Here’s what I’m using in my css file to customize a specific tab bar:

.tab.jsx-2137964197{
  background-color: white;
  color:#0d0d0d;
  font-weight: bold;
  /* borderTop: 1px solid #119DFF; */
  /* borderBottom:1px solid #119DFF; */
}

.main-tab-family > .tab--selected.jsx-2137964197{
  background-color: #119DFF;
  color:white;
}

A little but of a hack, but maybe it works for you…

1 Like
13

@Yaakov_b thank you for sharing your hack! I’m also trying to customize the Tabs, but somehow neither this nor anything else I tried works so far.

Would you be open to sharing a more complete example?

Thank you!

14

Sure. Why don’t you first share a case of the tabs you’re trying to style?

1 Like
15

It only took two days, and I’ve figured it out :slight_smile: I could not get styles to apply to the Tabs, neither with direct styling nor via .css. And the culprit was the css file ordering during loading - simple things, sometimes, are hard to catch.

16

Sneaky… Glad you found it in the end.

1 Like
17

Thank you, your solution inspired me :wink:

1 Like