Hi David I should add that I added to my /*comments*/ in places so whilst the above CSS was cut and paste from something that does work it is always possible that I messed up with the additional comments which I added whilst editing the post - if something does not work try removing the comments first or look for an error in the comments.
On Thursday, 3 June 2021 at 10:21:36 UTC+1 Jon Light wrote: > 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/42e91eea-5f7d-4c4f-be5c-586629203046n%40googlegroups.com.
