From newbie to newbie: gradient colors work in TW5,too

[Pit.W.]

From newbie to newbie,

gradient colors worked in TWC based on a nice flexible macro; they are
possible in TW5 as well.

the following produces a gradient colored background for text, also in a
table. Firefox only.

@@text-align:center;background: -moz-linear-gradient(left, brown,
darkkhaki, khaki);color:black;
''This is the text''
@@

<table>
<tr>
<th style="background: -moz-linear-gradient(left, yellow, orange,
red);">This is the header</th>
</tr>
<tr>
<td style="background: -moz-linear-gradient(left, brown, darkkhaki,
khaki);">''It works in tables, too''</td>
</tr>
</table>

maybe somebody can use this.

Pit.W.

[Mat]

Great that you're sharing Pit! I recently did some experimenting for a thing I intend to release... eventually... Here's a part of it that might be of interest for you.

Paste the following into a tiddler and tag the tiddler "upholstery"

http://lea.verou.me/css3patterns/#upholstery
<style>
.tc-tagged-upholstery {
background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: white;
background-size: 100px 100px;
}
</style>

<:-)

[Alex Hough]

thanks Mario,

http://lea.verou.me/css3patterns/ was not on my radar.... very interesting

Alex

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5e9bae81-6cdf-4c14-9e53-9b46f8ea4ecc%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Jeremy Ruston]

The core uses the gradient fill pattern technique to indicate disabled plugins:

https://github.com/Jermolene/TiddlyWiki5/blob/master/themes/tiddlywiki/vanilla/base.tid#L1566-L1574

​

Best wishes

Jeremy.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CALc1hYdnkrHb%2BoyBKm%3DcneJ4oY1GT7kA%2B2%2Bht3va81SoTN6JdA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

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

[Tobias Beer]

Great that you're sharing Pit! I recently did some experimenting for a thing I intend to release... eventually... Here's a part of it that might be of interest for you.

Added instructions here...

Style Tagged Tiddlers @ style

Best wishes,

— tb 

[Sylvain Naudin]

Yeah, Tobias you're back :)

Best regards,

Sylvain

[Tobias Beer]

Yeah, 'bout time. Missed this. ^_^

[Pit.W.]

Am 18.09.2015 um 14:46 schrieb Tobias Beer:

Great that you're sharing Pit! I recently did some experimenting for a thing I intend to release... eventually... Here's a part of it that might be of interest for you.

Added instructions here...

Style Tagged Tiddlers @ style

Best wishes,

— tb 

Great, much obliged, Tobias.

Please allow an additional question:

I would want to use this gradient pattern as an optical indication of the workflow of documents (meaning tiddlers).
The wokflow - status needs to be stored is in a field, not in a tag - because I need the radiobutton functionality (meaning: the document can only one status: either draft or final or approved)

Now the question: is there a way to have a conditional template or stylesheet which is conditioned by the contents of a field instead of the name of a tag?

Thank you for your consideration,

Pit

[Tobias Beer]

Hi Pit,

 

Now the question: is there a way to have a conditional template or stylesheet which is conditioned by the contents of a field instead of the name of a tag?

I once experimented with that and I remember it not being as easily possible.

Unfortunately, it didn't really get far, yet.

better control of tiddler frame classes #1461

Another thing with fields is, they are key=>value pairs,

so your tiddler status may not only depend on the presence of a certain field,

but also on its value being or even just containing certain text.

Best wishes,

— tb

[Pit.W.]

but also on its value being of or even just containing a certain value.

Best wishes,

— tb

Hi tb

I think you just saved me from wasting several weekends of futile experimenting. Much appreciated, thank you!

Thanks for the link, too. Actually, it seens to address exactly what i mean. I will use it to steepen my learnng curve.

Pit

[Pit.W.]

Hi, fellow newbies,

i discovered something nice:

1. The goal: to develop an attrachtive color scheme for a Tw
2. The issues:
a. the css color coldes like #f7f7f9 confuse me
aa. Solution: there are names for css colors, which are easier to understand and do memorize, like   "Peru"
ab. you find them here:  http://www.w3schools.com/cssref/css_colornames.asp
ac. in this case we are fascinated by the clolor with the name "Peru"

b.We want to color several things in the same color, like: the Site title foreground and maybe other things,  like the Sidebar tab divider
bc. and maybe later we want to change the color of all these things from a central switch. (in the course of further developing the TW)(or when moving tiddlers betweent different tiddlywikis)

Well here is what I found:

1. I create a tiddler named like "$:/MyMain2016/admin/themecolor"
2. into the text i write the css name of the color , like in this case "Peru"
3. Then i go to the "cog wheel" thingy called appearence  and palette, and put the following code into the color field   {{$:/MyMain2016/admin/themecolor}}
The scary curly brackets do something called "transclusion", which means the the contents of the themecolor - tiddler (in this case "Peru") is used. And tiddlywiki understands it.

See the screenshot below, where I changed the Site title foreground to the brownish color "Peru" by transcluding the tiddler by using curly brackets

If a now use this method on other color places, like Tab border, all these things will have the same color.

Now - if I change the contents (the text field) of the tiddler $:/MyMain2016/admin/themecolor from "Peru2 to "green" - all places (instances) in the palette menu will react accordingly.

---

What is the added value over the colour macro (it looks like this in the palette thingy: <<colour tab-border-selected>>)
1.  I can remember things like "Peru" or "Azure", but not #fff34545
2. The colour macro values are tied to the tiddlywiki-file ->
2.It gives me a second system of color coding. I use a lot of TWs with different color themes, some on node.s, many as standalone. Now: if I move tiddlers around between them, I can move the colors together with the contents tiddlers, just by moving the tiddlers which contain the colors.
This idea is (I think) based on the discussion about "tiddler swarms" in this group. (I think I still do not have a comprehensive solution for color coded swarms....)

---

Lesson learned:
TW offers a lot of possibilities and solutions, which are neither documented nor obvious to us newbies. trying and testing is worth the effort.

I appreciate the sacrifice of your time reading this.

Pit

[Matabele]

Hi Pit.W.

There's a slight modification which might help -- store your colour values in a data dictionary.

1. Create a tiddler with a title like $:/MyPalette

2. Change the type to Data dictionary

3. Make entries with an easily recalled descriptive name -- with values specifying the colour (in any permissible format)

AliceBlue:#F0F8FF

AntiqueWhite:#FAEBD7

Aqua:Aqua

Aquamarine:#7FFFD4

Azure:Azure

Beige:#F5F5DC

4. Use them like so in the palette editor and stylesheets: {{$:/MyPalette##Aqua}} and {{$:/MyPalette##Beige}}

For convenience, I have attached a Data dictionary as an example which may be edited to your needs (download and drop onto your wiki.)

P.S.  You can create colour schemes using these tools.

regards

On Monday, 21 December 2015 02:11:42 UTC+2, Pit.W. wrote

[Tobias Beer]

Hi Matabele,

 

There's a slight modification which might help -- store your colour values in a data dictionary.

Nice tip, added here:

Using Named Colors @ tb5

NB: Finally also got around to add (a list of) my recent plugins to tb5:

http://tobibeer.github.io/tb5/#plugins

Best wishes,

Tobias.

[Eric Shulman]

On Monday, December 21, 2015 at 3:15:15 AM UTC-8, Tobias Beer wrote:

Using Named Colors @ tb5

For a good list of color names and corresponding values, see:

   https://en.wikipedia.org/wiki/X11_color_names 

This info could be used to create a definitive 'reference pallette' listing all the colors and their values.

-e

[Pit.W.]

@Matabele: Thanks this is really much better
@Tobias: your example using a style is really instructive

Your support is - as always - much appreciated

Pit.W.

Am 21.12.2015 um 05:32 schrieb Matabele:

Hi Pit.W.

There's a slight modification which might help -- store your colour values in a data dictionary.

1. Create a tiddler with a title like $:/MyPalette

2. Change the type to Data dictionary

3. Make entries with an easily recalled descriptive name -- with values specifying the colour (in any permissible format.)

AliceBlue:#F0F8FF

AntiqueWhite:#FAEBD7

Aqua:Aqua

Aquamarine:#7FFFD4

Azure:Azure

Beige:#F5F5DC

4. Use them like so in the palette editor and stylesheets: {{$:/MyPalette##Aqua}} and {{$:/MyPalette##Beige}}

For convenience, I have attached a Data dictionary as an example which may be edited to your needs (download and drop onto your wiki.)

[Matabele]

Hi

I have attached a tiddler containing the basic CSS named colours as a starting point -- might be better to put these in RGBA format (where the opacity may more easily be adjusted.)

For the full monty of equivalents in all permissible formats -- go here.

And for websmart colors -- go here.

Alternatively, the alpha value may be inserted in front of the hex string (after the #) -- here is a list of alpha values:

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

regards

[Tobias Beer]

Hi Matabele,

I have attached a tiddler containing the basic CSS named colours as a starting point -- might be better to put these in RGBA format (where the opacity may more easily be adjusted.)

I recently came to think that HSLA is much more intuitive than RGBA,

especially if you consider adding transparency to the toolbox,

or want to do anything computationally, like shifting hue.

Sure, without alpha transparency,

there's that handy shorthand for rgb, e.g. #0f0.

As for named colors, I personally would not want any spectrum

aspiring to be "comprehensive", "smart", even claiming

to have anything "safe" about them.

The simple reason is: I am not going to use it.

If there's a color that I like, I simply add it to some $://colors,

otherwise I'd rather feel overwhelmed and burdened

with things that are quite irrelevant.

Eventually, I'd favor and recommend going to a page like colourlovers.com,

pick any palettes you like and adopt them.

Best wishes,

Tobias. 

[Matabele]

Hi Tobias

I agree -- ugly schemes result when colours are picked from a table -- far better to select colours from a properly designed colour scheme. Different schemes would be better placed in different palettes e.g. $:/palette1 $:/palette2 etc. -- and colours used from only one palette per wiki.

I like the colour palettes on this page -- better than playing with colour wheels :-) Although I've always favoured this tool -- especially the sample pages generated with the 'Examples' tab -- gives a good idea of what your wiki will look like. The scheme can then be easily exported to CSS (and many other formats) -- a really neat tool. Wouldn't it be great if TW5 could directly read one of those formats.

The one attribute that often needs tweaking is the transparency -- perhaps a global macro would be appropriate which uses the chosen palette, selects the colour and specifies the transparency e.g.

<<color aqua 50%>>

regards

[ih...@newsfromgod.com]

Hi,

Quoting Matabele <matabe...@gmail.com>:

> Hi Tobias
>
> I agree -- ugly schemes result when colours are picked from a table -- far
> better to select colours from a properly designed colour scheme. Different
> schemes would be better placed in different palettes e.g. $:/palette1
> $:/palette2 etc. -- and colours used from only one palette per wiki.
>
> I like the colour palettes on this page

> <http://www.colourlovers.com/palettes> -- better than playing with colour
> wheels :-)

Also, there has been a lot of effort for a US Government web design standard
that is usable also by people with accessibility needs:

See https://playbook.cio.gov/designstandards/visual-style/#palette

and

https://github.com/18F/web-design-standards

thanks