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.
There is room for improvement in the CSS for the input fields where the user enters a hexadecimal RGB-code.
This is the current CSS used:
.color-form .form-text {
text-align: left;
margin-right: 5px; /* LTR */
cursor: pointer;
}
I suggest the following:
.color-form .form-text {
text-align: left;
margin-right: 5px; /* LTR */
cursor: pointer;
/** additions **/
/** The generous padding renders space to give the user a better preview of the color since the text is blocking the view */
padding: 0.5em 1em;
/** Monospace font will make it easer to see how many characters have been entered and also make the hexcode look more aligned **/
font-family: monospace;
/** Monospace fonts are usually smaller than other fonts so we make it bigger. **/
/** Not sure about the size compensation norm for monospace though. This works for me. **/
font-size: 1.25em;
/** Due to the offset caused by the extra padding, aligning the text to the center of the field gives a better feel when entering text **/
text-align: center;
/** By making the border solid, we give the field a more 'palette look' rather than 'enter-value-here look' **/
/** We use a fixed one pixel width since the dimension is small which increases the risk of round-off errors if using 'em' **/
/** The color of the border will be taken from 'color' which makes it the same as the text: dynamic by JavaScript **/
border: 1px solid;
}
For HTML of the above mentioned text field please see #315813: Improve HTML for hex-code text fields.
I appreciate feedback!
Comment | File | Size | Author |
---|---|---|---|
Screenshot from Firefox 2 on Mac OS (PNG) | 154.17 KB | Danial Namousi |