Dear fiends,
using projectify plugin you get to creat categories and choose a colour for them
and then that colour is the background of projects in that category when you view them in the projectify dashboard
but can this be extended? Can it be trhe background of the the projects and the tasks in that category when you view them in the story river?
maybe with a difference in opacity, so that you can tell the difference?
Thanks in advance!
The answer is pretty much always “yes” 
I don’t know projectify and how it tracks stuff.
But whatever makes a tiddler connected to a project (is it a tag?) is a fact that can be used to determine css styles for tiddlers that have that tag. (If the project is specified in a field, that too can be harnessed to set a css style for tiddlers that meet those criteria.)
Here’s an approach; customize as you like.
Make a tiddler (any title) with tag $:/tags/Stylesheet with contents like this:
<$list filter="""[has[color]]""">
[data-tiddler-title="{{!!title}}"] {border-left: 10px solid {{!!color}};}
</$list>
This will put a colored bar at left for any tiddler that has a color field. Demo here
If you want it to be the background, or you want it to apply only to tiddlers with a color field and also some other tag, etc., you can tweak as desired.
EDIT: Assuming your colors are in hexadecimal 6-digit form (which they will be if you choose them with color-field box interface), then you can splice in the following (before final } in css above) to get opacity-reduced custom-color background on those tiddlers:
background-color:{{!!color}}33;
HI Springer, thank you very much! A ribbon at the left of each tiddler is perfect!
In this case the tiddlers that I need the ribbon to be placed do not have a color field.
What the do have is a field called “category”
inside which the category name is placed. That is a tiddler that does have a color field. That is the desired color for the ribbon
Does this make sense? I’m trying to modify your code so that the color is Ttaken from the tiddler inside the category field (but it;s well above my skill level!)
Thanks again!
The desired effect is a bit more complex because stylesheets most easily orient to tags and titles. Other fields require a bit more gymnastics… I’m not sure the code below is as efficient as possible, but it should work.
The outer list finds out what the categories are (or rather, the categories that do have color values), and assigns a variable, which is passed to the inner list.
The inner list makes a style declaration for each tiddler within that category.
(In theory, this could all done with just one list, but I found this approach easier to troubleshoot, and it’s careful not to make ill-formed style declarations, which would be a risk if you had a tiddler with a category that didn’t have a tiddler, or whose tiddler didn’t have a color assigned.)
<$list filter="""[has[category]get[category]unique[]] :filter[has[color]]""" variable="thisCateg">
<$list filter="[category<thisCateg>]">
[data-tiddler-title="{{!!title}}"] {border-left: 10px solid {{{ [{!!title}get[category]get[color]] }}}; background-color:{{{ [{!!title}get[category]get[color]] }}}22;}
</$list>
</$list>
@Springer great work as usual, I wonder if value could be found in creating a simple solution that adds this “ribbon at the left of each tiddler” drawn from a cascade of tiddler field OR from the tags color, or from the tags tag color.
The projectify example, Imagin if a tiddler with the tag “project” had a LHS-color (left hand Sidebar) field use it. This sets the color here.
Eg; “My Project” tiddler has “LHS-color=red” and gets a red sidebar.
If possible we may use the color field of tags rather than LHS-color.
[Edit] The more I think about this the more I think we could have a solution that uses a tiddlers color field to drive this rather than a custom color field, except for tags the color field is typically not used.
We then build a cascade to determine a color, even if a color field is not present.
We then use the color value found, as follows;.
This too could be a related but separate solution, however one finds a color value, we could provide a set of “color options”, eg Left hand sidebar, a border, a line under the title etc… you select one and all tiddlers (by default) uses that element to display the color value found.
Yes, this would be a welcome approach for folks — like me — for whom cognitive orientation to a visual array is greatly enhanced by color recognition!
While at it, we could support maximally-accessible palettes, so that if a solution of this kind is deployed in any ways that circulate beyond individual use, we have a strong chance of sticking to contrasts that will be useful to a maximally wide range of people.
@Springer @TW_Tones This works great, thank you very much! Also, if there was a way to set a sidebar and/or background color for all todo items within each project, maybe an even lighter shade of the projects color, or a narrower left hand sidebar, that would be great!
Thanks, I really appreciate your time!
Sure, you can modify as you need.
A quick and dirty way to remove the color bar at left, just for tiddlers tagged todo (while leaving the background color effect), is to add something like the following:
[data-tags*="todo"] {border-left: none;}
The extra asterisk here makes sure to include tiddlers where “todo” is just one tag among others.
Make sure this line comes after the other declaration which does assign a left border, so this instruction “has the last word”. (The declaration that comes last in a css (cascading stylesheet) array “wins.”)
Hi, thank you Springer! While the “project” tiddlers have a category field
via which the projects color is selected, the “todo” tiddlers do not.
Instead, the are tagged by the project’s name, like so
Alas, modufying the code in order to build the appropriate correlation is way beyond my skills level.
Thanks again for your help!
Yes, You have to look at the tags on the current tiddler and see if any of them are also tagged with the project tag, then get the project color, or a class to use.
Hi again, think I’ve found it, posting in case it might be of use. The following code inside a tiddler tagged $:/tags/Stylesheet should produce the desired styling effect for tasks (todos) created with the projectify plugin
<$list filter="[has[category]get[category]unique[]] :filter[has[color]]" variable="thisCateg">
<$list filter="[category<thisCateg>]" variable="project">
<$list filter="[tag<project>]">
[data-tiddler-title="{{!!title}}"]
{border-left: 10px solid {{{ [<project>get[category]get[color]] }}};
background-color:{{{ [<project>get[category]get[color]] }}}11;}
</$list>
</$list>
</$list>
thanks!