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/a56bd2b8-4437-48b0-88bb-6855969948can%40googlegroups.com.