Thanks Bimlas and JD for your feedback,

The customisation of links was only a later thought for me but you two have 
taken it a lot further.

Styled links certainly have their value at providing information about the 
tiddler the link references before opening it. If we go on to style the 
tiddlers once opened they should match a little.

Bimlas you say

> Although I like the principle, I am afraid it is difficult to mark several 
> conditions in one place. For example, if we were to play with the color of 
> the border, we would need multiple borders, denoting all of them at once:


I am not sure this limitation is correct, that is why I put out this call 
to identify elements we may style, then map them to something useful. 

In your example of the boarder we could have system tiddler use a dotted 
black boarder and shadow system tiddler a broken black border. Tiddlers are 
either system tiddlers or they they are non system tiddlers.  If an 
unbroken border means regular tiddlers then we can use a set of colours to 
indicate perhaps state new empty tiddler, editing tiddler... or 
New/active/in active eg green yellow and blue, with red for attention. 
Thickness of the border could indicate something else. Style, Thickness and 
colour are three "dimensions available just for borders.

What can we style?

   - Links (as you two mentioned)
   - Boarders around any element
      - Tiddler
      - Tiddler shadows
      - Titles/title bar
      - Icon
   - Titles and button background/border and shadows?
   - Title foreground color
   - Icon or and/or Icon color
   - Indicator on subtitle
   - Special button on a toolbar
      - I have one that indicates it has focus ie last navigated to or 
      selected.
   - Additional toolbar(s)
   - Tag color and icon
   - ....

While tags often group things and they are quite clear on a given tiddler, 
the user may wish to groups according to a field value where only one 
selection is valid at a time such as project name. 

   - If all items belonging to one project have an element the same then 
   locating them in links or open story would be helpful, as perhaps something 
   to do with status. 
   - Tiddlers and/or Projects may belong in a domain 
   Home/Personal/Work/Club so being able to colour code a domain would be help 
   full

We also have the icon, class and color fields on individual tiddlers.

   - See  my attached special SVG image, that displays a color swatch for 
   the currenttiddler in Question `{{||$:/PSaT/images/color-box 
   
<file:///C:/Data/TW5/!Smart%20Documents/BlogToSelf.html#%24%3A%2FPSaT%2Fimages%2Fcolor-box>
   }}

Possible new elements?

   - Inner and outer borders
   - Title Prefix/Suffix
   - Subtitle buttons and labels

But I still wonder;

What is the most meaningful information we can share with the user via 
subtle (or not so subtle) indicators?

   - eg; Tiddler size
   - Assigned type or object-type eg task/note etc...

In addition to your list styling ideas, I have a way of placing button that 
operate on the current tiddler, in fact edit with a click or open for more 
options, perhaps a hybrid makes sense?

[image: Snag_e96d3e7.png]
What colours mean what?

   - Black is serious system
   - Silver is code or explicit text
   - Sand is like papyrus a writing surface
   - Traffic lights and blue (in active)
      - Green is go or new
      - Yellow is in progress
      - Red Finished?
      - Blue is inert?
   
Subtle colors may not be visible to the sight impaired or colour blind but 
they should not make it difficult for them. Dots dashes and solid may be 
more useful to colour blind people.

More ideas please.

Thanks
Tones


On Saturday, 29 August 2020 14:42:04 UTC+10, TW Tones wrote:
>
> Folks,
>
> I have being playing with CSS and its integration into TiddlyWiki and 
> realise there is more than enough opportunity especially with the new Custom 
> styles by data tags 
> <https://tiddlywiki.com/#Custom%20styles%20by%20data-tags> etc... to 
> realise a smart, subtle and intuitive interface.
>
> This is not an idea for a theme, nor even just CSS but taking a range 
> tiddlywiki tiddler and page elements, that change and provide a subtle 
> variation particularly with colour, pale backgrounds, boarder style, 
> thickness and shadows.
>
> Examples may be
>
>    - A pail green background when a tiddler is in draft mode, 
>    - A Dark a green border if the tiddler begins with "New Tiddler" 
>    - A yellow boarder if the tiddler is an Orphan
>    - A Pale grey background if the tiddler an unedited shadow
>    - and many more
>
> The idea is to take common facts about tiddlers or the wiki as a whole and 
> use these to leave subtle messages to the user 
>
>    - We need not know the exact detail of such indicators, because if you 
>    use a consistent set they will become evident over time.
>       - This would be supported further, if we *produce a de facto 
>       standard and shared it widely *(or added to the standard 
>       distribution)
>    - They should be designed for light and dark themes and not influence 
>    the overall theme too much.
>    - Scanning down the story list it will be quick and easy to locate 
>    tiddlers based on these subtle colors
>    - When viewing or editing a tiddler various things will be evident 
>    that may not normally be visible, like this tiddler is also a tag.
>    - Using color and other elements, even just coloured shadows will not 
>    impact the layout in anyway.
>    - Perhaps something similar could be added to the standard list item 
>    so links suggest the tiddlers content as well.
>    - All this could be toggled on and off with a click.
>
> So I started this topic for *feedback and inspiration from the community*, 
> if you have any ideas such as the following please comment.
>
>    - Identify elements we can style in both view and edit mode
>    - Suggested meaning for things like dotted boarders
>    - Or meaning full associations with colors eg; red warning, green new, 
>    etc...
>    - What are the ways to identify these different attributes? eg no 
>    tags/tags  {{{ [{!!tags}is[blank]then[notags]] }}} {{{ 
>    [{!!tags}!is[blank]then[hastags]] }}}
>    - Indicating an over all wikimode?
>
> To support this effort I have also built a library of more than 800 named 
> colours, so a spectrum of colours can be used eg "Bigger tiddlers darker 
> boarder" etc...
>
> Regards
> TW Tones
>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/76cb961e-432a-4007-8e8e-2d151275fa4ao%40googlegroups.com.

Attachment: images_color-box.json
Description: application/json

Reply via email to