Changing the background color for tabs?

[Tiddly Novice]

Is there a way to change the background color and border color for just the contents area of a tabs widget? And for bonus points: is there a way to change the contents area styles based on what tab is open or what tiddler is being transcluded by the currently open tab?

[Tiddly Novice]

Nevermind, it turns out that the tiddler being transcluded by the tab is what controls the background colors. Which is actually really convenient.

[Tiddly Novice]

Actually, I take back my nevermind since I still can't figure out how to control the background of the entire tab box area. Merely changinge the background of the contents of any transcluded tiddlers seems to leave this weird space between the tabs and the tab area box and that is not the look I'm after. Also, how do I add a full border surrounding the area of the tab box? (Please forgive me if the answer is obvious. The only GUI design class I've ever had was "Intro to Visual Basic".)

[TW Tones]

Novice,

One of the first things I want to remind you is the tabs macro is a provide macro, and it does a lot and suits most people. If you want to do a lot of customisation you should consider cloning the built in tabs macro and modify it as you see fit.

Perhaps an image to illustrate "this weird space between the tabs and the tab area box and that is not the look I'm after" would help.

Remember the tabs macro is in a tiddler, within this tiddler you can control how things appear. You could wrap the whole tabs macro in a html div with a style or class applied. Or in some cases a div is allready present; see How I modified 

$:/ControlPanel below,

Then change the margin and padding values 

<div class="tc-control-panel"  style="border: 5px solid green; padding: 50px; margin: 20px;">
<<tabs "[all[shadows+tiddlers]tag[$:/tags/ControlPanel]!has[draft.of]]" "$:/core/ui/ControlPanel/Info">>
</div>

Tones

[Tiddly Novice]

Sorry about not describing things properly, I've been having a lot of trouble thinking clearly lately. Here's a picture that hopefully points out the areas I'm trying to affect. I'm trying to have the tab content area have the same background colors, but there's these areas on the sides that aren't being affected by what the transcluded tiddler has for settings. I guess what might work would be to remove whatever the gap is? Is that what padding and margin is for tabs? I'm also trying to have the tab content area have a border on all sides. How would I define a stylesheet for that? Also, how do I use the code you posted?

[TW Tones]

Novice,

My code example was An edit of the $:/ControlPanel to show how to wrap the whole set of tabs;

However now you illustrated the exact location I will look for an answer, and others may know.

Regards

Tones

[Tiddly Novice]

I think what might be happening is that empty padding or margins or something is just sort of naturally getting added during the usage of the TW tabs macro. I'm pretty sure there'd be a way to remove that, the question is what the best way to do that would be. One way might be to write a new kind of tab macro, I guess called "tabsnogaps", by cloning the original tabs macro tiddler and then doing...something(?) to it to remove the unwanted spaces. Or at least make the spaces more obvious/accessible to adjust. So far, I've found the tabs macro at "$:/core/macros/tabs" and cloned it. But I still have no idea where the extra space is getting added in the code. Also, I'm a little concerned that the tabs macro might be using other macros or similar that I'd have to clone & change as well, but I'm still so new to this kind of code that I can't tell for sure. Or maybe I could define a style(?) exclusively limited to the new macro that could set the margins or padding or whatever to 0? Would that work?

[Tiddly Novice]

I got part of the solution figured out. I made some CSS that removed some of the empty space, but there seems to be some left. Except, I think that empty space is not from the tabs but rather from the transcluded tiddler. The inspector tool in TiddlyDesktop reveals there's a paragraph creating a space, and I think there's a way to fix that with CSS. But, is there a way to style tiddlers when they're being transcluded? I mean, without affecting the original, merely affecting the copy created by the transclusion.

Also, here's the CSS. It's not really ideal though, since I'd rather have a way to affect only the new "tabsnogaps" macro I made and this doesn't do that. (How do I format a post for a code block quote?)

.tc-tab-content.tc-vertical { padding-left: 0px; margin-top: 0px; }

[Tiddly Novice]

Still trying to figure out how to apply style overwrites to transcluded tiddlers, but in cases where there isn't any pre-existing style stuff applying to the tiddler transcluded by the tabs that would affect the margin or padding properties, the following CSS code would work. Though I don't know if it affects more than it's supposed to. Could someone with greater CSS knowledge check it? I'm particularly worried about the part that messes with <p>. Is there a more exact way to affect that?)

.tc-tab-content.tc-vertical {
padding-left: 0px;
margin-top: 0px;

border: 1px lightgray solid;
}
.tc-tiddler-body.tc-reveal p {
margin: 0;
padding: 0;
}

(I still don't know how to put code blocks into google group things. I can't even find a button for it.)

Also, when the target tiddler has a style that would influence the margins and stuff, the following addition to the style sheet seems to be effective. (#paper is the name of the style div thing I was testing with.)

.tc-tab-content.tc-vertical #paper {
margin: 0px;
width: auto;
box-shadow: 0px 0px 0px 0px #888;
}

(I was testing out a css style that made a page look like a piece of lined paper. It worked but it messed with the margins so I found out I needed to readjust the margin settings when transcluding tiddlers that used the lined paper style. I can post the CSS for the lined paper if you want it.)

[Tiddly Novice]

Alright, after gaining some fundamental knowledge of CSS and remembering my week's worth of html from high school, I've figured out exactly how to make custom styled tab macros.

First, clone the tabs macro at $:/core/macros/tabs .

Then change the title part, specifically the "tabs" part, to be something else (you'll end up with a title like $:/core/macros/tabsCustom or some such).

Next, on the line that starts with \define tabs( , change tabs( to something like tabsCustom( .

After that, add a line directly after the line that starts with /define. Put something like <div class="customTabsDiv"> on that line.

Then go to the very end of the macro and add a line before the line that says \end. Then put </div> on the new line.

You'll end up with something like this (I'm sorry I still don't know how to format code blocks):

\define tabsCustom(tabsList,default,state:"$:/state/tab",class,template,buttonTemplate,retain)
<div class="customTabsDiv">
<div class="tc-tab-set $class$">
<div class="tc-tab-buttons $class$">
<$list filter="$tabsList$" variable="currentTab" storyview="pop"><$set name="save-currentTiddler" value=<<currentTiddler>>><$tiddler tiddler=<<currentTab>>><$button set=<<qualify "$state$">> setTo=<<currentTab>> default="$default$" selectedClass="tc-tab-selected" tooltip={{!!tooltip}}>
<$tiddler tiddler=<<save-currentTiddler>>>
<$set name="tv-wikilinks" value="no">
<$transclude tiddler="$buttonTemplate$" mode="inline">
<$transclude tiddler=<<currentTab>> field="caption">
<$macrocall $name="currentTab" $type="text/plain" $output="text/plain"/>
</$transclude>
</$transclude>
</$set></$tiddler></$button></$tiddler></$set></$list>
</div>
<div class="tc-tab-divider $class$"/>
<div class="tc-tab-content $class$">
<$list filter="$tabsList$" variable="currentTab">

<$reveal type="match" state=<<qualify "$state$">> text=<<currentTab>> default="$default$" retain="""$retain$""">

<$transclude tiddler="$template$" mode="block">

<$transclude tiddler=<<currentTab>> mode="block"/>

</$transclude>

</$reveal>

</$list>
</div>
</div>
</div>
\end

Now, to actually specifically only affect the parts of tabsCustom uses you have, you can use something like this CSS code in a stylesheet:

.customTabsDiv > .tc-tab-set.tc-vertical > .tc-tab-content.tc-vertical {

padding-left: 0px;

margin-top: 0px;

border: 1px lightgray solid;

}

.customTabsDiv > .tc-tab-set.tc-vertical > .tc-tab-content.tc-vertical > .tc-reveal > p {

margin: 0;

padding: 0;

}

The > specifies direct descendents of the element type preceding it, meaning those two style declarations will only affect the exact part of the custom tab macro and not, for example, any indirect descendent (grandchildren, basically) <p> tags of every reveal macro thing. (Is there a guide for using the Inspection tools to determine the exact combinators required to affect specific TW elements?)

Finally, in cases where a specific style used in a Tiddler is messing with the margins, padding, width, and/or shadows of a Tiddler's contents in a way that is undesirable when that Tiddler is transcluded into a Tabs Macro, you can make the following addition to the custom Tabs macro custom stylesheet:

.customTabsDiv > .tc-tab-set.tc-vertical > .tc-tab-content.tc-vertical > .tc-reveal > p > #paper {

margin: 0px;

width: auto;

box-shadow: 0px 0px 0px 0px #888; /* #paper is a custom style thing that I used in one of my tiddlers */

}

That code doesn't affect the original tiddler, only the transcluded copy.

That, as far as I can tell for now, should cover how to adjust the content area and contents of tab macros. Sorry it was so long a post, but I needed to be thorough so others like me who need this and, also like me, have zero CSS and TiddlyWiki knowledge would understand just what needed to be done. It was actually pretty simple in the end, but it is super not obvious if you don't have some fundamental basics yet.

[TW Tones]

Thanks for Sharing back

Code blocks are available in the online Google Groups forum when replying or posting using the "{ }" button in the same toolbar that allows font settings etc..., but only in the classic groups not the new google groups.

Please report bugs or missing features in the new google groups with 

Change back using ?

• I can find the change back mechaisium but you can use a link saved from the classic view
• This link for example is back in the classic group view https://groups.google.com/forum/?oldui=1&oi=1#!forum/tiddlywiki

Tones