• Scope
• General tips
• CSS classes
  • Groups
  • Columns
  • Buttons
  • Text effects
  • Paddings
  • Drupal7 CSS documentation
• Menus and Breadcrumbs
• Pages currently served from Drupal 8
• Viewing the old page

Scope

A few tips for editing content on the Drupal 8 site.

See also: https://civicrm.org/universal-css-styles

General tips

• Always login from https://d8.civicrm.org/user, it will be a more predictable experience (ex: the toolbar displays oddly when authenticated and viewing d8 pages from civicrm.org instead of d8.civicrm.org)
• The "Edit" link is in the page header, next to the logo. (bgm does not like those links, as they influence the page display depending on whether you are logged-in or not)
• The quickedit module has been uninstalled, since it does not work well with Gutenberg.
• No more panels or other layout editors. We can embed views in a Gutenberg page.

CSS classes

Instead of having node fields to enforce visual cues ("first banner", "blue banner", "random section"), we cab use Gutenberg 'groups'. We can add CSS classes to Gutenberg groups to produce the same result.

Here is a list of CSS classes that can be applied. Many of them are based on the CSS from the d7 site.

Groups

Groups are wrappers around Gutenberg elements (paragraphs, columns, etc). Each section of the page should be in a group. It helps structuring an moving content around.

• page-banner : to display the "Banner image" field as the background for this container (formerly #banner)
• stripe-{blue,green,grey,lightgrey}: backgrounds
• container: to center the group, instead of taking the full page width. Most text content needs this class if they do not have one of the above classes.

Most of these are visible on https://civicrm.org/spark

Columns

Usually Gutenberg columns are good enough out of the box, but you can add this class for a bit more opinionated styling:

• display-flex-space-between: Display elements on the same row, with equal spacing in between. Ex: /explore-civicrm
• display-button-at-bottom: align buttons at the bottom of columns, and make them full width. Ex: home page.
• display-flex-vertical: flex with vertical alignment. Ex: make-it-happen.

Buttons

Colors:

• bluebutton
• bluegreenbutton
• greenbutton
• pinkbutton
• whitebutton

You can combine with text effects, listed below, although usually not recommended (all buttons should have the same styling).

Text effects

• thin: narrow letters (font-weight: 300)
• thick: heavier letters (font-weight: 700)
• capital: all caps
• oswald: Oswald font
• oswald-titles: Oswald font for h2/h3/h4 inside a container - helps for Drupal blocks in Gutenberg pages
• intro: slightly bigger text
• green: green text
• white: white text
• black-shadow: black box-shadow, for white text on colourful background (ex: Spark banner)

These might go away if we standardize titles:

• size28p
• size48p

Paddings

Sometimes we want to be able to have more control on the padding above/after containers or other items:

• vertical-margin-top-none
• vertical-margin-bottom-none
• vertical-margin-top-1em
• vertical-margin-top-2em
• vertical-margin-bottom-1em
• vertical-margin-bottom-2em
• vertical-padding-top-none
• vertical-padding-bottom-none

And also:

• top50p
• top30p

Drupal7 CSS documentation

https://civicrm.org/node/6286

Menus and Breadcrumbs

By default, Drupal8 generates breadcrumbs based on the path (URL) of the page.

This poses a bit of a challenge, since:

• We have a lot of pages that start at the root, ex: /code-of-conduct, /trademark, /terms-of-use
• We want to get rid of the 3rd menu level, so the breadcrumb is important for navigation

Using the menu_breadcrumb module, pages that have a menu entry can generate a breadcrumb based on that menu hierarchy.

Some paths have been redirected. Some of the changes are admittedly a bit arbitrary and had been done before enabling menu_breadcrumb. The redirections are in the nginx-custom.conf file.

Pages currently served from Drupal 8

• https://civicrm.org/esr
• https://civicrm.org/explore-civicrm (80% converted to Gutenberg)
• https://civicrm.org/about (and most sub-pages)
• https://civicrm.org/spark

Pages in Drupal8 have a [D8] indicator in the footer of the page.

Viewing the old page

Once a page has been migrated to Drupal8, we may want to be able to access it later on in order to compare with how it was before.

• The page might be available on a test site (ex: test22).
• It might be possible to rename the d7 URL path to /the-page-old, but that may break block configurations.
• Temporarily remove the nginx redirection (which only bgm can do).