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.

Bill 12Apr12: Trimmed page for easier comparison of outstanding choices: key, button, keyboard and path spans

Bill 13Apr12: Templates and CSS classes now created for button, keyboard and path. We can now try those out "in the wild".
As we continue to refine our choices here I can edit the CSS to reflect those changes throughout the manual.
I have not changed the "key" (shortcut) CSS since that one is widely used throughout the manual and I think we need more consensus here before we change it.

Alternative "Menu" span/template colours:

(keeping this here for reference)

Click on Effect >Amplify #FFFFCC previous colour
Click on Effect >Amplify #FFEEAA Steve +0.5; Gale +1 - current colour
Click on Effect >Amplify #FFEECC Bill +1
Click on Effect >Amplify #FFDDAA Steve +1

Bill: I think 2, 3 and 4 look OK.
Steve: Changed my vote to 2 as a good compromise.
Gale: Changed my vote to 2 as a good compromise between 3 and 4.
Ed 12Apr12: one thing to keep in mind for spans which could be a hypertext link is that the link color (generally a modestly dark blue) must contrast well with the span color--the lighter the saturation of the span color the more likely the link will be obvious; there is probably some color wheel rule for picking contrasting colors. My vote--lighter is better.
Bill 12Apr12: To my eyes (and others I've asked), the old yellow menu highlight almost disappears when it is behind bold blue link text. I think this is some kind of colour trick the eye/brain system does. So, yes, there is probably some colour-wheel rule that would at least say which colour is "bad" to have behind the blue text. As for "lighter is better" - there is a middle ground between "too light to easily see" and "so dark it is distracting".

The "Key" span

Press CTRL + A - the current key template

Press CTRL + A. Gale +1; Steve +1; Bill -0.5
Press CTRL + A. Gale -1
Press CTRL + A. Steve +1; Bill +0.5; Gale -1
Press CTRL + A. Gale +1
Press CTRL + A. Bill +1 (changing my vote)
Press CTRL + A. Or Gale +1 for this key span also

The "Button" span

Bill 13Apr12: The "button" class and template have been created. You can try them out "in the wild" as you see fit.
Syntax is:

<span class="button">Export</span>

or

{{button|Export}}

Both produce: Export

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.

Non-shortcut keys - the "Keyboard" span

Bill 13Apr12: The "keyboard" class and template have been created. You can try them out "in the wild" as you see fit.
Syntax is:

<span class="keyboard">return</span>

or

{{keyboard|return}}

Both produce: Template:Keyboard

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.
Bill 12Apr12: -1 for bold text - I think there's enough emphasis with the border.
- Gale 12Apr12: I'll drop to +0.5 for bold text, but I really don't think the current keyboard span is strong enough when amongst normal text without background. You could make a slightly darker border or slightly darker text with styling.
Steve: +1 for white background.

Progressively darker borders

Use keyboard Home, End or arrow keys to navigate to individual characters.
Use keyboard Home, End or arrow keys to navigate to individual characters.
Use keyboard Home, End or arrow keys to navigate to individual characters.

Progressively darker borders, bold text

Use keyboard Home, End or arrow keys to navigate to individual characters.
Use keyboard Home, End or arrow keys to navigate to individual characters.
Use keyboard Home, End or arrow keys to navigate to individual characters.

A "Path" span

Bill 13Apr12: The "path" class and template have been created. You can try them out "in the wild" as you see fit.
Syntax is:

<span class="path"><yourhome>/Library/Application Support/audacity</span>

or

{{path|<yourhome>/Library/Application Support/audacity}}

Both produce: <yourhome>/Library/Application Support/audacity

The wiki has a "path" template. Do we want one? How about ...

The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity

Gale 12Apr12: -1 for red text which looks like a broken link. +1 for the idea of having a template. Some kind of purple?
Bill 12Apr12: agreed -1 for red. Added some greens. I'm not serious about that last one! I couldn't resist trying a little retro "glowing green text on a black screen" :-)

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.