Topic on Project:Support desk

I use E:PluggableAuth and wish to deliberately modify the css of the buttons ("Login with password" and "Login with SSO of Server...").

The texts are too long for the buttons (mw1.41.0).

I cannot find in the source how to modify the button layout and kindly ask for your help how to change the layout (css and texts) of the registration/login page.

Modifying styles on Special:Userlogin is not that simple. AFAIK, pages like MediaWiki:Common.css and MediaWiki:Common.js are not being loaded in context of Special:Userlogin, due to security considerations.

Extension:PluggableAuth uses the standard AuthManager mechanism to create those buttons. So, unless you create a custom MediaWiki extension to load CSS on Special:Userlogin, I don't think you can influence this.

@Osnard:

thanks for your swfit reply.

Your reply exactly confirms my multiple observations before I filed my support request.

Especially I think that the development of such a custom extension as proposed by you might be required.

Perhaps anyone has a stub for such a type of custom extension which modifies the layout - or do you have a pointer to an suited extesnion to start with?

Actually you may be able to add such small thing directly to the LocalSettings

Example:

$GLOBALS['wgHooks']['BeforePageDisplay'][] = function( OutputPage &$out, Skin &$skin ) {
	$style = "<style type=\"text/css\">\n";
	$style .= "YOUR CSS GOES HERE";
	$style .= "</style>\n";

	$out->addHeadItem( 'change-login-button', $style );

	return true;
};

This is not really recommended though, as this kind of hook registration may be removed in the future.

Also have a look at Extension:BoilerPlate.

@Osnard This is the finally working version, fixed.

It makes the buttons (here the standard Login-button and the Extension:OpenIDConnect-Login-button) to display all texts on the buttons, even if the texts are longer:

# https://www.mediawiki.org/w/index.php?title=Topic:Xx8ol75kyh1qejp8
# How to modify the Login-Page
$GLOBALS['wgHooks']['BeforePageDisplay'][] = function( OutputPage &$out, Skin &$skin ) {
        $style = <<<EOT
            <style type="text/css">
                    button#wpLoginAttempt {
                            white-space: normal;
                            word-wrap: break-word;
                            height: auto !important;
                    }

                    button#mw-input-pluggableauthlogin0 {
                            background-color: salmon !important;
                            border-color: salmon !important;
                            white-space: normal;
                            word-wrap: break-word;
                            height: auto !important;
                    }
            </style>
EOT;

        $out->addHeadItem( 'change-login-button', $style );
        return true;
};