Palette Diagram

231 views
Skip to first unread message

Tiddly Novice

unread,
Nov 8, 2020, 4:57:16 PM11/8/20
to TiddlyWiki

The palettes for themes has a lot of different items listed, but it's not intuitively obvious what item refers to what part of the gui. I've spent far too long trying to hunt down the item/value pairs I want to change. Can someone (who actually knows TiddlyWiki, thus not me) make a diagram explaining all the items that can be set?

TW Tones

unread,
Nov 8, 2020, 7:51:06 PM11/8/20
to TiddlyWiki
Hi,

Good question, and some of us have tried, but it is a big Job. Then someone changes the theme and many things change.

The main method is to learn how to use your browsers developer inspect tools to select an element and see the classes in use there.

You can then search for those values/classes in tiddlywiki advanced search, many you will find in the vanilla css stylesheet.

To test create you own stylesheet and add color or something to test then override the default. 

Regards
Tones

TiddlyTweeter

unread,
Nov 9, 2020, 6:19:33 AM11/9/20
to TiddlyWiki
Tiddly Novice

There is no comprehensive contextual GUI guide to the TW coloring book (palette).

The CSS class names that apply colors can help a lot as they are descriptive. 

There are also plugins, though prob a bit advanced if you first using TW, dealing with help set complementary colors too.

FWIW, most designers will be using the browser's "Inspection Tool" to see directly in rendered code what coloring classes are being used where.

Bit of side info...
TT 

W Yan

unread,
Nov 9, 2020, 7:41:18 AM11/9/20
to tiddl...@googlegroups.com
Using browser inspection tools is a good idea, but elements like Alerts, Blockquote, Codes, Modals etc. are not something you can inspect right away; You need to make them first, or search for them, which is a bit inconvenient (and hard, for beginners). I think it would be great to have some kind of 'reference tiddler' for tweaking palettes, like a single tiddler that contains all the elements you can customise. Just a thought.
 
W Yan


09.11.2020, 14:19, "TiddlyTweeter" <tiddly...@assays.tv>:
--
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/97b7c4f8-02aa-4e70-8efe-d05a481aeb78o%40googlegroups.com.

PMario

unread,
Nov 9, 2020, 7:41:56 AM11/9/20
to TiddlyWiki
On Sunday, November 8, 2020 at 10:57:16 PM UTC+1, Tiddly Novice wrote:

The palettes for themes has a lot of different items listed, but it's not intuitively obvious what item refers to what part of the gui. I've spent far too long trying to hunt down the item/value pairs I want to change. Can someone (who actually knows TiddlyWiki, thus not me) make a diagram explaining all the items that can be set?

Hi,

You are right. There is room for improvement. ... I did have a look at the data "structure". It should be possible to add a new "sub-table", which splits the different elements into different tabs. Those tabs will only show those parameters, that belong together - plus - an example element. This should make experimenting much easier.

The problem is 2-fold

 - As a user I don't want to carry the examples around in my working environment
    - because once I'm OK with my settings it's very unlikely to change them again.
    - IMO it should be a plugin, that can be removed once I don't need it anymore.
 - I don't have time atm to create this pugin

have fun!
mario

TiddlyTweeter

unread,
Nov 9, 2020, 8:40:34 AM11/9/20
to TiddlyWiki
Ciao W. Yan

W Yan wrote:
like a single tiddler that contains all the elements you can customise. Just a thought.

That already exists in TW. See:  $:/ControlPanel > Appearance > Palette then scroll down to start editing a palette ... here is an example ...

Screenshot 2020-11-09 143150.jpg


The OP was, I think, mostly about IN-CONTEXT seeing the final effect, rather than adjusting in a list where you can't.

Best wishes
TT

W Yan

unread,
Nov 9, 2020, 9:28:17 AM11/9/20
to tiddl...@googlegroups.com
Hi TT,
 
Those are 'indicators' of what you can change, not an actual element. For example, if you change the palette of Alert background in the editor, you are not going to see the change because that particular element is not visible yet. What I'm suggesting is having a separate tiddler that contains actual elements so that you can view the result right away.
 
Regards,
W Yan
 
 
09.11.2020, 16:40, "TiddlyTweeter" <tiddly...@assays.tv>:

TiddlyTweeter

unread,
Nov 9, 2020, 9:32:00 AM11/9/20
to TiddlyWiki
PMario wrote:
... plus - an example element. This should make experimenting much easier. 

Right. The OP, as I read it, is about understanding IN-CONTEXT.

I think it true to say that CSS in TW is currently difficult MERELY because we don't make changing it easier

It actually uses a very well thought through CSS design.

It is about as lightweight as you can get IMO.

BUT for lightweight palette creation an interactive IN-CONTEXT system might not be so hard and be used?

Best wishes
TT 

TiddlyTweeter

unread,
Nov 9, 2020, 9:36:22 AM11/9/20
to TiddlyWiki
Ciao W Yan ...

Those are 'indicators' of what you can change, not an actual element. For example, if you change the palette of Alert background in the editor, you are not going to see the change because that particular element is not visible yet. What I'm suggesting is having a separate tiddler that contains actual elements so that you can view the result right away.

Ah. I now understand!

You mean SEEING RESULTS INTERACTIVELY!

I agree.
TT 

TW Tones

unread,
Nov 11, 2020, 12:57:23 AM11/11/20
to TiddlyWiki
I have being dreaming of this for some time.

The interactive results could be a dummy view of a tiddlers whose content looks like a whole standard wiki with the elements changing with a change in value.

Tones
Reply all
Reply to author
Forward
0 new messages