User:Billw58/Templates and Spans
Contents
testing various colors in spans, divs and templates
- 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.
Just adding the following comment to the above div broke the whole page--is there a limit on div length?
- 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 i 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.
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.
- Click on Effect >Amplify #FFFFCC previous colour
- Click on Effect >Amplify #FFEEAA Steve +0.5; Gale +1; Peter +1
- Click on Effect >Amplify #FFEECC Bill +1
- Click on Effect >Amplify #FFDDAA Steve +1
The choice #2 in the various boxes:
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
Choice #3 in an alert box:
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
Choice #4 in the various boxes:
See File > Check Dependencies for more information.
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. 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:
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
Bill's "#2 orange background with border matching the colour of the icon" menu highlights:
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
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.
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. See File > Check Dependencies for more information. |
|
|
When importing an uncompressed audio file with the "Read uncompressed file directly from the original (faster)" option checked in Import / Export Preferences never move, rename or delete that file unless you first copy it into the Audacity project. 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=)
- 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
- Bill 09May12: There is something very strange going on in the noteicon, advice and alert templates. Resize your browser window so that "button templates:" starts on a new line inside the box. On my browser there appears to be a hard return after "templates:" that does not occur in the divs. This occurs in Camino (Gekko) and Safari (WebKit). This effect does not occur for the shortcut or kbrd templates. I'll have a look at the css for button to see if there's something particular there that is causing this.
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: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; 
Ask User; MP3 files 
. This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.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: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
add line of text between boxes
Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.add line of text between boxes
|
This is a new noteicon template with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
|
Ed 7May12: I like the note icon concept
Bill 07May12: New green note icon uploaded - sample above now uses it.
- Ed Love 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: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
add line of text between boxes
|
|
This is a default advice template with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
|
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: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
add line of text between boxes
|
|
This is a default alert template with a menu link using double-square bracket notation (no span nor template): Check Dependencies..., as a template: and as a span: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
|
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: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
note that there is no "editornote" template: Template:Editornote 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: . This is a key template: <ALT + SHIFT + a>. These are some of the button templates: ; Ask User; MP3 files . This is a shortcut template: <ENTER> and a shortcut span: <ENTER>. Here is the kbrd template: Enter and span: ENTER or, with angle brackets <Enter> and <ENTER>.
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.
- Press CTRL + A. Gale +1; Steve +1; Bill -0.5, Peter +1
- Press CTRL + A. Gale -1, Peter -1
- Press CTRL + A. Steve +1; Bill +0.5; Gale -1, Peter -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
Here are some "purply-grey" choices:
- Press CTRL + A
- Press CTRL + A
- Press CTRL + A Gale+1; Bill+1; Ed+1
- Press CTRL + A
Purply-grey #2 in the various boxes:
Press CTRL + A
|
|
Press CTRL + A. |
|
|
Press CTRL + A. |
Purply-grey #3 in the various boxes:
Press CTRL + A
|
|
Press CTRL + A. |
|
|
Press CTRL + A. |
Purply-grey #4 in the various boxes:
Press CTRL + A
|
|
Press CTRL + A. |
|
|
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.
|
|
Press the Enter key. |
|
|
Press the Enter key. |
