User:Billw58/Templates and Spans

testing various colors in spans, divs and templates
Just adding the following comment to the above div broke the whole page--is there a limit on div length?
 * Bill: 01May12
 * Previous discussion archived on the Talk page
 * "Box" divs/templates updated per consensus to date.
 * This page is now for tweaking the text highlight colours
 * Bill 06May12: If there are no strong objections, on May 8 I will:
 * Change the menu template to #4
 * Create a "menugray" template for use in alert templates
 * Or alternatively a "menulight" (light orange - #2 or #3) for use in alert templates
 * Change the shortcut template to gray bordered
 * Gale 08May12:
 * I think we may have to accept a different menu and/or shortcut background colour in advice or alert divs. This may actually be beneficial. I find menu colour #4 quite jarring. Did you try colour #1,2 or 3 in just the intro and note divs? The advice div could possibly have white background with orange border to match the "triangle". The alert div could (rather than grey) have white background with a red border to match the "hand".
 * I'm -1 on solid bordering the shortcut span/template even if that helps the case of using it in an intro div - it looks too much as if there is a CTRL + A button. I have some idea of a kind of border with well-spaced arrows (or possibly dotted) but I don't know how to produce an arrow border. For the same reasons I don't think a very similar grey to buttons is a good choice of background colour for shortcut, though I am not -1. Would a more purply grey work?
 * Bill 08May12:
 * The current menu highlight (#2) works well except in the advice template. I see sufficient contrast when it is used in the alert template. So perhaps we could use menu colour #4 ("menudark" ? "menuadvice" ? ) in advice templates? This maintains consistency of the orange highlight, and is only one "special case".
 * See new "purply-grey" choices and comments at The Shortcut Template
 * Gale 08May12:
 * I don't see "consistency" as soon as a different colour for within a template is introduced, so I think it may be preferable to have a different in-template colour for both advice and alert. Ideally that in-template colour should have something to do with the colours in the icon.
 * shortcut colour purply grey #3 is for me a considerable improvement even in normal text.
 * Bill 08May12:
 * Two new samples of menu highlight in advice and alert divs. First is white background with a border colour taken from the icon, the second is #2 orange highlight with border colour taken from the icon.
 * That's me, Gale and Ed all +1 on #3 purply-grey for the shortcut highlight.
 * NEW: as per Ed's comment on Audacity-manual I've added "white-space:nowrap" to the css for the menu, shortcut, kbrd and button classes, so they should no longer be split at line ends - try it out.
 * Gale 08May12:
 * "Gale's "white background with border matching the colour of the icon" looks perfect to me in the alert.
 * "Bill's "#2 orange background with border matching the colour of the icon" looks better to me in the advice (the white background doesn't look part of the design).
 * Bill 08May12: I'm good with that.
 * So we need a "menuadvice" and a "menualert" span and template.
 * The "menu" span and template remain unchanged.
 * Bill 09May12: New deadline. Since we seem to have consensus, I will wait until May 11 for any strong objections. If not I will:
 * Change shortcut to purple #3.
 * Create menuadvice with #2 orange background and darker orange border.
 * Create menualert with white background and red border.
 * Also note that I have removed the "nowrap" spec from the menu span/template, but kept it on kbrd, shortcut and button. If there any objections to keeping nowrap in any of these, let me know or edit the css yourself.
 * Bill 11May12: The above changes have been implemented. Key and shortcut spans and templates now purple-gray; menuadvice and menualert spans and templates created. Consistency page edited to reflect these changes.
 * I think we can leave this be for a while and live with these decisions.
 * Ed 9May12 in re. "Create menuadvice" & "Create menuadvice" why not go ahead and do these now so that we may see what they look like in my default section with all the other current defaults?
 * Also, would you implement the new green-italic icon formally by adding it to the note template and deleting the noteicon template?


 * Bill 09May12: I don't think we have consensus on the icon in the note template. Using the icon requires a template - a div (based on a css class) cannot automatically add the icon. This would mean going through the Manual and changing all the note divs to templates. You can see this in your comparison section where the templates include the icon but the divs do not. In any case I'd still like to wait for anyone else who wishes to weigh in.
 * Gale 11May12: I marginally prefer note without icon because the icon in the advice and alert gives more importance to those in comparison. If we have the note with icon I think we would have to change them all before a release, else there is a confusion of meaning. Also the current icon looks kind of "washed out" to me. Are there any alternatives, possibly a blue icon with green border? Info icons are more typically blue, see http://tinyurl.com/c7g7us2.
 * Ed 11May12 The reason we tried green-on-green was because the other two are yellow-on-yellow and red-on-red (for various shades of each). Your page has a few green info icons but many are blue. I really like the icon concept for consistency but am not stuck on green (though it is by far my preference so far). In re. changing them all in the Manual, the same then holds true for all the alert and warning divs which will lack the icon that the templates have.
 * Bill 11May12: Yes, but there are few alerts and advices compared to notes - I think I've already found 95% of them. I can see the consistency argument, but also Gale's argument that the icons give more importance to those divs. So I'm -0.5 on putting icons in the notes.

Decisions, May 11 2012
Key and shortcut spans and templates:

Menu span and template remains unchanged:

Special menu span and template for use in advice boxes: menuadvice

Special menu span and template for use in alert boxes: menualert

Alternative "Menu" span/template colours:
'''In the previous discussion, #2 was chosen as the new menu highlight colour. It does not work well in the advice template.


 * 1) Click on Effect >Amplify #FFFFCC previous colour
 * 2) Click on Effect >Amplify #FFEEAA Steve +0.5; Gale +1; Peter +1
 * 3) Click on Effect >Amplify #FFEECC Bill +1
 * 4) Click on Effect >Amplify #FFDDAA Steve +1

The choice #2 in the various boxes:

Choice #3 in an alert box:

Choice #4 in the various boxes:

See File > Check Dependencies for more information.

Not so good - it disappears in the alert template.

Gale's "white background with border matching the colour of the icon" menu highlights:

Bill's "#2 orange background with border matching the colour of the icon" menu highlights:

'''What about grey? If we use boxed grey for the shortcuts perhaps unboxed grey for menus would work.'''

See File > Check Dependencies for more information.

'''Not so good - #DDD disappears in the intro div and #CCC is too dark. Would we ever use the menu template in an intro div?'''

'''Wiki has a "menugrey" template for use inside boxes. We could get around this conundrum by using "menugrey" in an alert div, and the darker orange everywhere else.

divs and templates with default spans and templates
Ed 6May12: note that putting a span with a class in a template seems broken but as Bill points out is not: Bill 07May12: The problem was that the text in the template contains the "=" sign. Preceding the text with "1=" or wrapping the text in "nowiki" tags will fix it.
 * (no leading equal sign)


 * (with leading 1=)

This is generic text with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: File > Check Dependencies.... This is a key template:. These are some of the button templates: ; ;. This is a shortcut template: and a shortcut span: . Here is the kbrd template: and span: ENTER or, with angle brackets  and  .
 * Bill: Note that if we avoid  "<span class=..." and "<div class=..."  and use templates instead, most of the "=" problems go away.
 * Ed 7May12: does it make any sense to transfer this editornote to conny in the spans & divs section?
 * Bill: I think not. It's not a consistency issue. Everyone will trip over this once, then hopefully remember it. Template:Note has the full "usage" instructions. Note that when you are editing a page you have a list of templates at the bottom. You can right-click on any of them to open the Template page in a new tab/window and read the usage instructions (if they exist). A low-priority project of mine is to have usage notes for every template, although that would mean keeping them in sync with Consistency.
 * Ed 7May12 how about here then: http://manual.audacityteam.org/man/Help:Editing

add line of text between boxes This is a default intro div with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: File > Check Dependencies.... This is a key template:. These are some of the button templates: ; ;. This is a shortcut template: and a shortcut span: . Here is the kbrd template: and span: ENTER or, with angle brackets  and  . add line of text between boxes

add line of text between boxes

Ed 7May12: I like the note icon concept Bill 07May12: New green note icon uploaded - sample above now uses it. add line of text between boxes This is a default note div with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: File > Check Dependencies.... This is a key template:. These are some of the button templates: ; ;. This is a shortcut template: and a shortcut span: . Here is the kbrd template: and span: ENTER or, with angle brackets  and  . add line of text between boxes
 * Ed Love it!

add line of text between boxes This is a default advice div with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: File > Check Dependencies.... This is a key template:. These are some of the button templates: ; ;. This is a shortcut template: and a shortcut span: . Here is the kbrd template: and span: ENTER or, with angle brackets  and  . add line of text between boxes

add line of text between boxes This is a default alert div with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: File > Check Dependencies.... This is a key template:. These are some of the button templates: ; ;. This is a shortcut template: and a shortcut span: . Here is the kbrd template: and span: ENTER or, with angle brackets  and  . note that there is no "editornote" template:

add line of text between boxes This is a default editornote div with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: File > Check Dependencies.... This is a key template:. These are some of the button templates: ; ;. This is a shortcut template: and a shortcut span: . Here is the kbrd template: and span: ENTER or, with angle brackets  and  . To visualize vertical spacing I have insured that there are no blank lines between divs, templates and text lines.
 * Ed 6May12: I believe that the vertical (above & below) spacing needs attention--it should be consistent across boxes (and I think consistent between above & below).
 * Bill07May12: Gale asked for extra space below the intro div, and I think that's OK. All other templates are consistent. I didn't adjust the spacing on the "advice" and "alert" divs since we won't be using them any more, but I will go in and change the divs so that any existing ones will have the same spacing as the templates.
 * Ed 6May12: I believe that the green background currently used for "intro" should be swapped with the blue currently used for "note"; this will give the desired "traffic light" green (note), yellow (advice) and red (alert) with blue as odd-man-out for intro.
 * Bill 07May12: The intro is currently blue and the note is currently green.
 * Ed 6May12: I do not believe that we need to be too concerned about the various template and span colors as they appear in an editornote div (or template when we get one).
 * Bill 07May12: Agreed.
 * Ed 7May12: since we have the "!" icon and "STOP" icon, maybe we should use the "i (info = italic)" icon too; thus all three traffic lights will have icons but the intro will not.
 * Bill 07May12: I've created a "noteicon" template so we can see how it looks. See example above.
 * Bill 07May12: About the editornote template, I put off doing that since the editornote div is special in that it is hidden from logged out users and is not dumped with the distributed manual. My concern was that a template might break that functionality. I'll wait on this until I am certain that an editornote template will work as expected (or can be made to work as expected).

The "Shortcut" span
'''In the previous discussion, #1 below was chosen as the new shortcut highlight colour. It does not work well in the note template.'''


 * 1) Press CTRL + A . Gale +1; Steve +1; Bill -0.5, Peter +1
 * 2) Press CTRL + A . Gale -1, Peter -1
 * 3) Press CTRL + A . Steve +1; Bill +0.5; Gale -1, Peter -1
 * 4) Press CTRL + A . Gale +1
 * 5) Press CTRL + A . Bill +1 (changing my vote)
 * 6) Press CTRL + A . Or Gale +1 for this key span also

Here are some "purply-grey" choices:


 * 1) Press CTRL + A
 * 2) Press CTRL + A
 * 3) Press CTRL + A Gale+1; Bill+1; Ed+1
 * 4) Press CTRL + A

Purply-grey #2 in the various boxes:

Press CTRL + A

Purply-grey #3 in the various boxes:

Press CTRL + A

Purply-grey #4 in the various boxes:

Press CTRL + A


 * Bill 08May12: Purply-grey #1 and #2 are probably too dark. #3 provides enough contrast for me in the intro template. #4 does not, and looks grey to me inside any of the boxes. Do we care enough about shortcuts in intros that we need to special-case it?
 * Ed 8May12: #3 +1 (same comments a Bill). "special-case it?" Not with #3 as it is dark enough and purple enough to contrast in the intro color.

The kbrd template
'''There is still some concern that the kbrd template may not be visible enough in some of the boxes. Here's how it looks now.'''