- General tips
- CSS classes
- Menus and Breadcrumbs
- Pages currently served from Drupal 8
- Viewing the old page
A few tips for editing content on the Drupal 8 site.
See also: https://civicrm.org/universal-css-styles
- 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.
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 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
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
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.
You can combine with text effects, listed below, although usually not recommended (all buttons should have the same styling).
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:
Sometimes we want to be able to have more control on the padding above/after containers or other items:
Drupal7 CSS documentation
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:
- 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
Pages currently served from Drupal 8
- https://civicrm.org/explore-civicrm (80% converted to Gutenberg)
- https://civicrm.org/about (and most sub-pages)
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).