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/0a103fa2-14d1-4de6-a96f-731c86eec950n%40googlegroups.com.