Re: [tw5] CSS / Single Page Layout / Hidden Classes

[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)

On Wednesday, May 26, 2021 at 10:27:34 AM UTC-4 Álvaro wrote:

> 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). 
> El miércoles, 26 de mayo de 2021 a las 12:33:40 UTC+2, Stobot escribió:
>
>> 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. 
>>
>> On Wednesday, May 26, 2021 at 2:14:37 AM UTC-4 arunn...@gmail.com wrote:
>>
>>> https://ibnishak.github.io/Timimi/
>>>
>>>  Will this be of any help?
>>>
>>>
>>> On Wed, May 26, 2021 at 5:48 AM Stobot  wrote:
>>>
 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):
 [image: before.png]

 After:
 [image: after.png]

 *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 :)*


 -- 
 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
  
 
 .

>>>

-- 
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/be7690af-90aa-4242-8410-94142956574dn%40googlegroups.com.

Re: [tw5] CSS / Single Page Layout / Hidden Classes

[Á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). 
El miércoles, 26 de mayo de 2021 a las 12:33:40 UTC+2, Stobot escribió:

> 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. 
>
> On Wednesday, May 26, 2021 at 2:14:37 AM UTC-4 arunn...@gmail.com wrote:
>
>> https://ibnishak.github.io/Timimi/
>>
>>  Will this be of any help?
>>
>>
>> On Wed, May 26, 2021 at 5:48 AM Stobot  wrote:
>>
>>> 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):
>>> [image: before.png]
>>>
>>> After:
>>> [image: after.png]
>>>
>>> *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 :)*
>>>
>>>
>>> -- 
>>> 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
>>>  
>>> 
>>> .
>>>
>>

-- 
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/03e0d5bb-b769-40e4-9682-9084f294e7d2n%40googlegroups.com.

Re: [tw5] CSS / Single Page Layout / Hidden Classes

[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. 

On Wednesday, May 26, 2021 at 2:14:37 AM UTC-4 arunn...@gmail.com wrote:

> https://ibnishak.github.io/Timimi/
>
>  Will this be of any help?
>
>
> On Wed, May 26, 2021 at 5:48 AM Stobot  wrote:
>
>> 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):
>> [image: before.png]
>>
>> After:
>> [image: after.png]
>>
>> *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 :)*
>>
>>
>> -- 
>> 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
>>  
>> 
>> .
>>
>

-- 
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/e681bd99-98cb-40c8-962a-169e8ffe2b31n%40googlegroups.com.