Text input and select form elements in Seven consistently appear with this font stack:

"Helvetica Neue",Helvetica,Arial,sans-serif

Except where they don't. The filter dropdowns on admin/content, and on admin/people, the filter dropdowns and *some* of the update options.

Firefox 3.5.5 on OS X. Same behavior in Safari.

CommentFileSizeAuthor
#5 634724-html-elements-css1.patch8.64 KBdavidtrainer
#4 admin-appearance-before.gif56.68 KBbowersox
#4 admin-appearance-after.gif58.29 KBbowersox
#4 admin-verticaltabs-before.gif54.26 KBbowersox
#4 admin-verticaltabs-after.gif49.27 KBbowersox
#4 admin-before.gif51.42 KBbowersox
#4 admin-after.gif48.73 KBbowersox
#3 634724-html-elements-css.patch7.73 KBdavidtrainer
forms-fonts.png154.36 KBdavidtrainer

Comments

davidtrainer’s picture

davidtrainer commented

Considering this issue in the context of all these recent, related ones:

#634498: Filters layout is broken on admin/content and admin/people
#563390: Seven theme lacks formatting on common html elements such as lists, paragraphs & <code>
#634224: Seven theme needs vertical space between paragraphs
#634218: Seven theme: CODE elements are too small

What do we think about a separate stylesheet that does the equivalent job of zen's html-elements.css?

yoroy’s picture

yoroy commented
Issue tags: +CSS, +Needs design review

Font-stacks should certainly cover all applicable uses.

Maybe have a look at how much of this is covered by #575294: Add reset.css through drupal_add_css() instead of through the .info file and check if #592018: Re-organize styles across stylesheets from system.module and separate presentational and behavior-supporting styles has any bearing on this.

davidtrainer’s picture

davidtrainer commented
Status: Active » Needs review
StatusFileSize
new 634724-html-elements-css.patch7.73 KB

This patch adds html-elements.css, for styling of generic elements. It pulls some of that styling over from style.css. It resolves the fonts problem on the form elements in this issue and also resolves #634498: Filters layout is broken on admin/content and admin/people

bowersox’s picture

bowersox commented
StatusFileSize
new admin-after.gif48.73 KB
new admin-before.gif51.42 KB
new admin-verticaltabs-after.gif49.27 KB
new admin-verticaltabs-before.gif54.26 KB
new admin-appearance-after.gif58.29 KB
new admin-appearance-before.gif56.68 KB

+1 for font consistency. This patch has a few visual side effects to work out though. I've illustrated these in attached screenshots.

  • admin-appearance-before and -after.gif: The tabs (e.g., List and Configure) get a gap below them introduced by this patch. Also, the action links (eg, "+ Install New Theme") get bullets added. In general the type appears bigger, and some like 'Skip to Main Content' gets much bigger. This is what I'm seeing in Mac FF 3.5.5.
  • admin-verticaltabs-before and -after.gif: The vertical tabs themselves seem to be indented farther right, bumping the actual tab contents down below the tabs. Again, it's Mac FF 3.5.5.
  • admin-before and -after.gif: On the admin page all the div boxes seem to get extra padding/margin pushing their content (eg, 'List - select the default theme for your site') to the right.
davidtrainer’s picture

davidtrainer commented
StatusFileSize
new 634724-html-elements-css1.patch8.64 KB

This patch addresses all of the issues raised in #4.

yoroy’s picture

yoroy commented

I'm very much in favor of adding an html-elements.css file to style generic elements, it adds clarity and structure by seperating the typographic basics from the per-case specifics. It'll make a better impression on themers inspecting these files, too, it's just something you do :-)

Will apply this, review and report back.

yoroy’s picture

yoroy commented
Title: Seven has inconsistent fonts on form elements » Add html-elements.css and fix inconsistent fonts on form elements
Status: Needs review » Needs work

Strange. Applying this patch makes text go smaller than before.

I see that a font-size: 0.8em gets redefined to a font-size: 0.875em. This should keep focus on fixing the form elements and the addition of html-elements.css without any other design changes (which I'm sure is the intent).

http://skitch.com/yoroy/nea3n/before
vs.
http://skitch.com/yoroy/nea38/after

(FF 3.5.5 on OS X)

davidtrainer’s picture

davidtrainer commented
Title: Add html-elements.css and fix inconsistent fonts on form elements » Seven has inconsistent fonts on form elements

I may have derailed this issue a little bit with the html-elements.css change. So I've added #641734: Separate generic html elements' style into seven.base.css which will just split those stylesheets up as we've been discussing here. Once that gets in, we can get back to the fonts on these form elements.

yoroy’s picture

yoroy commented
Status: Needs work » Needs review

bumping this for review.

aspilicious’s picture

aspilicious commented
Component: Seven theme » markup

Still an issue!

Markup component?

jacine’s picture

jacine
she/her
Location New York
commented
Component: markup » Seven theme

Nope. Markup component is not for theme-specific issues.

markabur’s picture

markabur commented

Is this the right place to question whether the form elements ought to be in a different font in the first place? I think if the form labels, help text, and so forth are Lucida Grande, then the form elements should be too. Adding a slightly different sans-serif to the page does not improve the design, regardless of how consistently it's applied.

markabur’s picture

markabur commented
Issue tags: -CSS, -Needs design review

#5: 634724-html-elements-css1.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +CSS, +Needs design review

The last submitted patch, 634724-html-elements-css1.patch, failed testing.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Related, more focused: #858748: Some seven font sizes are too small to read

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs work » Postponed

Per David's comments in #8 let's postpone this issue until #641734: Separate generic html elements' style into seven.base.css get's committed

lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
Status: Postponed » Active
Issue tags: -Needs design review +frontend

I think this is still a problem. I forgot to unpostpone it.

Bojhan’s picture

Bojhan commented
Status: Active » Postponed (maintainer needs more info)

We don't really seem to have this anymore. I just checked a whole bunch of elements?

Status: Postponed (maintainer needs more info) » Closed (outdated)

Automatically closed because Drupal 7 security and bugfix support has ended as of 5 January 2025. If the issue verifiably applies to later versions, please reopen with details and update the version.