I got your the code working for the right side, but the left side refuses
to become a gap. Or so it seemed until I remembered some frustrations I'd
had a while ago trying to learn how to make pixel art. So, I took a
snippet/screenshot of the vertical tabs as arranged normally and then
another snippet/screenshot of the vertical tabs placed on the right. Then I
opened the screenshots in paint.net and zoomed in far enough to examine the
pixels in detail for each situation. Turns out that, when the tab buttons
are on the left, the 1 pixel border of each tab button lines up exactly
with the big line that they are all connected to. But when the tabs are on
the right, the left border of the buttons ends up *beside* the big line.
You can tell based on the corners, which for some reason are a lighter
color than the rest. So all that needs to happen is for the buttons to be
moved over by 1 pixel to put their border ontop of it. I don't know how to
do that yet though. Do you know how?
On Saturday, November 14, 2020 at 6:35:27 AM UTC-8 Brian Radspinner wrote:
> 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/746961b3-a80a-4137-a016-abecfe0a7a67n%40googlegroups.com.
