The first half of the long-awaited style editor

It’s here. It’s finally here. The long-awaited style editor.

Well… at least the first half of it anyways.

In the last post, I talked about how the style editor was one of the biggest remaining undertakings for Chordious 2. It’s taken a lot of experimentation, testing, and just plain brute-force typing, but now you can set the default styling at various levels of Chordious.

In the last preview build you may have noticed a small little pen icon with a blue “s” doodle in the Diagram Library when you selected one of your collections. Opening it let you set the orientation of your diagrams (up-down or left-right). See, I began work on the style editor over a month ago, and I was just starting on the UI, when I unexpectedly found a nasty bug in Chordious that threw an error the first time you ran the app. So I ended up rushing out a fix, which meant revealing that barely started UI.

Now, weeks later, I’m ready to reveal the style editor in a more fleshed out form, starting with version 1.9.16145.449. As of now, you can set your default styling for the diagram (layout, colors, borders), the grid (spacing, margins, colors, etc.) and the title text (font, color, etc.). Everything uses translatable labels and helpful tool-tips. I’ve also updated the regular diagram editor to re-use those same labels and tool-tips.

As you’ll see, I’ve still got three more areas to complete: letting you configure the default styling for marks, fret labels, and barres. Those will come in the next update, as they’re a little trickier and will take more time to work out. I could have waited before revealing anything, but I thought it better to get what I have done out now so that I can gather feedback and fix bugs sooner.

I’ve tried to make the style editor as user-friendly as possible. You can get to it in one of three places:

1. In the Diagram Library, right-click on a collection and choose “Edit Style of…”
2. Also in the Diagram Library, select a collection and click on the style button (pen with the blue “s”) under the diagrams.
3. For good measure, in Options > Style, there is now a “User Style Editor” button.

I’ll write a proper tutorial after Chordious 2 is official, but for now the basic idea is as follows:

1. There are multiple “style levels” in Chordious, and there’s a selection box at the top of the editor.
   1. Underneath that is a textual summary of what that style level does.
   2. Underneath that is a list of tabs with all of the individual style controls.
2. Each style level inherits the style settings of its parent level, and optionally overrides some of those settings.
3. By changing the Selected Style at the top, you can see for yourself what each style level defines.
4. To the left of each of the style settings below is a checkbox. If you want to override a setting, you can check that box and change the value.
5. Don’t forget to hit “Apply” to save your changes.

As for the style levels themselves:

1. “Default Style” / “App Style”: These are the style settings that I hard-coded into Chordious. You can’t change these directly.
2. “User Style”: This is where you can override the Default styles for everything in Chordious. New diagrams, chord and scale finder results, everything.
3. “Library Style”: This is where you can override “User Style” for all diagrams that are saved in your Library.
4. “Collection Style”: This is where you can override the “Library Style” for all diagrams in the particular collection you have selected.

Remember, each level inherits from its parent level (and so on, and so on), only overriding the settings that you choose. For example, maybe you want the default title text color for all of your diagrams to be green. So you pick “User Style”, check the box next to the Title Color, and set the value to Green. Great, now every diagram will have a green title!

Then later, let’s say, you decide that for a certain collection you actually want the titles to default to blue. So, you select that collection and its “Collection Style”, check the box next to the Title Color, and set the value to Blue. Now all of the diagrams in that collection will have blue titles instead of green. But only in that collection! Since your User Style still specifies green titles, all of the other diagrams in your library will still have green titles.

Last of all, let’s say that for a particular individual diagram in that collection, you want to make the title black. So you double click on that diagram, and in the Diagram Editor you now have the option to check the box and choose Black for Title Color.

Now, each child overrides its parent. So, if you set an individual diagram to have a black title, and change the collection style from blue to something different, that particular diagram will keep its black title. In this way, you can easily change the look and feel of all of your diagrams, while making sure that some diagrams maintain their own little tweaks.

For example, maybe you set the title font size to be larger in your User Style. It looks great in general, but maybe you have a whole collection of jazzy minor 9th no 3rd flat 5th sharp 7th chords that now the title is too long and gets cut off. Now you can override the title font size just for that collection to be just a little smaller. Voila, the titles now fit! Or maybe it’s only one particular diagram that’s giving you trouble. so you override the font size for just that one diagram.

The combinations are endless!

I’m convinced it’s not that hard once you play around with it. If you’ve ever done kind of styling with HTML and CSS this will seem very familiar. For all my long-time users, update and give the style editor a whirl. Let me know what you think.

And as always, if you haven’t yet, download and try out the latest Chordious 2 Preview today!

/jon

About Jon Thysell

Father. Engineer. Retro games. Ukuleles. Nerd.