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.
On Monday, November 9, 2020 at 7:39:11 PM UTC-8 Tiddly Novice wrote:
> 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.)
> On Monday, November 9, 2020 at 2:28:55 PM UTC-8 Tiddly Novice wrote:
>
>> 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; }
>>
>>
>> On Monday, November 9, 2020 at 1:32:36 PM UTC-8 Tiddly Novice wrote:
>>
>>> 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?
>>>
>>> On Sunday, November 8, 2020 at 10:10:08 PM UTC-8 TW Tones wrote:
>>>
>>>> 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
>>>>
>>>>
>>>> On Monday, 9 November 2020 12:59:54 UTC+11, Tiddly Novice wrote:
>>>>>
>>>>> 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?
>>>>>
>>>>> On Sunday, November 8, 2020 at 5:00:33 PM UTC-8 TW Tones wrote:
>>>>>
>>>>>> 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
>>>>>> <https://tiddlywiki.com/#%24%3A%2FControlPanel> 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
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Monday, 9 November 2020 11:38:12 UTC+11, Tiddly Novice wrote:
>>>>>>>
>>>>>>> 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".)
>>>>>>>
>>>>>>> On Tuesday, November 3, 2020 at 1:08:24 PM UTC-8 Tiddly Novice wrote:
>>>>>>>
>>>>>>>> Nevermind, it turns out that the tiddler being transcluded by the
>>>>>>>> tab is what controls the background colors. Which is actually really
>>>>>>>> convenient.
>>>>>>>>
>>>>>>>> On Monday, November 2, 2020 at 7:04:07 PM UTC-8 Tiddly Novice wrote:
>>>>>>>>
>>>>>>>>> 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?
>>>>>>>>>
>>>>>>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/59347084-d662-4041-b3d9-cd48ef533f10n%40googlegroups.com.
