A Fun Background for Tiddlywiki and/or Tiddler

Tips & Tricks
1
  1. Create a tiddler tagged with $:/tags/Stylesheet
  2. Put the below as tiddler text
body{   background-image: radial-gradient(#ddd 1px, transparent 0), radial-gradient(#ddd 1px, transparent 0);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;}
  1. save

Instead of body you may like to use .tc-tiddler-body or .tc-tiddler-fram

This apply a nice pattern as a background to Wiki
Change you palette, what do you see?

7 Likes
2

Mohammad, on my browser, your code yields rather distracting tiny dots. But removing the 1px and 0 numbers within the radial-gradient does yield something interesting. So I wonder whether this is what you intended:

body{   background-image: radial-gradient(#ddd, transparent), radial-gradient(#ddd, transparent);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;}
1 Like
3

Yours is nice!
The pattern in the OP creates tiny dots in the background

1 Like
4

@Mohammad Not exactly related to this post.
I saw this interesting throb clock from Andrews TW adventures

How to add this as background image in addition to the background dots styles you provided in the OP

image
image1730Ă—1976 191 KB

5

Really not sure how to do this! It is not a CSS nor an image!

6

Mohammad, I was assuming the tiny dots might not be intended, simply because they didn’t seem to take full advantage of the gradient and transparency aspects of the css. Also, on some light backgrounds I could hardly see the dots, while on dark backgrounds I found the dots could result in a bit of distraction around small text within transparent elements (in a sidebar, for example). Still, they are quite crisp and stylish. :slight_smile:

I certainly like your idea of a background-image pattern that looks somewhat different against different backgrounds.

-Springer

7

I use this with Blanca! So the dots appear as a mild pattern in the background!

image
image1098Ă—550 21.9 KB

But you are right with dark palettes, you need to do some adjustment! For example for Cupertino Dark, I changed color from #ddd to #333

image
image1098Ă—550 48 KB

So I think the pattern works fine! but the colors needs to be adjusted.

8

I use this with Twilight

body,
.tc-tiddler-frame {   
	--mycolor: #FACB6822; /* the dot color  */
  
	
	background-image: radial-gradient(var(--mycolor) 1px, transparent 0),
		radial-gradient(var(--mycolor) 1px, transparent 0);
	background-position: 0 0, 25px 25px;
	background-size: 50px 50px;
}

image
image1173Ă—584 42.6 KB

1 Like
9

Another approach: Background in “edit-Mode” (Twilight):

.tc-tiddler-frame.tc-tiddler-edit-frame.tc-tiddler-exists { 
   background-image: radial-gradient(rgb(28, 28, 28), transparent), radial-gradient(rgb(28, 28, 28), transparent);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}

grafik
grafik1822Ă—626 113 KB

1 Like
10

Another fun background

image
image748Ă—737 40.2 KB

Use A Fun Background for Tiddlywiki and/or Tiddler above but with below tiddler content

  1. Create a tiddler tagged with $:/tags/Stylesheet
  2. Make sure the tiddler type is text/css or see the comment by Alvaro below
  3. Put the below as tiddler text
body {
  --sl: calc(2em + 1px) calc(3em + -.5px),
 transparent calc(3em + .5px);
 background: radial-gradient(#fff 1em, #000 calc(1em + 1px) 2em, #fff var(--sl)) 4.2426406871em 4.2426406871em, repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 2.1213203436em 2.1213203436em, radial-gradient(#000 1em, #fff calc(1em + 1px) 2em, #000 var(--sl));
 background-size: 8.4852813742em 8.4852813742em, 16.9705627485em 16.9705627485em;
 background-blend-mode: lighten;
}
  1. Save

Credit Ana Tudor

1 Like
11

This last pattern does not seem to work (though the earlier one in this thread functions fine if I paste / swap in the same tiddler).

I don’t have enough css understanding to see where something might have gone wrong. But here’s a minimal site in which it’s not rendering…

12

I think it is the problem with dash rule, your stylesheet have to start with \rules except dash.

I have other problem maybe with my computer, I can appreciate any background, but if I remove the line of background-blend-mode: lighten; then I can se the pattern in black and white.

1 Like
13

Alvaro, yes the \rules except dash was the trick, in addition to choosing a theme with a non-white background color. I’ve also removed the strangely long decimal values.

\rules except dash

body {
  --sl: calc(2em + 1px) calc(3em + -.5px),
 transparent calc(3em + .5px);
 background: radial-gradient(#fff 1em, #000 calc(1em + 1px) 2em, #fff var(--sl)) 4em 4em, repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 2em 2em, radial-gradient(#000 1em, #fff calc(1em + 1px) 2em, #000 var(--sl));
 background-size: 8em 8em, 16em 16em;
 background-blend-mode: lighten;
}
1 Like