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

Google Group (Read Only)
#1

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?

Code formatting is being lost in import
#2

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

#3

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 :slight_smile:

Thanks again!

#4

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.

#5

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?

#6

<<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.

#7

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.

#8

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 :slight_smile:

#9

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!

#10

You can include the paltte in the theme.
Here you have two examples:

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

#11

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.

#12

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?

#13

If you change “background” to green the tiddler background take it.

#14

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

1 Like
#15

Thanks Tones,
I’ll take a look at it!