How Can I Overwrite the Basic Theme: Vanilla?

#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
#24

The answer is: Absolutely I am not better! :sweat_smile:

#25

I think that a very good question!

It is obvious from this thread, and other recent threads, there is dissatisfaction about “Vanilla Base”.

I, myself, in past, thought it rather monolithic too.

But I never felt it inadequate. More, a brilliant piece of work of huge complexity that works out-of-the-box.

IMO it is merely needing some help to understand it IF you need leverage it!

This thread has been interesting!

WHY is @Mohammad asking for a “wipe-down method” (a phrasal verb meaning “get rid of it”)?

Rather than “How can we help users make the best use of Vanilla?”

A comment
TT

#26

I’m glad you created this thread!

I do think it will help clarify what exactly the issue with “Vanilla” is that some users find difficult!

Best wishes
TT

#27

Something that I think would be very helpful to keep css organized when creating a new theme :

It’s a pretty new feature but it is supported on all browsers.

any styles declared outside of a layer will override styles declared in a layer, regardless of specificity.

The default theme should be declared inside a named layer in order to easily override it.

2 Likes
#28

Hi :slight_smile:

Although it is not a plugin :wink: it might offer some hints on how to handle CSS better than in endless stylesheets like the vanilla base. On the other hand it is not very useful anymore because the CSS is not up to date. While the TW core team is very careful regarding backwards compatibility of functionality, new versions sometimes come with new versions of styles and the underlying structure of HTML sometimes changes. So backwards compatibility for styles is not guaranteed and updates would be needed for new versions of TW. (A good reason to build your own layout and logic from scratch.)

In order to hack some design aspects without touching the core, I resorted to rather complicated CSS sometimes. Example: Apply this style to a button inside a div inside a span in the last div in the sidebar Open tab. – When the span was changed to a div in the core, that broke my CSS. (I am not sure it really happend this way, but I hope you will get the idea.)

So the principles from Bricks I still think would be useful for future TW versions and themes:

  • use lots of CSS tiddlers
    • almost every aspect of every element should get its own (everything is a tiddler)
    • performance should not suffer from many CSS tiddlers as far as I know
  • use tiddler titles and CSS comments instead of separate documentation
  • use CSS to show/hide elements wherever this seems reasonable
    • especially for development it can be useful to find stuff still in the code even if it is not visible
    • I think many reveal widgets in templates could be omitted this way – and sometimes reveal widgets lead to effects that make styling complicated
  • use the tag $:/tags/Stylesheet to let users apply CSS in a config interface (e.g. tiddler shadow)
    • this has a disadvantage: tiddlers might be changed and not updated when a plugin/theme is updated
  • a stylesheet manager – like Bricks has it – would be great to manage plenty of style tiddlers

Examples can be found in my Tix plugin that creates a new story river with a new tiddler layout:
https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FTix

My intention was to embed Tix in my own page layout and theme “Lox” later – but that project is on hold at the moment. I am afraid that it would consume too much time to implement a reasonable amount of TWs many features and options.

Cheers and good luck!
Thomas

6 Likes