Hi David Actually my Custom CSS tiddler is a mess because its in a constant state of experimentation and flux - however I certainly don't mind sharing it with you.
See the following post on a custom CSS tiddler https://tiddlywiki.narkive.com/uckGnsam/tw-custom-stylesheet My basic pattern of use is that I use the blockquote to do just about any customisation to a block, there are other ways to do this... https://tiddlywiki.com/static/Styles%2520and%2520Classes%2520in%2520WikiText.html ... but I have got used to using my mouse to select the text I want to do some styling on and so I prefer to "customise/over ride/abuse" the blockquote, if you are more of a keyboard person you may prefer the method in the link above. I say abuse because my use of blockquote is not restricted to quotes so perhaps I think of it as "blockstyle" where the default is a quote. I try and pick short class names I will not forget, the whole point of this is for me is that it is supposed to be quick and easy - I use upper case for class names so they stand out. So I use my mouse to select the text ( often a few paragraphs in my case ) and get the following after clicking on the blockquote tool on the tiddler menu. <<< Here is my paragraph of text or perhaps an image <<< I then add my custom class <<<.XX Here is my paragraph of text or perhaps an image with CSS class XX applied <<< Here is my full Custom CSS as you requested ==================================== Do note that it is just thrown together so not intended to be neat or tidy, once I have achieved something that does what I want I tend to just go with it, I guess one day I might tidy and clean but I am still working out what I actually want to see so as long as the CSS works I go with it. Of course some of these choices (colours for instance) reflect choices I made in the Tiddlywiki options menus so they will most likely clash or look odd in another TW where different choices were made. It works on Firefox which is the browser I always use - you might find some bits don't work on another browser or an older version of Firefox - again I coded the CSS for private use so I was never bothered if it worked on Edge or Opera etc. ___________________________ /* the following provides a custom quote-block which is intended for my annotations to someone else's writing - ie 'notes' within quotes */ blockquote.JL { margin-left: 0px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); border-radius: 2px; border: 1px solid #ddd; padding-left: 1rem; padding-right: 1rem; margin-bottom: 3rem; color:#777; } /* not currently used maybe useful one day */ blockquote.JL::before { content: ""; } /* for mobile size adjustments */ @media screen and (max-width: 600px) { .tc-tiddler-controls button svg, .tc-tiddler-controls button img { height: 0.45em !important; width: 0.65em !important; } .tc-titlebar h2 { font-size: 0.8em !important; line-height: 1.0em !important; } } /*changed my mind on this currently not used - on reflection I think I like the border so allow TD defaults to apply */ /*I have added class Q to all blockquotes that otherwise have no custom class so un-comment this to change default quotes everywhere */ /*blockquote.Q { margin-left: 0.5rem; border: 0px solid #ddd; margin-left: 0px; color:#555; }*/ /* used to centre text */ blockquote.CT { text-align: center; border: 0px solid #ddd; } /* used to float left / right an image that is placed in a quote */ blockquote.FL { float: left !important; border: 0px solid #ddd; } blockquote.FR { float: right !important; border: 0px solid #ddd; } /* normal float clear is not much use for print outs - page breaks !! */ blockquote.CLEAR { clear: both; display:block; border: 0px solid #ddd; } /* Attempt to gain some control on floats for printing - substitute the usual clear both by page-break-after 'always' */ @media print { blockquote.CLEARP { page-break-after: always; } } @media screen { blockquote.CLEARP { clear: both; display:block; border: 0px solid #ddd; } } /* add clear-fix to tiddler body to support floats otherwise if image height is greater than surrounding container it will overflow */ .tc-tiddler-body { overflow: auto; } /* customisation of details widget for more details button */ details { background-color: #fff ! important; } details summary { background-color:#fff ! important; } details { padding: 0 0.5em 0 0.0em ! important; } details > summary { margin: 0 -0.5em 0 0.0em ! important; padding: 0.2em 0.5em 0.2em 0.0em ! important; padding-left: 0em ! important; text-indent: 0em ! important; color:purple ! important; } details[open] > summary { color:purple ! important; } /* I would like tags to be printed when I print out a tiddler but not the more details 'button' - well its not really a button! */ /* display 'block' is used here to over-ride display 'none' */ /* these should be combined into one block */ @media print {.tc-tags-wrapper {display: block ! important;}} @media print {.tc-btn-invisible {display: block ! important;}} @media print { details[open] > summary { display: none; }} /* custom HR */ .tc-tiddler-body hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin-top:2.0rem; margin-bottom:2.0rem;} /* all links the same colour not interested in distinction whether internal or external link - just visited for now */ a.tc-tiddlylink-external:visited { color: #5778d8 !important; } On Tuesday, 1 June 2021 at 20:20:34 UTC+1 [email protected] wrote: > I also print one or more specific tiddlers this way. > > A request: sounds like you know what you're doing w.r.t. CSS and TW. > Would you mind making your full custom CSS available as an example (for me)? > > -- David > > On Tue, Jun 1, 2021, 05:15 Jon Light <[email protected]> wrote: > >> >> In response to a slight offtopic on the thread "Issue with PrintRiver >> plugin" I thought it was worth mentioning other methods of printing >> Tiddlers. >> >> I took a fairly simple approach as follows. >> >> - I simply find the tiddler of interest and use the existing Tool >> item PRINT. >> - This prints the whole page which equates to the story river >> - I therefore use the pull down from the Tiddler menu "Close Others" >> now I have only one tiddler in the Story River - then I print - very >> quick >> and fuss free as long as you like the existing defaults on what actually >> gets printed. >> >> Its an easy sequence. >> >> Subsequent "fussy" refinements.... >> >> I preferred to print tags with tiddler so my custom CSS contains @media >> statements for printer specific CSS which include making tags in the >> tiddler visible for the print. >> >> I also like to use CSS floats to place text to one side of the other of >> images, the problem is that page breaks and images are difficult when >> printing. >> >> The browser may make the decision to move an image to the next side of >> paper but still allows the floated text that should appear alongside the >> image to appear instead on the previous side - kind of ignoring that the >> image got bumped to the next page. >> >> I added extra CSS to my Custom CSS tiddler for this situation >> >> @media print { blockquote.CLEARP { page-break-after: always; } } >> @media screen { blockquote.CLEARP { clear: both; display:block; border: >> 0px solid #ddd; }} >> >> This means when I preview the print out I can add blockquotes with class >> CLEARP to force a new page for the printed version. - crude but it works >> ok, I only use floats in tiddler articles over which I have lavished a bit >> of Tender Loving Care so I am happy to spend the time preparing the print >> in these cases. >> >> I must revisit the PrintRiver Plugin sometime - I parted company with it >> because the problems I experienced with reveal before a kind soul on this >> forum suggested I use the detail tag. >> >> >> >> >> >> >> >> >> >> -- >> 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 [email protected]. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/tiddlywiki/1006b5a2-5d6d-44c8-909c-0a5d8d043e4dn%40googlegroups.com >> >> <https://groups.google.com/d/msgid/tiddlywiki/1006b5a2-5d6d-44c8-909c-0a5d8d043e4dn%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> > -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/cc7bbf71-f7c4-447e-b4b3-f7ab733d4c6dn%40googlegroups.com.
