Change record status: 
Project: 
Introduced in branch: 
7.x-5.x
Introduced in version: 
7.x-5.4
Description: 

After the release of 7.x-5.1, the -dev version used a class naming convention that ended up not matching the Drupal 8 class naming convention that was developed later.

Since many, many developers used the -dev version on production sites, the 7.x-5.2 release of Zen uses the same class naming convention that existed in the -dev version. This makes updating from the -dev version to 7.x-5.2 easy.

The 7.x-5.4 version of Zen, however, uses the class naming convention that matches the one developed for Drupal 8.

If you were using Zen 7.x-5.1, you can upgrade to 7.x-5.4 and disregard the information below.

If you were using Zen7.x-5.x-dev+X, you can either stay at 7.x-5.2 or you can upgrade to Zen 7.x-5.4 using the information below.

In your stylesheets, the following selectors need to be updated:

Old CSS selectors: New CSS selectors:
.header--logo .header__logo
.header--logo-image .header__logo-image
.header--name-and-slogan .header__name-and-slogan
.header--site-name .header__site-name
.header--site-link .header__site-link
.header--site-slogan .header__site-slogan
.header--secondary-menu .header__secondary-menu
.page--title .page__title
.node--title .node__title
.block--title .block__title
.comments--title .comments__title
.comments--form-title .comments__form-title
.comment--title .comment__title
.messages-status .messages--status
.messages-warning .messages--warning
.messages-error .messages--error
.tabs-primary--tab .tabs-primary__tab
.tabs-primary--tab-active .tabs-primary__tab.is-active
.tabs-primary--tab-link .tabs-primary__tab-link
.tabs-primary--tab-link-active .tabs-primary__tab-link.is-active
.tabs-secondary--tab .tabs-secondary__tab
.tabs-secondary--tab-active .tabs-secondary__tab.is-active
.tabs-secondary--tab-link .tabs-secondary__tab-link
.tabs-secondary--tab-link-active .tabs-secondary__tab-link.is-active
.menu--leaf .menu__item.is-leaf
.menu--expanded .menu__item.is-expanded
.menu--collapsed .menu__item.is-collapsed
.menu--active .menu__item.is-active
.menu--has-children .menu__item.is-parent
.menu--active-trail .menu__item.is-active-trail
.menu--link-active .menu__link.is-active
.menu--link-active-trail .menu__link.is-active-trail
.header--region .header__region

 

In the comment-wrapper.tpl.php template, change the comments--title and comments--form-title classes to comments__title and comments__form-title, respectively.

In the page.tpl.php and pane-header.tpl.php templates, change the header--logo, header--logo-image, header--name-and-slogan, header--site-name, header--site-link, header--site-slogan, header--secondary-menu, and page--title classes to header__logo, header__logo-image, header__name-and-slogan, header__site-name, header__site-link, header__site-slogan, header__secondary-menu, and page__title, respectively.

Impacts: 
Site builders, administrators, editors
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done

Comments

gabriel.achille’s picture

On a Linux environment, You can use the following command to find all the affected selectors:
grep -r -E "(header--|page--|node--|block--|comments--|comment--|messages-status|messages-warning|messages-error|tabs-primary--tabs-secondary--|menu--)" /path/to/your/subtheme