Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem:
Currently the asterisk that is added to the label of required form elements is colored red. This is not the best core default: it attracts too much attention and red sends the wrong message (red = error).
Solution:
remove the CSS bit that adds the red color.
Beta phase evaluation
Issue category | Task since it's not a bug, but change in a way content is displayed |
---|---|
Issue priority | Normal |
Unfrozen changes | Unfrozen since it changes only CSS |
Passes beta evaluation process, committable to 8.0.x
Comment | File | Size | Author |
---|---|---|---|
#23 | required-asterisks.png | 73.12 KB | yoroy |
#14 | register.png | 51.89 KB | manauwarsheikh |
#13 | required-asterisk-color-1214008-12.patch | 2.43 KB | stBorchert |
#7 | Zrzut ekranu 2013-12-19 o 20.41.57.png | 14.54 KB | philipz |
#6 | 1214008-6.patch | 780 bytes | areke |
Comments
Comment #1
yoroy CreditAttribution: yoroy commentedComment #2
Bojhan CreditAttribution: Bojhan commentedSubscribe, I agree its too prominent especially on forms with a lot of required fields it gets a bit messy. I am not sure enough to mark it, RTBC though.
Comment #3
dawehnerI'm wondering whether something black stands out enough.
Comment #4
oadaeh CreditAttribution: oadaeh commentedWhat about using a medium green (#0b0 or #0c0) as the marker color? It would stand out a bit from black and would be inviting, rather than alarming. I think blue would be confused with links.
Comment #5
valthebaldTagging
Comment #6
areke CreditAttribution: areke commentedThe patch needed to be re-rolled (the file was moved), so I re-rolled it.
Comment #7
philipz CreditAttribution: philipz commentedWhat do you think about doing it like Zurb Foundation does? 'Required' written in smaller font (same color).
This seems elegant and very clear. Takes more space but space next to labels is usually not a problem in drupal forms.
Comment #8
nancy.beutels CreditAttribution: nancy.beutels commentedTested patch 6 and looks good with the black asterisk. Tested on both on Firefox and Chrome.
Comment #9
alansaviolobo CreditAttribution: alansaviolobo commentedthe contents of the patch are already present in the core.
Comment #10
yoroy CreditAttribution: yoroy at Wunder commentedNope, asterisks are still red or have become red again. I still think a simple change to use the text color should be enough.
Comment #11
stBorchertThe asterisk is replaced by a SVG in #2274631: Form required marker "\204E" is broken in Google Chrome 35 / Internet Explorer 9 (commit c5fe718) so the SVG files need to be updated.
* /core/misc/icons/ee0000/required.svg
* /core/themes/bartik/images/required.svg
* /core/themes/seven/images/required.svg
Comment #12
yoroy CreditAttribution: yoroy at Wunder commentedLets do that!
Comment #13
stBorchertChanged the color used in /core/misc/icons/ee0000/required.svg and /core/themes/seven/images/required.svg. The SVG located in Bartik seems to be unused and uses
#ffffff
as color.Comment #14
manauwarsheikh CreditAttribution: manauwarsheikh commentedseems fine!
Current Status: All red asterisks are coming in black.attached screenshot
Comment #15
davidhernandezComment #16
valthebaldAdded beta evaluation
Comment #17
yoroy CreditAttribution: yoroy at Wunder commentedBut does that mean there are now black asterisks in the ee0000 folder? Because #ee0000 is hex for red…
Comment #18
stBorchertHm good point. How do we deal with this? Should I a) change the color within the file to
#333333
and move the file to the folder "333333" or should I b) create a new folder named "3b3b3b" or c) just leave the old color code for this file?a) and b) would require an additional change in form.css of Bartik since it uses the default icon instead the required.svg within bartik/images.
With c) we would go with the red icon for Bartik and change it for Seven only.
Comment #22
yoroy CreditAttribution: yoroy commentedComment #23
yoroy CreditAttribution: yoroy commentedAnother reason to just use the same color as the text color itself: on dark backgrounds this fails on accessibility.