Unable to override CSS without !important?

#1

Splitting off of: General Questions about Large / Complex Stylesheets

So, I’m at a little bit of an impasse.

I have my main stylesheet for a theme as $:/themes/jmh/archivistic/base

\import $:/themes/tiddlywiki/vanilla/base
\import [prefix[$:/themes/jmh/archivistic/macros/]]

{{$:/themes/tiddlywiki/vanilla/reset}}

/* Default CSS elements */

{{$:/themes/jmh/archivistic/base/default-css}}

...

and within $:/themes/jmh/archivistic/base/default-css

	:root {
		-moz-tab-size: 2;
		-o-tab-size: 2;
		tab-size: 2;
	}

However, even thought default-css is being transcluded after reset, the vanilla reset is what tiddlywiki is using instead of my preferred tab-size.
The only solution I have found is to use !important however I would like to avoid that if possible.
Am I incorrect in thinking that the further down a tiddlywiki the code is, the higher the priority? IE.

color: red;
...
color: blue; /* Blue would take precedence. */
General Questions about Large / Complex Stylesheets
#2

Just a guess here.

$:/themes/tiddlywiki/vanilla/reset comes alphabetically after $:/themes/jmh/archivistic/base. My guess is that they both have $:/tags/Stylesheet, and that they are included in alphabetic order.

To test this, remove $:/tags/Stylesheet from the default and see if it fixes it. If so, we could explore other solutions.

#3

Yes, but that’s CSS, not so much TiddlyWiki.

You are specifying one of the reasons why @layer was introduced. At any point in your CSS, you can specify that a chunk of CSS (bunch of rules) should be applied AT/IN/TO a given layer and not have to worry about “order” (so much).

#4

You need to read this entire article and THEN see why creating a layer…

@layer tiddlywiki-defaults { ...

gives you (us!) everything you need.

#5

Both the default-css tiddler and vanilla/reset do not have $:/tags/Stylesheet, $:/themes/jmh/archivistic/base is the tiddler that has that tag.

So… I think I have this correct. I should have:

\import $:/themes/tiddlywiki/vanilla/base
\import [prefix[$:/themes/jmh/archivistic/macros/]]

@layer reset, default-css, default-tiddlywiki, mobile, desktop, print;

@layer reset {
{{$:/themes/tiddlywiki/vanilla/reset}}
}

@layer default-css {
{{$:/themes/jmh/archivistic/base/default-css}}
}

Where the @layer will list them in the order that I declared above, so the reset shows the CSS, and the section listed after it will override any duplicate values in the previous ones, ie layer reset’s :root would be overridden by layer default-css, right?

I still have a bit of reading to go to fully grasp it, but I think that is how I’m supposed to use them.

EDIT: Nope, that broke a lot, gonna keep reading.

#6

That is a layer order statement (which I don’t think you need).

I can’t get into the specifics of what you’re trying to do, no time. All I can say is, ADD my @layer line to ANY and ALL standard tw css tiddlers. On the old thread, I pasted a cope of my modified version.

Caveat: I am NOT saying the path you’re on will not work, I’m just saying it’s not what I did. Clear? My experiences with themes is approximately the same as the experience I have with piloting a Space Shuttle.

1 Like
#7

Sort of…? I see why it is neccesary, 100% However I am unable to get it to work as intended even following the guidelines set in the webpage about @layer.

I think it would be best if I wait and see if anyone else could elaborate on what might be missing here, or until you’re available. :grinning_face_with_smiling_eyes:

I want to say my issues are occurring from a misuse of {{$:/themes/tiddlywiki/vanilla/reset}} but I don’t know how to remedy that or what I am doing incorrectly. I imagine it’s used to give a baseline, like in $:/themes/tiddlywiki/vanilla/base and the css after it overrides it, but being that I am transcluding tiddlers just as the reset tiddler is, it is going alphabetically as @Scott_Sauyet pointed out.

So I think the @layer should remedy that, but since vanilla/reset isn’t tagged as a stylesheet by default, I can’t seem to get it to work?

I think I would do best to create an example tiddlywiki, so I will begin that in the meantime.

#8

Have a closer look at: Info → Advanced → Stylesheets → $:/tags/Stylesheet tag pill, where you can change the sort oder of the stylesheets.

grafik
grafik1085×807 53.5 KB

2 Likes
#9

I’ve created a demo TiddlyWiki for reference, but my stylesheet encountered the same issue when it was both listed after $:/themes/tiddlywiki/vanilla/base and listed before it.

#10

@Justin_H the order of items is Normaly determined by the stylesheet tag but if you import them you are ineffect including them again and may reorder them as a result. Try and keep them organized by the single stylesheet tag. The last one wins.

#11

I’m… not sure I understand :thinking:

They are being recognized as stylesheets twice even though neither tiddler is tagged as a stylesheet, but are being transcluded into a tiddler that is tagged as a stylesheet?
I would need to tag each tiddler as a stylesheet, including $:/themes/tiddlywiki/vanilla/reset then, would I not?

#12

For me it seems to work just fine, if I remove all the quirks.

grafik
grafik1247×1277 54.5 KB

Why do you mess with :root? Use body, it’s OK there.

You could also change the reset if you want to.

-m

#13

I was using $:/themes/tiddlywiki/vanilla/base as a starting point and used what was being used in it. In hindsight, probably best if I know what each part does prior to using them… :sweat_smile:

As in overriding the shadow tiddler? I like to avoid doing that when I can, but I will keep that in mind.

When you say remove all the quirks, can I ask what you removed?
If it is \import, is there a way I can still use the macro definitions in vanilla/base without importing the tiddler?
I found removing the reset and changing it from :root to body fixed the issue for me. (and also making sure that my stylesheet is list-after vanilla/base)

This is what I currently have now.

\import $:/themes/tiddlywiki/vanilla/base

@layer mobile, desktop, print; 

{{$:/themes/jmh/archivistic/base/default-css}} /* unnamed layers take priority, so this will allow pre > code to work correctly. */

@layer mobile {
{{$:/themes/jmh/archivistic/base/mobile}}
}
@layer desktop {
{{$:/themes/jmh/archivistic/base/desktop}}
}
@layer print {
{{$:/themes/jmh/archivistic/base/print}}
}

EDIT: Ah, I see now, you placed the red square showing that you Had removed things, and what is left is what should be left.

#14

Sorry. That was a bit harsh, but for me it looks a bit over-engineered.

You’ll need the \import to use the macros.

With quirks I mainly meant the transcluded reset and all the @layer stuff. Have a look at the screenshot.

I did not have a closer look at your “desktop”, “print” and “mobile” CSS. I only had a look at your /default-css, which included the tab-settings.

#15

Not harsh at all! helped me figure out what was going on, which was perfect!

And yea, it may be over-engineered. I think using @layer may be useful for something else later down the line for me. I got a bit caught up in the new CSS feature, like a kid with a new toy, if you will :grin:

The desktop and mobile are just placeholders for reference, I did not import those tiddlers into the demo, so no worries there!

#16

OK. I think those new features will be useful in the future. It’s good to make some experiments. But I also think, that those features should be in the concept from the beginning. I’m not sure, how easy or complex it will be to add them to a CSS like vanilla.

In the other thread I wrote, that vanilla/base grew from about 1200 lines of code into 2700 locs that we have now.

Using layers we may be able to strip down quite a bit. Especially, since we have some CSS code, where we apply some “highly specific” styles for some elements, just to remove them for others several lines later.

That’s not really healthy, but backwards compatible :confused:

#17

I read some @layer documentation, and it is indeed very useful. It can lower the priority of the style as a whole, so that the style can be easily without any !important. But I think this may cause some trouble when troubleshooting style issues, It’s easy to accidentally modify some theme styles.especially for tiddlywiki. I haven’t really used this feature yet

#18

As I said elsewhere, I changed the core stylesheet to have @layer tiddlywiki-defaults in January 2023.

No issues.

But to backup @pmario’s point, I would agree that @Justin_H’s “solution” was getting too complex “over engineered”. I kept mine as simple as possible and it gave me everything I needed.

KISS (Keep it simple, stupid).

#19

I might use the @layer feature on a small scale in my personal plugin, it should be nice

#20

I think the same, and I have begun my own version of the default stylesheet here: Minimal CSS — (WIP) Light & easy to tweak (tiddlyhost.com)

Still a work in progress, but it’s starting to become usable. For now I’m at around 90% less css code (with no concern for backward compatibility)