Tw-Themes: How to keep CSS so users can still (palette) tweak?

[Finn Lancaster]

Hi,

Recently I have been working on my tw5-primer theme, and some feedback I have gotten suggests that the theme doesn't allow palette tweaking. Testing on my own, I was able to verify it, indeed, doesn't allow this behaviour, and I have begun to fix it.

Here is the issue: even simplifying the CSS, the theme still overrides the palette changes. For example, if I am working on .tc-body, I add the following CSS to my theme

body.tc-body {

     background-color: #000;

}

, which changes the background to black. However, if a user goes to change the palette, which, say, changes the background to white, it doesn't work, because the palette call of

body.tc-body {

     background-color: #fff;

}

is still overridden. As far as I can tell, my theme CSS cannot be simplified further to where it is not override ALL the timer.

Is any tw dev/experienced theme-maker able to help?

[Álvaro]

The color values from palettes are used via colour(/color) macro.

How you can see in $:/themes/tiddlywiki/vanilla/base  many values of some properties are direcly transclude or with macro.

For example, the selector mentioned by you:

body.tc-body {
    font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}};
    line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}};
    word-wrap: break-word;
    <<custom-background-datauri>>
    color: <<colour foreground>>;
    background-color: <<colour page-background>>;
    fill: <<colour foreground>>;
}

You will need create a palette for your theme

[Finn Lancaster]

Thanks @Alvaro,

Would you mind explaining how to make a palette? This is my first theme, but I do have some experience creating plugins, so I just need to be pointed in the right direction :)

Thanks again!

[strikke...@gmail.com]

Sorry if I am being stupid, but could it not be done going to $:/ControlPanel  select tab Appearance and then Palette. Go to the bottom of that and click the Show editor button. That will show the selected palette. Select clone palette. Then you can edit that. You will see how it is done and can choose the colours you prefer. That is at least a start.

[Finn Lancaster]

that seems to have worked, @strikke..., I'm guessing I have to include it in my theme files now, and that I can change my css to a text/vnd.tiddlywiki file, so that I can call colors such as <<code-border>> ? Is this correct to assume?

[strikke...@gmail.com]

<<code-border>> gives you the color number from the palette - that will be the colour the user of your theme has chosen as the active palette for their use of Tiddlywiki.

Sorry but I do not know much more about the subject.

[Álvaro]

A palette is basically a data tiddler, a dictionary that stores N key:value, with type application/x-tiddler-dictionary. Then you can use it with <<colour keyName>> where keyName can be page-background or others.

You don´t need change the type, that is the default type (I think). If your file has the correct tag ( $:/tags/Stylesheet ) then it works like stylesheet file.

you can see more of what was discussed here

Do not be scared of the number of entries in the vanilla palette, many keys reuse values, there are palettes with fewer entries. It is also something that has already been discussed about how to reduce the palettes, but it would be part of the hard rework in the styles of TiddlyWiki.

[Finn Lancaster]

Thanks, I'll look at doing this, and hopefully not run into any more issues so that I don't have to bother you anymore :)

[Finn Lancaster]

Started working on it, and already another question! It seems that I can't include a palette inside the theme, but instead may have to do it differently ???

My palette file looks like this:

description: Sleek dark skin for tw5, based on primer.css!

name: tw5-primer

title: $:/palettes/tw5-primer

tags: $:/tags/Palette

type: application/x-tiddler-dictionary

And palette code here...

Any ideas for what's going on? I'm thinking maybe the palette may have to be defined inside the css file??

Thanks for your (continued) help!

[Álvaro]

You can include the paltte in the theme.

Here you have two examples:

- Mono theme

- Notebook theme

There is another point that you can see, these themes start with $:/themes/ instead of  $:/plugins/ . They are a kind of plugin but you will see them in ControlPanel > Appearance > Theme

[Finn Lancaster]

Thanks @Alvaro, I’ll take a look at those. Already, the TW-primer shows up in the themes tab based on my changes on my end, I tend not to push to GitHub until the product is able to be used. 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5685c0fb-8693-4e55-8d20-748c0c8e4738n%40googlegroups.com.

[Finn Lancaster]

Everything seems to be starting to come together! I noticed in the Palette that background and page-background are different, what does background refer to?

[Álvaro]

If you change "background" to green the tiddler background take it.

[TW Tones]

An additional Note see Control Panel > Info > Advanced > StyleSheets

The order they are in determines which styles win. use <<tag $:/tags/Stylesheet>> and you can drag and drop the order.

Tones

[Finn Lancaster]

Thanks Tones, 

I’ll take a look at it! 

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ca0a1339-441c-4cf7-b321-d65ff90cc8e0n%40googlegroups.com.