[TW5] padding above and below title/toolbar

[Dave]

Hello,

I have a custom stylesheet:

.tc-tagged-slide .tc-title { font-size:20%;line-height: 9px;color:white}

.tc-tagged-aside .tc-title { font-size:20%;line-height: 9px;color:white}

.tc-titlebar button {
opacity: 0;
}

.tc-titlebar:hover button {
opacity: 1;
}

... that on tiddlers tagged "slide" and "aside" makes the title invisible (by making it white font (on a white background))

with the hidden titlebar (toolbar icons) that leaves a lot of white space above the main text area (this is for a "powerpoint" presentation) that I'd like to get rid of.


A)  How would I modify the space immediately above and below that toolbar for tiddlers with those tags, and

B)  What should be my google search, or just search terms in this group or on Tiddlywiki.com to find out stuff like this?
     I tried "css toolbar padding", "viewtemplate padding" e.g. but came up empty handed.


Thanks,
Dave

[Mat]

See if property...

display:none;

solves your problem.

> What should be my google search, or just search terms in this group or on Tiddlywiki.com to find out stuff like this?
     I tried "css toolbar padding", "viewtemplate padding" e.g. but came up empty handed.

Yea, docs on styling TW is pretty much lacking. CSS is really a big topic in itself but it's also that TW has so many style deffinitions that we'd need a radically different approach to simplify for users to manipulate them. Fellow Jed made a prototype on the matter and I'm currently working on a completely other idea but it's not ready for publication yet. (If you contact me privately I could send you a prototype, but it is part of a greater concept there).

<:-)

[Dave]

.tc-tagged-slide .tc-title {display:none}

that just gets rid of the title in that line but does not change the padding above or below it (and the toolbar is still there)

Maybe instead of searching for "padding" I should search for the term "margin"...

Thanks for the suggestion though :)

[Birthe C]

Hi Dave

For the padding above

.tc-tiddler-frame {padding-top:2px;}


Birthe

[Dave]

Here's something weird; when I put in this:

.tc-tiddler-frame {padding-top:2px;}

it works on all tiddlers, but when I put in this

.tc-tagged-slide .tc-tiddler-frame {padding-top:2px;}

it doesn't work on anything, even though this does affect only the tiddlers tagged "slide":

.tc-tagged-slide .tc-tiddler-body {font-size:200%;line-height:100%; }

Any suggestions?

[Birthe C]

When you want to use it only with your tag:

.tc-tagged-slide {padding-top:2px;}


Birthe

[Dave]

D'oh! I should have tried that - thanks!!

That gets rid of the extra space above the toolbar.  Do you know what would do the same for between the toolbar and the top of the tiddler body?  I tried .tc-tagged-slide {padding-bottom:2px;}, but that didn't work, and .tc-tagged-slide {padding:2px;} wasn't right either (got rid of the padding over all)

Thanks again,
Dave

[PMario]

Hi Dave,

If you create your own CSS classes, you should not prefix them with tc-, tm- or tv- ... since these are indicators for TW core styles. So in the future this may be confusing for others and yourself.

-mario

[Dave]

Hi Mario,

I know so little about how this all really works (I'm a health care provider, not a computer guy), I'm not even sure what you're saying there.

When I use this

.tc-tagged-slide .tc-title { font-size:20%;line-height: 9px;color:white}

I've actually copied something someone else used and modified it to get something done.  Are you saying that having that in a tiddler and tagging it with $:/tags/Stylesheet  is equivalent to creating my own CSS class?  Or are you saying that that's something that often happens in general, but not in this case?

I'm pretty sure its the latter, not the former because if I delete the "tc-" part from my tiddler it stops working, so I just assume ".tc-tagged-slide .tc-title" are part of the normal usage.



Also regarding  what you said before:


Yea, docs on styling TW is pretty much lacking. CSS is really a big topic in itself but it's also that TW has so many style deffinitions

How do you all keep track of those style definitions?  Is there a central reference you can link to?  Surely you don't all just go by memory, do you?  For example there are all sorts of descriptions in the controls>palette area like "table-footer-background" that I've been able to figure out just because its written there and kind of makes sense, but I could never have been able to just "think it up" from scratch.  It would be nice to be in on the secret "TW glossary" ;)

Thank you for your assistance!!
Have a great day,
Dave
 

[Eric Shulman]

On Tuesday, April 5, 2016 at 7:12:50 AM UTC-7, PMario wrote:

If you create your own CSS classes, you should not prefix them with tc-, tm- or tv- ... since these are indicators for TW core styles. So in the future this may be confusing for others and yourself.

This is generally true.  

However... this is not the case with "tc-tagged-".  The TWCore automatically combines this *special prefix* with any tag values present on the tiddler and adds those classes to the tiddler frame.  This allows custom CSS classes to be applied based on tag values.  Thus, you can define CSS class "tc-tagged-foo" those styles will automatically be applied to any tiddlers tagged with "foo".

(Basically, this TW5 core feature provides the same function as my TiddlyTools TaggedTemplateTweak plugin for TWClassic).

enjoy,

-e

[Birthe C]

Hi Dave,

Mario Pietsch created a very helful youtube: How to tweak a TW5 theme


Birthe

[Dave]

Thanks Birthe, I'll see if I can figure it out from there.  I'd seen that at some point in the past but forgotten about it as I hadn't used it.  Now I have an excuse :)