How to change the todo bullets squares to the old from 1.x

1

Hello Jesse!

Nice to see, that you have finished the new version yet. Congratulations!

I have just made my own theme with the beta version and it works fine for the final release. But one question is left, is it possible to change the new shadowed todo bullets squares to the flat old one from version 1.x?

Greetings, Volker

2

Yes! To experiment with styles I highly recommend that you checkout the theme documentation. In the FoldingText app go to Help > Software Development Kit > Documentation > Tutorials > Create Themes.

And second the vast majority of FoldingText’s source code comes included with the app in the SDK. It’s not open source, it’s “shared source” meaning its there for learning purposes, not reuse and redistribution purposes. Anyway a great source for how to do themes is to look at all the internal style rules. All themes are defined in LESS/CSS files, the filenames all end with the less file extension.

With that out of the way, there’s a todo.less file in there that defines the style rules used for those checkboxes. And the relevant style rules are:

.cm-checkbox-renderwidget {
	input {
		pointer-events: all;
		appearance: none;
		-webkit-appearance: none;
		padding: 0;
		margin:0;
		border:none;
		.interactive-interface-element;
	}
	input:before {
		color: @textColor;
		font-family: "Source Code Pro";
		font-size: @fontSize;
		content: "☐";
	}
	input:checked:before {
		content: "☑︎";
	}
}

So each check is an HTML input element of type checkbox. The default styling hides that element and then adds the checkbox after it in “Source Code Pro” font… that’s what is giving the shadow, it’s the glyph from the source code pro font. This is one approach for styling a checkbox, there are others but this seemed simplest to me.

Anyway with all of that, try adding this rule to your user.less file:

.cm-checkbox-renderwidget {
	input:before {
		font-family: "Courier";
	}
}

It just changes the font used to draw the checkbox, and that seems to remove the shadow for me.

3

Thank you! That works fine for me as well.

4

Hey Jesse (or anyone else who can help)—

I actually prefer the standard checkbox, and I’ve been editing todo.less with every update to get back to it. Is there a way to specify something in user.less so I don’t have to keep digging into the program files? I tried adding the contents of my updated todo.less in my user.less, but no joy…

Thanks in advance.

EDIT: Of course, as soon as I asked the question, I went and figured out the answer. Added the following to my user.less (for anyone who has the same basic question):

// todo.less

.cm-checkbox-renderwidget {
	
	input {
		pointer-events: all;
		appearance: checkbox; 
		-webkit-appearance: checkbox;
	}

	input:before {
		content: "";
	}

	input:checked:before {
		content: "";
	}
}