CSS / Single Page Layout / Hidden Classes

[Stobot]

One of my side projects is to make a "version/edition" for my other "corporate" folk who are used to things looking like programs they're used to - primarily Microsoft (Teams / PowerBI / Office Online). There is a very common pattern with a top bar, left bar, and then the documentation is single page mode. 

I've been able to get a leftbar and topbar started and starting to be populated (far from done, but mostly know how to do the rest). I also figured out the sticky-titles and z-index to layer things okay. I am stuck on spacing (as I typically am) as I don't have a web/css background or know all of the "hidden classes". If there's a good resource/guide for me to self-teach, even better! 

In the "before" picture, I have 5 red boxes I'm trying to reduce to get me to the "after" picture. 

A: I already have "story top" set to 0px, there's just extra padding above the title line

B: I can adjust this with "story left", so I don't really need help on this one

C: I think similar to A, there's got to be some tc-? that I can change padding-left?

D: Same as C, but on the right

E: There's additional spacing to the right of the tiddler I can't get rid of.

Bonus: I think I'll keep it single-page mode, but if anyone knows how to adjust the space between tiddlers, that'd be helpful too as I might expand that way.

Before (purposely put topbar in the back to illustrate better):

After:

Thanks to the many contributors who've I've learned from to get this far with the CSS I have learned - especially Ton Gerner / J.D. / David Gifford / Eric / Soren / Jeremy and many others :)

[arun babu]

https://ibnishak.github.io/Timimi/

 Will this be of any help?

--
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+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f0cb9894-9b58-4484-b6a3-4b07f0899832n%40googlegroups.com.

[Stobot]

Thanks Arunn, I can see some similarities in desired output there, so thanks for passing along that link. At first glance though it looks like I'm already in a similar place - with extra (for my purposes anyways) spacing on the left and right

My hope is that someone who's done this kind of thing before would say something like - "For A, add a class for 'tc-tiddler-top-padding" and change it to 0px to get rid of it" or something like that. 

[Álvaro]

In your browser you have a excellent tool for it. Here they explains how use it in chrome, it is similar in other browsers.

In the second panel with tab "Styles" (active) you can see the list of rules applied to the element. Those above overwrite the previous/below ones. The first is "element.style" and it refers to inline styles (when you give styles directly inside the html, without CSS). But you only need see where the padding/margin are applied to find the class (or selector).

[Stobot]

Thanks Álvaro, I've played in there before, but didn't understand enough to get what I need. Got what I needed!

To close the loop:

A/C/D: tc-tiddler-frame (padding)

B: already had

E: tc-story-river (padding-right)

Bonus: tc-tiddler-frame (margin-bottom)