Hi all,
just wanted to share how amazing the support for CSS is. I simply created a tiddler with W3.CSS content tagged with $:/tags/Stylesheet as per documentation. Then I use it like this:
@@.w3-button.w3-red [[Contents]] @@
… and it renders a red w3.css styled button.
Bootstrap and other CSS framworks also work (mostly)
Welcome Sebastjan,
Nice that you like it. You should have linked to the sources, where to get the CSS definitions: W3.CSS Downloads
Thank you for the reminder and the source. I’ll make sure to include sources in the future.
Welcome @sebastjan-hribar - Good tip - I do like W3Scholls style and tutorials
Another way to import this stylesheet is to create a tiddler with a tag $:/tags/RawMarkup and add the following text.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
this will put the stylesheet link as raw markup at the bottom of the section in the tiddlywiki HTML file.
Cheers
CB
Note that using <link rel="stylesheet" href="https://..."> creates an online dependency. If you ever intend to work offline (i.e., without an internet connection), then the referenced stylesheet will be unavailable, which may have a significant impact on the appearance and usability of your TiddlyWiki.
-e
True - thanks @EricShulman…
I did experiment with a startup module that depending on a config setting, placed a script tag in the header or ‘downloaded’ the javascript library into the text of a library module… I wonder if you could do the same for CSS ?
This is technically correct but if you have already visited a site on the same device I think its possible it will be cached. Especially if you still have it opened in a tab.
Hi All,
I managed to modify my experiment to allow for switching between the link and embedded CSS - A demo of this is available here
The demo is a bit flakey as it uses the WidgetMessage: tm-http-request which acts a little bit asychronously to store the resulting CSS data to a tiddler. Curious if anyone thinks this is a bug or needs a feature change…
Also of interest is that W3S rejected the request for the CSS possibly as a CORS restriction - so i needed to source the stylesheet through a CDN alternative
Thank you for suggesting the additional implementation options. For now I’ll stay with the offline method. I’m working on a knowledge base / quick reference manual that needs full offline operation.
Related to CSS, can I use font awesome icons https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css? I’ve downloaded them but the usual @@ syntax doesn’t work as they usually require the tags.
There is a tiddlywiki font awesome plugin somewhere, specificaly for the icons.
Thank you, I’ve found it: TW Icons v1.10 — A large collection of icons for TiddlyWiki.
I’ve exported an icon and imported it into my tiddly. Then, is it correct to use it as a transcluded tiddler like so: {{$:/images/phosphor-icons/regular/first-aid-kit}}? This is the only way I could make it work.
These are svg icons, and not Unicode etc… but many are available.
Yes you can transclude, but in come cases you may rename the tiddler to something simpler, or you can even copy and past the svg within it.
What seems odd is that, if I copy the SVG code to a fresh tiddler and select the SVG as the content type, it doesn’t render. If I leave the content type empty, it renders.
Sorry, I forgot. Thats because they have a type field that supports svg. There are a couple of different steps to use them the way I suggested, with a paste.
I am looking for my notes, no luck so far
Well, importing, renaming and transcluding actually sounds just fine. I’m going to stick with it