title: " Gerrit Code Review - PolyGerrit Plugin Styling" sidebar: gerritdoc_sidebar permalink: dev-plugin-pg-styling.html


Work in progress. Hard hat area.
This document will be populated with details along with implementation.
Join the discussion.

Plugin styles

Plugins may provide Polymer style modules for UI CSS-based customization.

PolyGerrit UI implements number of styling endpoints, which apply CSS mixins using @apply to its direct contents.


Only items (ie CSS properties and mixin targets) documented here are guaranteed to work in the long term, since they are covered by integration tests.
When there is a need to add new property or endpoint, please file a bug stating your usecase to track and maintain for future releases.

Plugin should be html-based and imported following PolyGerrit’s dev guide.

Plugin should provide Style Module, for example:

``` html <dom-module id=“some-style”> <style> :root { --css-mixin-name: { property: value; } } </style> </dom-module> ```

Plugin should register style module with a styling endpoint using Plugin.prototype.registerStyleModule(endpointName, styleModuleName), for example:

``` js Gerrit.install(function(plugin) { plugin.registerStyleModule(some-endpoint, some-style); }); ```

Available styling endpoints


Following custom css mixins are recognized:

  • --change-metadata-assignee

    is applied to gr-change-metadata section.assignee * --change-metadata-label-status

    is applied to gr-change-metadata section.labelStatus * --change-metadata-strategy

    is applied to gr-change-metadata section.strategy * --change-metadata-topic

    is applied to gr-change-metadata section.topic

Following CSS properties have long-term support via integration test:

  • display

    can be set to none to hide a section.