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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/89150067-4b55-4036-897f-859cc59815bao%40googlegroups.com.
