Customizing the Kibana login page

[das]

Hello everyone. I want to customize the kibana login page. I want to change the logo there and also add some aditional text in that page. I am attaching the snap of the page I am talking about. Please could you point me on the correct direction on how can I achieve this goal. Thank you so much in advance.

[mudboyzh]

In kibana.yml

opendistro_security.basicauth.login.brandimage: "your-image-url"
opendistro_security.basicauth.login.title: your title here
opendistro_security.basicauth.login.subtitle: Your<strong> account </strong> and <strong>password</strong>

You can take a look at Customizing the Search Guard Kibana Plugin login page | Security for Elasticsearch | Search Guard

[Nybble]

Hi guys,

I jump on this conversation because I’m currently customizing the Kibana login page too.

If this can help, it’s possible to put a base64 SVG directly in the “brandimage” parameter :

opendistro_security.ui.basicauth.login.brandimage:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4....HVvfg=="

Also, I wanted to customize the login button, I tried to use the “buttonstyle” parameter in many different ways, like:

opendistro_security.ui.basicauth.login.buttonstyle: "background-color: #000000"

But the color is not modified.

Does anyone know how to pass the style parameters to customize the login button ?

Thanks,
Sébastien.

[mouse]

Hi,

@mudboyzh

opendistro_security.basicauth.login.subtitle: Your<strong> account </strong> and <strong>password</strong>

How to use it? If I write as in the example, then html tags are displayed as they are (converted to “<”, “>” in code).

@Nybble in opendistro_security.ui.basicauth.login.buttonstyle need NAME style but not code
I change /usr/share/kibana/node_modules/@kbn/ui-framework/dist/kui_light.css add to it

.mf_button_1 {
    background-color: #731982 !important;
    width: 100%;
}

and to kibana.yml

opendistro_security.ui.basicauth.login.buttonstyle: "mf_button_1"

[mudboyzh]

Hi,
I think the html tag in subtitle is not working in newer version.
I guess it is the difference between Angular version and React version.
In v1.13 source code

I’m not familiar with JSX(React).
For avoiding xss, it seems to transform the code in {…}, check this.
In short, I think it needs to rewrite the code for subtitle if you need that.