Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#18698 closed enhancement (fixed)

Use body class in custom background callback

Reported by: GaryJ Owned by: markjaquith
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.2.1
Component: Themes Keywords: has-patch
Focuses: Cc:


When themes want to include an alternative color scheme, they might make use of a body class, added via a choice on a theme settings page. They can then do:

body {
    background: red;
body.grunge { // or .grunge
    background: black url(images/grunge.png);

The problem comes when the theme also adds support for custom backgrounds.

The lowest selector specificity score an alternative color scheme could have using this method would be 11 (body.grunge) or 10 (.grunge).

The default custom callback CSS just uses body (specificity score of 1), which means even though it's an internal style sheet, and later in the cascade, it doesn't override the external style sheet.

There are two options:

1) Have all themes that want to use custom backgrounds and alternative color schemes define two extra functions - one that adds a body class if ( get_background_image() || get_background_color() ) is true, and a second which duplicates all of the _custom_background_cb() function with a tweak of the output selector to include this new class, and then use that as the admin callback.

2) Have WP add a 'custom-background' class within get_body_class() and use that within _custom_background_cb().

Certainly 1) is possible now without any changes to core code, but it does mean duplications of core code, just to change the CSS output (perhaps a filter on the selector, default 'body' might work instead here?), and that, along with a filter to add a body class, seem redundant when it could be done in core. Most of the default body classes are content-related (type of page, template used, queried object etc.), but there are ones that are feature-related (admin-bar, logged-in), so custom-background isn't something too different.

Attachments (1)

18698.diff (1.1 KB) - added by GaryJ 4 years ago.
Add 'custom-background' body class, and reference it in default custom background callback.

Download all attachments as: .zip

Change History (5)

@GaryJ4 years ago

Add 'custom-background' body class, and reference it in default custom background callback.

comment:1 @SergeyBiryukov4 years ago

  • Keywords has-patch added

comment:2 @nathanrice4 years ago

  • Cc ncrice@… added
  • Component changed from General to Themes

+1 from me.

This patch makes perfect sense, especially considering that people are using body class in the main stylesheet to make cascading changes, and the body element only holds 1 specificity point.

comment:3 @nacin4 years ago

  • Milestone changed from Awaiting Review to 3.3

Works for me.

comment:4 @markjaquith4 years ago

  • Owner set to markjaquith
  • Resolution set to fixed
  • Status changed from new to closed

In [18886]:

Give custom background CSS more specificity. props GaryJ. fixes #18698

Note: See TracTickets for help on using tickets.