Replace the kibana logo in version 7.4

Elastic Stack Kibana
1

/src/ui/public/images/kibana.svg This path does'nt exist in kibana version 7.4. There is a file named commons.style.css in /usr/share/kibana/optimize/bundles in which def : src image - url of mapbox is there but not of kibana. Can anyone help me with changing the logo of kibana v-7.4 for corporate use ??

2

Hi and welcome to our community! :wave:

There's no official way to do this yet, and recently the way the logo was rendered was changed. So you could add e.g. the following rule to customstyle.css, to replace the logo on top left:

  a[data-test-subj="logo"] * {
      display: none;
  }  
  a[data-test-subj="logo"] {
      background: url({url of your logo}) no-repeat 0 0;
      background-size: auto 26px;
      border-bottom: none;
      background-position: 10px 10px;
   }

customstyle.css seems to be a custom plugin of your installation? if so, and it's imported by Kibana, you can add this styles customized to your use case, there.

If you're interested in progress concerning Kibana theming, here's the Github issue:

Hope this helps

3

@matw thank you for the reply.... Hi! I added the code data-test-subj in commons.styles.css using the custom image that i needed. I also made a change in /kibana/src/legacy/ui/public/assets/images/kibana.svg file. After starting kibana, nothing has changed. Is there any other path that i am missing?

4

Have you evaluated, that the loaded commons.styles.css is containing the new css rule? (Via Browser Dev tools)

5

No, according to dev tools no new rule is added.Error is refused to execute due to Content Security policy directives...

6

I think you might follow this procedure to add a custom css rule:

7

@matw this worked like a charm thanks! I ended up making a custom plugin with a hack UI export then had it import a .less file so I know the rules will always stick.

1 Like
8

Can you share the code of this hack please ?

9

Sure see below:

Index.js:

export default function (kibana) {

	return new kibana.Plugin({
		id       : 'custom_css',
		require: ['kibana'],
		uiExports: {
			hacks: [
				'plugins/custom_css/hack'
			]
		}
	});
};

hack.js:

import 'plugins/custom_css/less/main.less'

and my main.less:

a[data-test-subj="logo"] * {
  display: none;
}
a[data-test-subj="logo"] {
  background: url(URL TO YOUR LOGO) no-repeat 0 0;
  background-size: auto 26px;
  border-bottom: none;
  background-position: 10px 10px;
}
2 Likes
10

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.