Kibana login page customization

abaltan · July 20, 2022, 2:24pm

Hello,

I'm using Elastic&Kibana 8.3 and trying to change the logo and text in kibana login page below. any idea how to change it?

Thanks in advance

Larry_Gregory · July 20, 2022, 8:00pm

Hey @abaltan,

The logo and welcome text are not customizable at this time. There are a number of facets you can customize though, which are documented here:

xpack.security.loginAssistanceMessage
Adds a message to the login UI. Useful for displaying information about maintenance windows, links to corporate sign up pages, and so on.
xpack.security.loginHelp
Adds a message accessible at the login UI with additional help information for the login process.
xpack.security.authc.selector.enabled
Determines if the login selector UI should be enabled. By default, this setting is set to true if more than one authentication provider is configured.

The ability to offer this level of customization is something that's come up a number of times before. There's an issue here tracking a number of related requests: Easy way to customize Kibana logo and theme · Issue #17879 · elastic/kibana · GitHub

It appears that there is a third-party plugin (unsupported by Elastic) which attempts to do this. You could give this a try if you were interested: GitHub - lizozom/custom-kibana-theme: Customize Kibana's appearance (logos, icons, texts and more)

abaltan · July 21, 2022, 6:13am

Thank you for your response @Larry_Gregory, is there a way to change it even if it means changing the src code? I'd appreciate if you could share with me the path of the login page file.

Larry_Gregory · July 21, 2022, 11:25am

@abaltan the source code for the login page can be found here:

github.com

elastic/kibana/blob/main/x-pack/plugins/security/public/authentication/login/login_page.tsx#L128-L142


      
          <div className={contentHeaderClasses}>
            <EuiSpacer size="xxl" />
            <span className="loginWelcome__logo">
              <EuiIcon type="logoElastic" size="xxl" />
            </span>
            <EuiTitle size="m" className="loginWelcome__title">
              <h1>
                <FormattedMessage
                  id="xpack.security.loginPage.welcomeTitle"
                  defaultMessage="Welcome to Elastic"
                />
              </h1>
            </EuiTitle>
            <EuiSpacer size="xl" />
          </div>

abaltan · July 23, 2022, 7:41pm

Hi,

This is what I have in the path you provided

Larry_Gregory · July 25, 2022, 11:33am

@abaltan you're looking in the distributable, not the repository. You'd need to clone the git repository and produce a local build if you want to make code changes.

Within the distributable, this specific file would be located somewhere within the plugin's JS bundles, which would be in the x-pack/plugins/security/target/public directory of the distributable.

system · August 22, 2022, 11:34am

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