[TW5] Tiddler border colour is tag colour?

207 views
Skip to first unread message

AlexHough

unread,
Jul 31, 2014, 6:31:39 AM7/31/14
to tiddl...@googlegroups.com
Hello there,

I'd like to make the Tiddler border colour to match tag colour. It might  be better to use a separate field -- what if I had two tags?

If the latter, i'd like to pick the tag which I like to share its colour with the border.

I'd also like to change the line attribute of the border to make it looks more fuzzy of cloud like for one of the tags.


! Application Context

Within my TW I have a set of six tags which all relate to a category. I want these tags and these tags only to change the colour of the border. One of the members of the category  is 'environment' and is usually drawn as a cloud. I'd like to evoke this to some degree, a misty or irregular border to highlight the idea that the boundary is not solid, but fluid and changing.

Thanks in advance

Alex

Jeremy Ruston

unread,
Aug 1, 2014, 12:48:01 PM8/1/14
to TiddlyWiki
Hi Alex

For 5.0.14 I've added a feature whereby each tiddler frame in the story is given a CSS class corresponding to each tag. Thus, a tiddler tagged "introduction" will get the tag "tw-tag-introduction". More complicated tags like "$:/tags/stylesheet" will be URL encoded:

tw-tag-%24%3A%2Ftags%2Fstylesheet

So, you'll be able to add a custom stylesheet with definitions like this:

.tw-tag-cloud {
 background-color: #eef;
 <<box-shadow "0px 0px 15px rgba(0, 0, 255, 0.9)">>
}

And then any tiddlers tagged "cloud" will have a blue background colour and a blue misty fringe (see below).

Best wishes

Jeremy

Inline image 1



--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.



--
Jeremy Ruston
mailto:jeremy...@gmail.com

Alberto Molina

unread,
Aug 1, 2014, 2:41:10 PM8/1/14
to tiddl...@googlegroups.com
Great!

Alex Hough

unread,
Aug 2, 2014, 6:25:45 AM8/2/14
to TiddlyWiki
That's fantastic Jeremy! Amazing....

Another thought: could the border be constructed from small images, a kind of fractal border...

I recall (perhaps incorrectly?) you mentioning somewhere about Cicely, how borders could indicate the 'depth' at the reader is in the text, ie, its position in a hierarchy.

If the border's appearance could be linked to other attributes of the tiddler it could open up other visualisation possibilities. The more changed the tiddler for example, the more solid... or the higher the number of links the more spikey. Just some ideas, may not be an avenue worth pursuing.

BTW, how do I download 5.0.14?

Alex


On 1 August 2014 19:41, Alberto Molina <Alber...@gmail.com> wrote:
Great!

PMario

unread,
Aug 2, 2014, 8:09:08 AM8/2/14
to tiddl...@googlegroups.com
On Saturday, August 2, 2014 12:25:45 PM UTC+2, AlexHough wrote:
Another thought: could the border be constructed from small images, a kind of fractal border...

IMO just adjust the CSS accordingly.

-m

Jeremy Ruston

unread,
Aug 2, 2014, 8:43:19 AM8/2/14
to TiddlyWiki
Hi Alex

Another thought: could the border be constructed from small images, a kind of fractal border...

As Mario says, that is possible with CSS:


I recall (perhaps incorrectly?) you mentioning somewhere about Cicely, how borders could indicate the 'depth' at the reader is in the text, ie, its position in a hierarchy.

If the border's appearance could be linked to other attributes of the tiddler it could open up other visualisation possibilities. The more changed the tiddler for example, the more solid... or the higher the number of links the more spikey. Just some ideas, may not be an avenue worth pursuing.

This kind of thing is entirely possible, but for the moment will still require JavaScript skills to experiment.

BTW, how do I download 5.0.14?

It's not released yet, I'm planning to do so over the next couple of days.

Best wishes

Jeremy
 

Alex


On 1 August 2014 19:41, Alberto Molina <Alber...@gmail.com> wrote:
Great!

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Alex Hough

unread,
Aug 3, 2014, 2:50:39 AM8/3/14
to tiddl...@googlegroups.com
Thanks Mario and Jeremy,

Looking forward to experimenting 

Alex

Alex Hough

unread,
Oct 21, 2014, 10:54:34 AM10/21/14
to tiddl...@googlegroups.com
Dear All,

How would I include an image in a tiddler in the  border-image-source attribute?

These are the attributes, normally it has the format "url(my-image.gif)"


  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
}



Alex
Reply all
Reply to author
Forward
0 new messages