TW5 How to make each tab in a tabmenu a different background colour?

[Odder]

I have a tebmenu with 6 tabs and I want each tab with a different background-color? Is this possible maybe with css?
Odder

[PMario]

On Saturday, January 21, 2017 at 7:29:38 PM UTC+1, Odder wrote:

I have a tebmenu with 6 tabs and I want each tab with a different background-color? Is this possible maybe with css?
Odder

Hi Odder,
Not with the current implementation of the tabs macro. But it should be straight forward to create a custom macro.
-mario
 

[PMario]

On Saturday, January 21, 2017 at 7:29:38 PM UTC+1, Odder wrote:

I have a tebmenu with 6 tabs and I want each tab with a different background-color? Is this possible maybe with css?

How did you create your tabmenu?

-m

[Mat]

On Saturday, January 21, 2017 at 7:29:38 PM UTC+1, Odder wrote:

I have a tebmenu with 6 tabs and I want each tab with a different background-color? Is this possible maybe with css?
Odder

Yes, unless I misunderstand you.

title:whateveryouwant
tags:colortabs

<<tabs "one two three four" "one">>

<style>
.tc-tagged-colortabs .tc-tab-buttons button:nth-child(1) {background:blue;}
.tc-tagged-colortabs .tc-tab-buttons button:nth-child(2) {background:green;}
.tc-tagged-colortabs .tc-tab-buttons button:nth-child(3) {background:yellow;}
.tc-tagged-colortabs .tc-tab-buttons button:nth-child(4) {background:red;}
</style>

The reason you need the tag "colortabs" is to prevent the styling from affecting all tabs in the TW. Instead you can then use .tc-tagged-colortabs to limitit it to that particular tiddler.

Generally, you'd not want to put the styles in the tiddler itself but in a separate stylesheet tiddler, i.e any tiddler with the tag "$:/tags/Stylesheet". And you omit the <style> tags there, just put the lines starting with .tc-tagged..... etc

<:-)

[Odder]

Hi PMario and Mat,

@PMario
I create normal <<tabs "tab1 tab2 tab3" "tab1">>

@Mat
Thank you very much for your tip. That did the job as desired :-)

Thanks both for your help.

Odder

[PMario]

Hi Odder,

There is already a pull request open for discussion: https://github.com/Jermolene/TiddlyWiki5/pull/2724 
So it may end up in the core. ... BUT no promises :)  but some +1's at the PR may help a bit.

-m

[Tobias Beer]

Hi Odder & Mat,

Nevertheless, I made a Pull Request that would allow setting a tab-class using a field by that name:

#2724 allows to specify a button class for tab buttons

https://github.com/Jermolene/TiddlyWiki5/pull/2724

Best wishes,

Tobias.

[cmari]

Hi Mat,
I've been wishing for something like this - thanks! However, I think it doesn't work with your Tablinks. It only worked for me when I reverted to the shadow version of $:/core/macros/tabs.
With the Tablinks version of $:/core/macros/tabs, if I create the whateveryourwant tiddler in your example and inspect the elements, it looks as though the second tab has become nth-child(3) and the third and fourth tabs aren't nth-children at all. But I don't even know if that's the real problem. Sorry to only be able to report things rather than offer solutions. I'm really hoping there's a way to get both colors and links on tabs!
Thanks,
cmari

[Mat]

cmari,

I've been wishing for something like this - thanks! However, I think it doesn't work with your Tablinks.

Ok, here's a solution for both regular tabs as well as tablinks (...and, by the way, it omits the need for the tag in the tiddler by simply using a div (doh!) )

<div class="foo">

<<tabs "one two three four" "one">>

</div>

<style>
.foo .tc-tab-buttons button:nth-of-type(1) {background:blue;}
.foo .tc-tab-buttons button:nth-of-type(2) {background:red;}
.foo .tc-tab-buttons button:nth-of-type(3) {background:green;}
.foo .tc-tab-buttons button:nth-of-type(4) {background:yellow;}
</style>

BTW... what IS with the colored tabs? Why do people want this???

<:-)