Been a rough week or so since you posted that. Just got back to working on
this. Kinda got stuck trying to figure out a bit of weird behavior. When I
use a vertical tabs setup, if I select an odd numbered tab (with the first
tab being tab #1) then the text of all the *other* tabs gets displaced to
the right by a pixel or three (I haven't looked closely enough to get the
exact measurement yet and I'm not up for doing that tonight) and the long
line the tab buttons connect to displaces to the right as well. But if I
select an even numbered tab then the displacement dissappears. Or at least,
there' a visible difference between when an odd numbered tab is selected
and when an even numbered tab is selected. Is that normal? Is there a way
to make it not happen? To be clear, this occurs even when using normal
vertical tab arrangements without any style sheets in a wiki.
On Saturday, November 14, 2020 at 11:28:31 AM UTC-8 Brian Radspinner wrote:
> 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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/adc0db00-751c-4ed0-9356-491f01666969n%40googlegroups.com.
