User:Billw58/Templates and Spans

Bill: Summary as of 10Apr12
- I think we have consensus to change the advice div and template to pale orange (#FFEECC - same as current editornote), and change the editornote div to pale mauve (#EEDDFF - last example in that section).
- I'm OK with #FFEEAA for the menu span and template (#2 in the examples below) so I think we have consensus there as well.
  - On April 12 or 13 I'll change the css for these if there are no objections here or on the -manual thread.
- On April 12 or 13 I'll trim the key and button template examples down to those that have received positive votes and we can have another round of voting on those.
- Worst case - if people don't like them I can just revert the css.
- I think it will be useful to see them in use throughout the manual and continue to tweak as needed.

Alternative "Menu" span/template colours:

Please add you own suggestions.

Click on Effect >Amplify #FFFFCC
Click on Effect >Amplify #FFEEAA Steve +0.5; Gale +1
Click on Effect >Amplify #FFEECC Bill +1
Click on Effect >Amplify #FFDDAA Steve +1
Click on Effect >Amplify #FFCCAA
Click on Effect >Amplify #FFCC99

Bill: I think 2, 3 and 4 look OK. 5 and 6 are too dark.
Steve: 1 and 3 are too light on my laptop display. 2 is just about OK. 4 look about right. 5 and 6 look a bit too dark.
Gale: Changed my vote to 2 as a good compromise between 3 and 4.

The "Key" template and a possible "Button" template

Press CTRL+A - the current key template
Click the Choose... button - bold with #EEEEEE
Click the Choose... button - plain with #EEEEEE

We could change the "key" template, then use the #DDDDDD background for buttons.

Please add your own suggestions.

Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button
Press CTRL+A or click the Select All button Gale +1; Steve +1; Bill -0.5

Bill 08Apr12: I don't like the "cyans". 3, 5, 11 and 15 look OK to me.
Gale 08Apr12: I think most of the "key" colours will be too dark for use on Keyboard Shortcut Reference. 17 is about the only one that looks acceptable thinking of use on that page. Have you tried a variant of the "Intro" div colour?
I think the button colour may still be a little too strong for pages that use it a lot. On the other hand a *subtle* border might help mimic a button better and may allow us to do without the bold text. The Wiki is better here IMO, if a bit too forceful.
- Steve: 17 looks OK for "Ctrl+A". The others look too dark/vivid.

Here's some green key spans, plus outlined buttons in context.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Press CTRL+A or click the Select All button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Press CTRL+A or click the Select All button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Press CTRL+A or click the Select All button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Press CTRL+A or click the Select All button. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Steve: 1 looks too dark/vivid. 2 looks about right. 3 and 4 are too light (on my laptop screen).
Gale: Same difference; 3 looks best here (but still only +0.5), 2 a bit too dark/vivid.

Here they are bare in a list, somewhat as they would appear on the Keyboard Shortcut Reference page.
Each of the buttons in this list has a slightly different (non-black) border.

Press CTRL+A or click the Select All button. Gale -1 for this key span and +1 for this button span
Press CTRL+A or click the Select All button. Steve +1 for the key span; Bill +0.5 for the key span, +1 for the button span; Gale -1 for this key span and +0.5 for this button span (see below)
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.

Numbers 2, 3 and 4 are possibilities for the key span. This button template does not stick out above and below the line the way the wiki one does.

Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button. This is the same at the "intro" div colour

And yet some more variations on the key span colour

Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button. Gale +1 for this key span

And more ...

Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button.
Press CTRL+A or click the Select All button. Bill +1 for the key span (changing my vote)
Press CTRL+A or click the Select All button. Or Gale +1 for this key span also

Variations on the button span

click the Select All button. Gale +1
click the Select All button. Gale +0.5; Bill +1
click the Select All button.
click the Select All button.
click the Select All button.
click the Select All button.
click the Select All button.
click the Select All button.
click the Select All button.
click the Select All button.
click the Select All button.

Gale: Having looked at the green key spans, I think the darker ones are too far from other colours we use in the Manual, and the "intro div" colour is too light for the small surface area of a span. I think any not too prominent colour with a light blue/green hue (more blue than green) would work for me.
I think the button span benefits from a border but most of the buttons are too prominent in strength of border and background colour. I voted for a couple of them.
- Bill 10Apr12: +1 for "more blue than green" in the key spans
  I've added a selection of button spans (above) and transferred votes to them. There's now a selection of lighter fill colours.

Alternative colours for the "advice" div/template

This is the current advice div. The background is #FEFFBF

This is the the advice div with background #FFEEAA.

This is the the advice div with background #FFDDAA.
Does this look too much like an editornote?

Here's an editornote for comparison. The background is #FFEECC

Bill 07Apr12: Coming back to this after a rest, I kind of like #FFEECC for both the menu highlight and the advice div. If we did that then the editornote div colour would need to change. It doesn't have to be pretty, just not nausea-inducing :)

Gale 08Apr12: +1 to all that.

An alternative "editornote" div background #FFCCFF.

An alternative "editornote" div background #EECCFF.

An alternative "editornote" div background #DDCCFF.

An alternative "editornote" div background #CCCCFF.

An alternative "editornote" div background #EEDDFF.

Bill 07Apr12: I could live with #EEDDFF for editornotes.
Gale 08Apr12: Expanding the divs with more text as they would be in real life I think rules out the first three as too "gaudy". I can live with either of the last two.

Non-shortcut keys

Bill08Apr12: I don't like the idea of using the button template for both on-screen button and for keyboard keys. So here's an alternative.

Tag Name: The first seven Tag names are permanent and cannot be edited. You can add more Tag rows and give them a customised name and value using the "Add" button (see below). Note: "Album Title", "Track Number", "Genre" and customised tags are not supported for WAV and will not be exported or imported.
Tag Value: Type in the data you want for each Tag, or accept the data already present from an imported file. You don't have to fill in every value. When exporting multiple files, the "Track Title" and "Track Number" tags are pre-filled automatically from the names and ordering of the tracks or labels.
Single-clicking on a value field (or navigating into it with the keyboard arrow keys) selects that field - typing will replace the contents. Tab can be used too, and also permits navigation into the buttons below the Tag and Value fields.

Double-clicking a field (or selecting it, then using keyboard F2) highlights the text in the field. This allows the text to be edited rather than merely replaced, and permits cut, copy or paste using standard system shortcuts or a right-click context menu. Use keyboard Home, End or arrow keys to navigate to individual characters. Once a value field has been replaced or edited, press the Return key to select the next value field, or click in any other one to select it.

Here's how they look inside a note

Double-clicking a field (or selecting it, then using keyboard F2) highlights the text in the field. This allows the text to be edited rather than merely replaced, and permits cut, copy or paste using standard system shortcuts or a right-click context menu. Use keyboard Home, End or arrow keys to navigate to individual characters. Once a value field has been replaced or edited, press the Return key to select the next value field, or click in any other one to select it.

Here's how they look inside a note when they have a white background

Double-clicking a field (or selecting it, then using keyboard F2) highlights the text in the field. This allows the text to be edited rather than merely replaced, and permits cut, copy or paste using standard system shortcuts or a right-click context menu. Use keyboard Home, End or arrow keys to navigate to individual characters. Once a value field has been replaced or edited, press the Return key to select the next value field, or click in any other one to select it.

Gale: +1 for white background as this improves presentation inside a note.+1 for bold text inside the button as in "Return". Did you try white text on black? I guess it would look bad, but so many keyboards are white on black now.

Comparing spans and templates to make sure they are identical

This is the menu span.
The is the menu template with some text following it.
This is the key span.
This is the key template with some text following it.
This is the shortcut template, identical to the key template with some text following it.
Wiki uses 'shortcut', manual uses 'key'. This template allows transferring of text from the wiki to the manual without having to change every occurrence of the 'shortcut' template to the 'key' template.

This is the intro div. Both these effects depend on correctly detecting the "silences" between tracks and this depends on setting their parameters appropriately for your track. See this example of adjusting Silence Finder parameters in order to place labels correctly between the songs.

Some text following the div.

This is the intro template. Both these effects depend on correctly detecting the "silences" between tracks and this depends on setting their parameters appropriately for your track. See this example of adjusting Silence Finder parameters in order to place labels correctly between the songs.