Trying to Get CSS Stylesheets Working

[David]

I tried to implement the CSS Stylesheet code in these two tutorials, but it seems like the sheets were never loaded.

http://tobibeer.github.io/tw/style/#Custom%20StyleSheets

https://tiddlywiki.com/static/Using%2520Stylesheets.html

Though I'm I'm very good with CSS code, so that's not it.  Besides, I'm just running the simple stuff from the tutorial examples anyway.  It's not affecting the code in the Tiddlers.

I am naming the Stylesheet tiddler this: "$:/tags/Stylesheet" like it says in the tutorials.

Then I paste in the code from the tut.

Then I set the "type" to "text/css"

Both of these tuts mention module, but I don't see a field for that.

Then I save the Tiddler and the whole file

Then I reload the file in the browser.

Is there something wrong with the way I'm creating the stylesheet tiddler?

I'm mainly interested in adding some extra styles to the Heading elements.  But for the future, it would be good to get the stylesheets working in general.

[Eric Shulman]

On Thursday, February 27, 2020 at 1:14:56 PM UTC-8, David wrote:

I tried to implement the CSS Stylesheet code in these two tutorials, but it seems like the sheets were never loaded.

I am naming the Stylesheet tiddler this: "$:/tags/Stylesheet" like it says in the tutorials.

That is the error.  The instructions in both tutorials say to TAG the tiddler with "$:/tags/Stylesheet".

Give your tiddler ANY name, but add "$:/tags/Stylesheet" as a TAG value

 

Then I paste in the code from the tut.

Then I set the "type" to "text/css"

The tutorial from TiddlyWiki.com says this:

Usually it is best to use the type text/css for stylesheets. This treats them as plain stylesheets, and ensures that TiddlyWiki doesn't apply any wiki processing to them.
If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type text/vnd.tiddlywiki. This allows full WikiText processing to be performed.

Note that, as long as you don't actually use macros or transclusions in the stylesheet, you can leave the "type" field blank (or use "text/vnd.tiddlywiki") and still get the desired results.

 

Both of these tuts mention module, but I don't see a field for that.

I don't find any mention of "module" in either tutorial.  Also, in general, if instructions *do* refer to entering a specific field, you need to *create* that field in the tiddler editor.  Scroll down past the tiddler's "text" entry area, and you will find controls like this:

Add a new field:    add

 

enter the desired field name and field value and then press the "add" button.

Then I save the Tiddler and the whole file 

Then I reload the file in the browser.

If done properly, the effects of a stylesheet tiddler (i.e., one that is TAGGED with $:/tags/Stylesheet) will be applied immediately upon saving the tiddler, without needing to save the file and reload.

enjoy,

-e

[David]

Thank you for so much good info. 

I did notice that it said to "tag" the tiddler with that string, which is what I tried the first time.  It didn't work, probably because of some other issue.  And when I saw the control panel and some other pages have tiddler names that started similarly as "$:/tags/Stylesheet", I assumed that's where it should be.  Of course, I was wrong.

Thanks for letting me know that css changes will happen instantly, and for info on adding the module field if it's ever needed.  I did see "module" mentioned somewhere, but sometimes when you're searching so much and trying everyone's variation... you forget where you saw stuff.

I really appreciate your help.  It's working now perfectly.

[TonyM]

David,

If you are a keen CSS user do publish some tips as we have a shortage of consolodated document in this area. At least for CSS novices.

Also see Controlpanel > Info > Advanced > Stylesheets 

$:/core/ui/ControlPanel/Stylesheets

The active sheets and the order in which they are applied in shown, drag and drop can reorder.

There is also a comprehencive tool for designing and manipulating css - cant find it just now

Tony