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