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.
[image: Snag_35486c3.png] 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 On Thursday, 12 November 2020 04:36:51 UTC+11, Tiddly Novice wrote: > > 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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/89150067-4b55-4036-897f-859cc59815bao%40googlegroups.com.