Try setting:
*.tc-vertical .tc-tab-buttons {*
* position: relative;*
* left: -1px; *
*}*
On Saturday, November 14, 2020 at 11:29:46 AM UTC-7 Tiddly Novice wrote:
> 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/0a103fa2-14d1-4de6-a96f-731c86eec950n%40googlegroups.com.
