How Can I Overwrite the Basic Theme: Vanilla?

#4

If I understood you well…

The Vanilla theme has two kind of tiddlers: themetweak/settings and CSS tiddler. Maybe you only need to change The part of CSS. Then you have to options:

  • You could add a new CSS tiddler to the vanilla theme, it will use the Cascade of CSS to overwrite the previous styles (only you have to ensure that your new styles are loaded after of the originals). It is similar to how works the themes based on the vanilla theme (reusing the selectors).

  • The hard way. You will need to know the structure of the layout and its selectors and then you have to create your styles, it you could reuse some selector o create new selectors. But you maybe have to solve problems of specifity in your styles.

2 Likes
#5

I am only learning about this myself, some thoughts;

If you make enough changes and are comprehensive about it rather than overwrite the theme, you replace it. The advantage of it being there, is it’s a fall back for any elements you have not addressed.

I am not expert on this but I would keep themes and page layouts seperate. Start with cloning $:/core/ui/PageTemplate as per https://tiddlywiki.com/#Alternative%20page%20layouts and keep as many of the functional tiddlers in the process “as is” and cloning or introducing new tiddlers to your alternative layout as needed.

  • Keep in mind that the cascade methods are available and these can be relied on for a lot of design influence.
  • During this development process you may identify existing classes and selectors or a need for additional CSS to help support your layout.

With the theme I suggest leaving the basic theme in place and using a clone to rewrite it, an empty list-after field should always make it the last stylesheet to take effect. If you need eventually to remove the Vanilla theme only do it for your published edition at the end when you are confident you have handled all requirements.

  • If your changes are substantial and you have a problem with css “leaking through” from the default theme stylesheet there are CSS reset/rebase methods you can use.
  • Remember CSS is as responsible for layout of elements as it is for the styling of them.

Perhaps editing the contents of $:/themes/tiddlywiki/vanilla until you have the required outcomes then generating a new theme plugin from the result is a good idea?

Please share your final approach @Mohammad

1 Like
#6

Hi Tony!

I am looking for a (peaceful :wink: ) method to replace vanilla theme! As @Alvaro explained I have to know the structure of layout and its selectors,… This is the hardway!

As we discussed few times before the UI of TW has not grown as much as its WikiText has grown and got advanced features.

If we can find a simpler method to shape the visual face of TW, then we can have different variants.

#7

I tried to understand and improve JD’s material theme some years ago.

One thing I did was compare the diff between her layout tiddlers with the vanilla theme tiddlers. I could not make much headway because, at that time, my knowledge of TW was minimal.

I gave up and made myself live with the vanilla theme until I gathered enough TW knowledge and time to create a theme of my own.

Perhaps, you, too, can start with this “viewing diff” strategy cause your knowledge of TW is far superior to mine. Pick a simpler custom theme like Zacht, understand how it changes the layouts, and move to more involved themes like Captivate.

This is a good tool for viewing diff.

1 Like
#8

This would be an immense contribution. TW lacks modern themes. And customizing the layout aspect of TW is not well documented.

Compare TW’s meager list of themes with some other tool like Hugo’s.

  1. https://themes.gohugo.io/
  2. https://hugothemesfree.com/
2 Likes
#9

OK. … I think there would be some “reverse engineering” for the documentation be needed first. …

As I wrote at: Search for TW classes and where they are used in the UI - #4 by pmario the easiest way to start would be with little helper styles, that outline a certain class.

Then it would need to be documented. May be some additional docs for the TW-dev wiki where every class-name is documented for what it is used at the moment. …

May be every class name and class combination that is defined in the vanilla palette should get its own tiddler with a little <style>.tc-somethin {outline: 1px solid blue}</style> definition. So the outline is only shown if the tiddler is open in the story river.

Together with the new Palette Manager that will connect the colour names to the visual elements, this would probably be a solid fundament to start with.

I think without that basic info your endeavour will be an endless task.
Very likely your theme will be very specific to your usecases and your opinion.

But what we need as a community is basic understanding how the templates and classes work together so we can modify it to our liking.

Just some thoughts.

BTW Nobody did try to create a new PageTemplate + all children from scratch, because the info I did mention above is missing.

2 Likes
#10

There would be a second step involved, which needs some knowledge about the core javascript code, because some classes are “hardcoded” there. …

I would be willing to help with that part of the documentation, but I don’t have the time to create the first part mentioned in the other post.

I’m struggling to finish the Palette-Manager project, because every time I add a bit more docs to publish it, I find a new inconvenience that needs to be fixed first. :confused:

-m

2 Likes
#11

Many thanks for your clarification and hints.

I will investigate and document my finding in a wiki and then will share!
I will also look at some alternate page templates out there.

#12

Ciao @pmario & @Mohammad,

Three naïve comments from an end user :slight_smile:

  • From my point of view “Vanilla” is only superficially difficult. But mainly that is due to its size and scope. Practically I found that once I can see what the main containing CSS classes do it gets a lot, lot easier. So, in practice, this issue could get easier IF we had …

  • … a TW CSS Trainer edition … I’m thinking along the lines of what @BurningTreeC has done for the special classes in MCL (see “Documentation”) where he live demos the main container classes. What I’m getting at is visual feedback of what classes do what is, to at least me, extremely helpful. Maybe that is relevant here too?

  • I’m not sure if it is still helpful, but, in past, I found @telmiger’s Bricks Plugin very useful for thinking about CSS in TW and handling Vanilla.

Comments, TT

#13

As I wrote the palette manager already gives a good overview about colours and related elements. The only thing missing is the connection from there to the real tc-classes used in TW.

It should be possible to add some links from there to the “to be written” docs about the classes.

2 Likes
#14

Right.

And what you doing on palettes is brilliant! Making clearer, as you are doing, how they work with CSS classes is gonna help everyone colour better!

My point was more generic to the OP.

Does “Vanilla” need to be overwritten? I dunno!

I personally think it is rather well written, though very difficult (because of it’s size) to get your head around just reading it’s code.

My point was simply whether a more interactive visual way of understanding it, that teaches you the classes interactively via screen demo could help?

Just a thought
TT

#15

I think it would be interesting to build a new theme from scratch. Starting with the page template and having mobile and accessibility in mind from the beginning.

I personally do like the existing TW UI using it with the desktop. But it is kind of unusable with mobile.

I think for mobile the main page should have much less noise, which imo would also be a good thing for screen readers on desktop. Since there would be less elements visible at the same time.

#16

Just a comment (from someone who isn’t a back-end coder who understands any core issues).

I think I get what you mean.

But IF you happy on desktop already IS the solution for mobile needing a new base?

Or simply some kinda Startup Actions? to reduce the CSS when a mobile is detected?

Just a naïve comment!
TT

#17

I am back to your first question.

And pointing out “Vanilla” is a few things, not just one.

To change that “Vanilla” CSS in TW we DO need understand what it IS and what it DOES, I think. It does a LOT more than most CSS themes.

Just a comment, TT

VANILLA BITS ...

I’d guess the BASE is the Proof-Of-The-Pudding.

I think it a great piece of work, but huge, and it is NOT simple CSS.
It involves TW macros.

Basta, TT

#18

Well, Vanilla is important to the world economy… :slight_smile:

#19

Short answer. You can!

Question: Do you want to rewrite over 500 CSS rules?

Would you be better than JR?

#20

The creation of new theme from scratch, it is the top hardway. Then we have to create the new UI with their elements, maybe we will forget some elements. The key would be the vanilla theme but also it can bring to us its complexity and its derivated problems. My doubt is when we could reduce the complexity of the vanilla theme: before or after starting the new theme.

The second question is how can reduce the complexity in the new theme (¿and in vanilla?). I think the best way is “divide et vinces”. Maybe it could be separated in 3 or 4 groups, but the problem would be have understandabled (¿clear?) limits. I think in groups as: layout, theme and palette (and maybe reset styles). But I’m not sure that everyone sees them with the same clearness (or maybe I would be wrong in how I thouthg about them).

I found me with a problem when I try reduce the complexity by division, I could do more division than the needed group. Welcome to the new complexity!!

#21

Your post was interesting, and indicative, I think.

Trying to convert a vast system is likely prone to failure unless you are vast enough you can do it.

IMO the TW base CSS is good.

Regarding your “3 or 4 groups”, well sure so long as you have the hours to reorganise the Base, go for it …

TT

1 Like
#22

Yes, we have a functional CSS but it is labyrinthine.

Yes, it is the reason for that I call it “top hardway”. But it will be more easy if we can do it in steps because there are many parts in each group, for example we have several templates (pagetemplate, viewtemplate, …) will be part of the layot.

#23

If I may put this in a simple way, CSS is cascading, Overwriting a theme is what CSS does, piece by piece. Whilst we can and should answer the OT I do want understand the WHY?

  • It’s a bit like someone saying they want to Replace a big part of the genome of a species.
1 Like