Kibana 自定义仪表板背景颜色

Question

我正在尝试为 Kibana 仪表板自定义 背景颜色 以匹配我的网站设计。

我正在使用 IFrame 发布仪表板，我无法使用 CSS 更改背景。

我在设计我的网站时认为 Kibana 是可定制的。在过去的 5 个小时里，我在整个互联网上搜索，我找不到一篇描述这样的文章。

有没有supported/hacked自定义背景颜色的方法？

Answer 1

回答我自己的问题，首先你应该确保你的应用程序与 Iframe 同源，否则它将无法工作。

假设我们有这个 iframe：

<iframe
      #chatFrame
      [frameBorder]="0"
      id="chatFrame"
      src="YOUR_URL"
      height="1000px" width="100%"></iframe>

您应该访问 jquery 的 DOM 并相应地更改 css 类，

    $('chatFrame').on('load', function() {
      let head = $('iframe').contents().find('head');
      let css = '<style> html{background-color: #202548 !important;} .euiPanel{margin:2px; background-color:#262b4d} .mapboxgl-canvas{background-color: #0f6674}</style>';
      $(head).append(css);
    });

这里棘手的部分是知道你们必须在同一个来源

Kibana 自定义仪表板背景颜色

Kibana custom dashboard background color

iframe

kibana

angular