color check / uncheck option

S²

unread,

Jun 15, 2021, 4:34:51 AM6/15/21

to TiddlyWiki

Hello Forum,

where / how can the color for the check / uncheck option be set?

eg.

checked: green

background unchecked: grey

Thanks for feedback

Stefan

PMario

unread,

Jun 15, 2021, 5:31:29 AM6/15/21

to TiddlyWiki

Hi,

They are defined by the OS theme and also depend on the browser implementation

So they look different for every browser and every OS.

If we want to change them, we would need to create custom checkboxes.

-mario

S²

unread,

Jun 15, 2021, 6:04:52 AM6/15/21

to TiddlyWiki

Hi Mario,

I start my Wiki in TiddlyDesktop...
eg. For the PrintRiver Plugin: here is the a checkbox for 'show tags' configured - I guess, this is not related to the browser / OS:

Stefan

PMario

unread,

Jun 15, 2021, 7:07:18 AM6/15/21

to TiddlyWiki

On Tuesday, June 15, 2021 at 12:04:52 PM UTC+2 S² wrote:

I start my Wiki in TiddlyDesktop...
eg. For the PrintRiver Plugin: here is the a checkbox for 'show tags' configured - I guess, this is not related to the browser / OS:

Sure it is. .. IMO NW.js is Chromium based. So it uses a webkit webview, which should be very similar to Chrome.

-mario

Brian Radspinner

unread,

Jun 15, 2021, 12:28:13 PM6/15/21

to TiddlyWiki

Below is what I have for custom checkbox colors with CSS, it could a starting place for you. Put this in a tiddler tagged with $:/tags/Stylesheet and have fun. ^_^

.tc-tiddler-body input[type="checkbox"],
.tc-tiddler-preview-preview input[type="checkbox"],
.tc-sidebar-scrollable input[type="checkbox"] {
   -webkit-appearance:none;
   background-color: rgba(0,255,255,0.15);
   border: none;
   box-shadow: 0 0 0 1px rgba(0,255,255,1) inset;
   display: inline-block;
   height: 0.8em;
   outline-color: transparent;
   width: 0.8em;
}

.tc-tiddler-body input[type="checkbox"]:checked,
.tc-tiddler-preview-preview input[type="checkbox"]:checked,
.tc-sidebar-scrollable input[type="checkbox"]:checked {
   background-color: rgba(0,255,255,1);
}

.tc-tiddler-body input[type="checkbox"]:checked::after,
.tc-tiddler-preview-preview input[type="checkbox"]:checked::after,
.tc-sidebar-scrollable input[type="checkbox"]:checked::after {
   color: rgba(238,137,105,1);
   content: "\2713";
   font-size: 1em;
   font-weight: bold;
   left: 0;
   position: relative;
   text-shadow: 1px 1px 1px #000;
   top: -0.3em;
}

.tc-tiddler-body input[type="checkbox"]:active,
.tc-tiddler-preview-preview input[type="checkbox"]:active,
.tc-sidebar-scrollable input[type="checkbox"]:active {
   border: none;
   box-shadow: none;
   outline-color: transparent;
}

S²

unread,

Jun 15, 2021, 4:02:36 PM6/15/21

to TiddlyWiki

Thanks Brian, this works for the sidbar :-)

I tried to adapt it for PrintRiver - but I failed.

Maybe BTC (owner of PrintRiver plugin) can give some hints...

Greetings

Stefan

Reply all

Reply to author

Forward