The "order" bit is a flex-box style that only works since the parent div
has a flex-box style applied.
For the borders, you need to change the border colors so that the left
border is either not displayed, or matches the background-color. In the
style sheet, try this:
*.tc-vertical .tc-tab-buttons button.tc-tab-selected {*
* border-left-color:rgb(255, 255, 255)*
* border-right-color: rgb(204, 204, 204)*
*}*
It should make the left border white and right border grey, matching the
background color.
Another option is the adjust the border widths, and use position:relative
and left:-1px to nudge the tab over, or any a few other options, but the
above should work out OK for the stock TW color scheme.
On Friday, November 13, 2020 at 11:57:59 PM UTC-7 Tiddly Novice wrote:
> Wow, that's amazing. I would never have thought something called "order"
> would be what would be used to do this. But there's an odd problem.
> Following your instructions exactly results in the selected tab button
> having the gap side (see picture) being on the right like the tab bar was
> still on the left of the content. I can't figure out how to move it to the
> left side of the button. I had success hiding the gap on the right side
> using border-right, but border-left actually seems to refer to a line just
> short of the long vertical line, meaning I can't use it to make the gap
> like it might be expected to. (I'm not yet trying to make little sticky
> note tab buttons that look like they were stuck to the content. I'll try
> that when I have a better understanding of CSS.) But at least I'm pretty
> sure I can get the horizonal tabs that are transcluded by the vertical tabs
> moved to where I want them.
>
> Is there some special extra border or something that makes the gap appear?
>
> On Thursday, November 12, 2020 at 7:53:26 AM UTC-8 Brian Radspinner wrote:
>
>> You'll need to adjust for CSS styles to get the tabs to look good, but
>> here are the basics for putting the tabs on the right side. Put these in a
>> tiddler tagged with *$:/tags/Stylesheet*...
>>
>> .tc-vertical .tc-tab-content {
>> order: 1;
>> border: solid #999;
>> border-width: 0 1px 0 0;
>> }
>>
>> .tc-vertical .tc-tab-buttons {
>> order: 3;
>> }
>> On Thursday, November 12, 2020 at 12:14:32 AM UTC-7 TW Tones wrote:
>>
>>> Hi again Novice (Real name?)
>>>
>>> Rather than tabs, have you thought of using the TOC macros?
>>>
>>> To change the tabs macro, or copy and rename the macro see
>>> $:/core/macros/tabs
>>> <https://tiddlywiki.com/#%24%3A%2Fcore%2Fmacros%2Ftabs>
>>>
>>> It would be possible by modifying the existing toc macros I am sure.
>>> Have you tried
>>> https://tiddlywiki.com/#Example%20Table%20of%20Contents%3A%20Tabbed%20Internal
>>>
>>> It may just be a matter of changing the order of the table details to
>>> swap columns.
>>>
>>> So here is a quick hack (attached) which modifies the the current toc
>>> macros, the internal and external toc's use the right hand side instead.
>>>
>>> Regards'
>>> Tones
>>>
>>>
>>>
>>> On Thursday, 12 November 2020 11:48:21 UTC+11, Tiddly Novice wrote:
>>>>
>>>> To replicate the look of a book that's had little tabs stuck in at
>>>> points, I need a version of the vertical format tabs macro (tc-vertical)
>>>> that is on the right side of its content area instead of the left. Is this
>>>> even possible?
>>>>
>>>
--
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/a56bd2b8-4437-48b0-88bb-6855969948can%40googlegroups.com.
