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.
Comments
helper to find occurrences of old css selectors
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