1

我已经安装并配置了 gerrit，我看到它有白色背景而不是像https://codereview.qt-project.org那样的绿色（在最近的版本中可能从绿色变为白色）但是，想知道我们是否可以自定义颜色并添加一个标志。

从gerrit-documentation我看到我们必须创建下面的文件并将它们放在 $site_path/etc/ 但是，我不知道如何创建它们，我不擅长 HTML。

$site_path/etc/GerritSiteHeader.html and 
$site_path/etc/GerritSiteFooter.html
$site_path/etc/GerritSite.css
$site_path/static/logo.png

  1. 是否可以更改 gerrit 页面的颜色，我的意思是从默认的白色变为其他任何颜色？

  2. 请向我提供示例 GerritSiteHeader.html 和 GerritSiteFooter.html，以便我可以对它们进行更改并在我的 gerrit 中使用。我以前没有使用过 HTML。

4

2 回答 2

3
  1. 有几个设置可以改变颜色gerrit.conf：主题设置。

  2. 我们在review.typo3.org上使用的主题文件的示例: GerritSiteHeader.html:

    <h2 class="typo3-logo">
<a href="/"><img src="/static/typo3-logo.cache.png" alt="TYPO3" /></a>
</h2>

我不会粘贴我们的 CSS 文件 (GerritSite.css)，因为它对您没有多大帮助。

如果您写下您想在页眉或页脚中添加的内容，可以为您提供帮助。但是，当您说您不了解 HTML（这很容易..）并且不说您想要什么时，很难告诉您确切的解决方案。我至少希望https://review.typo3.org能给你一个印象，你可以如何定制它。找人给你写 5 行 HTML 或 CSS 应该很容易。

于 2013-10-14T09:51:28.307 回答
0

如果您有带有 PolyGerrit UI 的 Gerrit 3+，您将无法再使用GerritSiteHeaders.html和GerritSite.css

为此，应该添加一个自定义.js插件

标识

把你的标志/gerrit_root/static/logo.png和你的插件放到/gerrit_root/plugins/plugin.js

这是一个插件的 hacky 示例，它分别为深色和浅色主题添加了深色和浅色徽标（可能有更好的方法，但这个方法有效）

Gerrit.install(plugin => {

  const domHook = plugin.hook('header-title', {replace: true});
  domHook.onAttached(element => {
    console.log(plugin);
    const img = document.createElement("img");

    if (document.getElementById('dark-theme') == null) {
      img.src = "/static/dark.png";
    } else {
      img.src = "/static/light.png";
    }

    img.height = 24;
    img.align = "top";
    element.appendChild(img);
  });
});

在某些版本中，更改主题后需要刷新页面，但最新版本会自行刷新。

颜色和款式

要更改颜色，您可以在新插件中覆盖样式：


const customTheme = document.createElement('dom-module');
customTheme.innerHTML = `
  <template>
    <style>
    html {
      // Here's how you can change default background
      --background-color-primary: yellow;
      // This is how to make header Qt Green
      --header-background-color: #41cd52;
      // You can change header's border as well
      // And you can use existing css variables
      --header-border-bottom: 1px solid var(--border-color);
    }
    </style>
  </template>
`;
customTheme.register('theme-plugin');

const darkCustomTheme = document.createElement('dom-module');
darkCustomTheme.innerHTML = `
  <template>
    <style>
    html {
      // The same way you can modify dark theme
      --primary-text-color: red;
    }
    </style>
  </template>
`;
darkCustomTheme.register('dark-theme-plugin');


Gerrit.install(plugin => {
  plugin.registerStyleModule('app-theme', 'theme-plugin');
  plugin.registerStyleModule('app-theme-dark', 'dark-theme-plugin');

  // LOGO related stuff from above and everything else
});

查看一些示例：polygerrit-ui/app/samples/

具有类似答案的相关问题

于 2021-12-30T21:49:18.673 回答