Lightdm login box - changing font size etc

I am using XFCS on Manjaro. I have successfully used the “LightDM GTK+ Greeter settings” panel to change the DPI of the login screen and the font size of the greeter password field.

However neither of those settings change the size of the uppermost “user” dropdown box nor the font size of the username.

It looks really weird to have it so small.

Where do I change settings or a config file to make the greeter username field a similar size and font size to the password field?

Thanks

It likely defined in a gtk ui definition file.

Such files are typically found in the greeters install folder.

I suggest you copy the theme to a new folder beside the original and modify the copy (remember the internal name) - as any changes to the original will by overwritten when the package is updated or reinstalled.

Thank you for the suggestion.

I am relatively new to Linux. Can you tell me the location of the “gtk ui definition file”?

I have searched and googled - to no avail…

Thanks

The Lightdm greeter conf file should be in /etc/lightdm , etc usually holds configuration files for the system.

Thanks.

I did find two config files for lightdm there:

lightdm-gtk-greeter.conf
lightdm.conf

I chose lightdm-gtk-greeter.conf and as far as I can see this file contains the settings that you can configure anyway from the settings manager (as I mentioned at the start of this thread).

Having previously played with settings in there, I already suspected that no changes I could make in the conf file would affect the size of the greeter username font and field. This did indeed prove to be the case when changing values directly in the “lightdm-gtk-greeter.conf” file.

The only remaining possibility now is that the “gtk ui definition file” referred to by @linux-aarhus is a different one from “lightdm-gtk-greeter.conf”

But unfortunately I have no idea where that is and cannot therefore make the changes I need.

Anyone?

Thank you anyway.

look at the content of

/usr/share/doc/lightdm-getk-greeter

Thank you @linux-aarhus

In my folder: /usr/share/doc/lightdm-gtk-greeter, there is but one file:

“sample-lightdm-gtk-greeter.css”

The introduction in this file says: “Below are two samples of what a greeter theme in Gtk3 could look like.”

This makes me feel that it is only a sample and not the style sheet actually affecting the login box. Also as I look through it, I don’t immediately see anything that has an effect on the overall username dropdown height…

I am pasting the entire contents of that file below…

Does anyone know where the ‘live’ style sheet lives??

Thanks

###########################################################################

/*
Theming samples for lightdm-gtk-greeter 1.8

Below are two samples of what a greeter theme in Gtk3 could look like. For the first one, we're only using the lightdm-gtk-greeter style-class. This is best if you just want to set a simple color-scheme.
For more fine-grain control, you can also use the named widgets. Those are being used in the second sample, because that gives you maximum control over the greeter.

*/

/*************************
 * 1. Minimalistic theme *
 *************************/

.lightdm-gtk-greeter {
    background-color: black;
    color: white;
}


/*************************
 * 2. Advanced theme *
 *************************/
 
/* the panel widget at the top */
#panel_window {
    background-color: alpha (black, 0.5);
    color: white;
    font: bold;
    text-shadow: 0 1px alpha(black, 0.5);
    icon-shadow: 0 1px alpha(black, 0.5);
    box-shadow: inset 0 -1px alpha (black, 0.5);
}

/* the menubars/menus of the panel, i.e. indicators */
#panel_window .menubar,
#panel_window .menubar > .menuitem {
    background-color: transparent;
    color: white;
    font: bold;
    text-shadow: 0 1px alpha(black, 0.5);
    icon-shadow: 0 1px alpha(black, 0.5);
}

#panel_window .menubar .menuitem:insensitive {
    color: alpha(white, 0.7);
    text-shadow: none;
}

#panel_window .menubar .menu {
    border-radius: 1px;
}

#panel_window .menubar .menu .menuitem {
    font: normal;
    text-shadow: none;
}

/* the login window */
#login_window,
#shutdown_dialog,
#restart_dialog {
    border-style: none;
    border-radius: 5px;
    background-color: @lightdm_bg_color;
    color: @lightdm_fg_color;
    /* the window widget doesn't have a border, so draw border using box-shadow */
    box-shadow: inset 1px 0 shade(@lightdm_bg_color, 0.6),
                inset -1px 0 shade(@lightdm_bg_color, 0.6),
                inset 0 1px shade(@lightdm_bg_color, 0.6),
                inset 0 -1px shade(@lightdm_bg_color, 0.6);
}

/* the top half of the login-window, in GtkDialog terms, the content */
#content_frame {
    padding-bottom: 14px;
}

/* the user-combobox */
#login_window .menu {
    border-radius: 1px;
}

#login_window GtkComboBox .button,
#login_window GtkComboBox .button:hover,
#login_window GtkComboBox .button:active,
#login_window GtkComboBox .button:active:hover,
#login_window GtkComboBox .button:focus,
#login_window GtkComboBox .button:hover:focus,
#login_window GtkComboBox .button:active:focus,
#login_window GtkComboBox .button:active:hover:focus {
    padding: 0;
    background: none;
    border-style: none;                                      
    box-shadow: none;
}

#login_window GtkComboBox .button:focus,
#login_window GtkComboBox .button:hover:focus,
#login_window GtkComboBox .button:active:focus,
#login_window GtkComboBox .button:active:hover:focus {
    box-shadow: inset 1px 0 alpha(@theme_selected_bg_color, 0.6),
                inset -1px 0 alpha(@theme_selected_bg_color, 0.6),
                inset 0 1px alpha(@theme_selected_bg_color, 0.6),
                inset 0 -1px alpha(@theme_selected_bg_color, 0.6);
}

#login_window #user_combobox {
    color: @lightdm_fg_color;
    font: 18px;
}

#login_window #user_combobox .menu {
    font: normal;
}

#login_window #user_combobox .arrow {
    color: mix(@lightdm_fg_color, @lightdm_bg_color, 0.5);
}

/* the entries, one for the username, one for the password */
#login_window .entry {
    padding: 3px 5px;
    border-width: 1px;
    border-style: solid;
    border-color: shade(@lightdm_bg_color, 0.8);
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                                      shade(@lightdm_bg_color, 0.95),
                                      shade(@lightdm_bg_color, 0.97) 30%,
                                      shade(@lightdm_bg_color, 1.02)
                                      );

    color: @lightdm_fg_color;
                                      
    box-shadow: none;
    transition: all 150ms ease-out;
}

#login_window .entry:focus,
#login_window .entry:hover {
    border-color: shade(@lightdm_bg_color, 0.7);

    box-shadow: inset 1px 0 alpha(@dark_shadow, 0.10),
                inset 0 1px alpha(@dark_shadow, 0.12),
                inset -1px 0 alpha(@dark_shadow, 0.10);
}

/* the buttons, alternatively this could also be done with a simple ".lightdm-gtk-greeter .button" */
#login_window .button,
#shutdown_dialog .button,
#restart_dialog .button {
    padding: 3px 15px;
    transition: all 150ms ease-out;
}

/* the user's avatar box */
#user_image {
    padding: 3px;
    border-radius: 3px;
    /* draw border using box-shadow */
    box-shadow: inset 1px 0 shade(@lightdm_bg_color, 0.75),
                inset -1px 0 shade(@lightdm_bg_color, 0.75),
                inset 0 1px shade(@lightdm_bg_color, 0.55),
                inset 0 -1px shade(@lightdm_bg_color, 1.8);
}

/* the border around the user's avatar box */
#user_image_border {
    border-radius: 3px;
    box-shadow: inset 0 1px shade(@lightdm_bg_color, 0.8),
                inset 0 -1px shade(@lightdm_bg_color, 0.55);
    background-image: linear-gradient(to bottom,
                                      shade(@lightdm_bg_color, 0.9),
                                      shade(@lightdm_bg_color, 0.98) 10%,
                                      shade(@lightdm_bg_color, 1.0) 99%,
                                      shade(@lightdm_bg_color, 1.0)
                                      );
}

/* the lower half of the login-window, in GtkDialog terms the buttonbox or action area */
#buttonbox_frame {
    padding-top: 20px;
    padding-bottom: 0px;
    border-style: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-image: linear-gradient(to bottom,
                                      shade(@bg_color, 0.85),
                                      shade(@bg_color, 0.98) 10%,
                                      shade(@bg_color, 1.0) 99%,
                                      shade(@bg_color, 1.0)
                                      );
    box-shadow: inset 1px 0 shade(@lightdm_bg_color, 0.6),
                inset -1px 0 shade(@lightdm_bg_color, 0.6),
                inset 0 1px shade(@lightdm_bg_color, 0.6),
                inset 0 -1px shade(@lightdm_bg_color, 0.6);
}

/* the buttons that have focus by default in each window */
#login_window .button.default,
#shutdown_dialog .button.default,
#restart_dialog .button.default,
#login_window .button:focus,
#login_window .button:active:focus,
#shutdown_dialog .button:focus,
#shutdown_dialog .button:active:focus,
#restart_dialog .button:focus,
#restart_dialog .button:active:focus {
    border-color: shade(@theme_selected_bg_color, 0.8);
    background-image: linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 1.02),
                                      shade(@theme_selected_bg_color, 0.95) 90%,
                                      shade(@theme_selected_bg_color, 0.90)
                                      );

    color: @theme_selected_fg_color;
}

#login_window .button.default:hover,
#shutdown_dialog .button.default:hover,
#restart_dialog .button.default:hover,
#login_window .button:hover:focus,
#login_window .button:active:hover:focus,
#shutdown_dialog .button:hover:focus,
#shutdown_dialog .button:active:hover:focus,
#restart_dialog .button:hover:focus,
#restart_dialog .button:active:hover:focus {
    border-color: shade(@theme_selected_bg_color, 0.7);
    background-image: linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 1.12),
                                      shade(@theme_selected_bg_color, 1.05) 90%,
                                      shade(@theme_selected_bg_color, 1.00)
                                      );
}

/* the shutdown button */
#shutdown_button.button {
    border-color: shade(@error_bg_color, 0.8);
    background-image: linear-gradient(to bottom,
                                      shade(@error_bg_color, 1.02),
                                      shade(@error_bg_color, 0.95) 90%,
                                      shade(@error_bg_color, 0.90)
                                      );

    color: @error_fg_color;
}

#shutdown_button.button:hover,
#shutdown_button.button:active,
#shutdown_button.button:active:hover {
    border-color: shade(@error_bg_color, 0.7);
    background-image: linear-gradient(to bottom,
                                      shade(@error_bg_color, 1.12),
                                      shade(@error_bg_color, 1.05) 90%,
                                      shade(@error_bg_color, 1.00)
                                      );
}

/* the restart button */
#restart_button.button {
    border-color: shade(@warning_bg_color, 0.8);
    background-image: linear-gradient(to bottom,
                                      shade(@warning_bg_color, 1.02),
                                      shade(@warning_bg_color, 0.95) 90%,
                                      shade(@warning_bg_color, 0.90)
                                      );

    color: @warning_fg_color;
}

#restart_button.button:hover,
#restart_button.button:active,
#restart_button.button:active:hover {
    border-color: shade(@warning_bg_color, 0.7);
    background-image: linear-gradient(to bottom,
                                      shade(@warning_bg_color, 1.12),
                                      shade(@warning_bg_color, 1.05) 90%,
                                      shade(@warning_bg_color, 1.00)
                                      );
}

/* the warning, in case a wrong password is entered or something else goes wrong according to PAM */
#greeter_infobar {
    border-bottom-width: 0;
    font: bold;
}

The greeter get’s it’s theme from the systems themes directory - which theme is defined in the configuration file.

The system themes directory is located in

/usr/share/themes

If you want a customized theme you will have to create a custom theme by copying your preferred theme and rename the theme.

The recommended location is in your $HOME/.local/share/themes.

Then you add (or modify) your greeter config to the themes css either by inserting the deffinition in the css file or by using @import directive.

@linux-aarhus

Thank you for your suggestion.

I am not sure I particularly want to have to configure a new theme, especially when I consider that my basic issue is caused by the fact that my laptop has a HiDPI screen.

In fact I found a solution for this situation here:

It isn’t an elegant solution, but it works perfectly. In my case I had to set the scaling variable to 3.

Thanks for all help

Well - great then.

But you asked specifically for changing the font size and that size is defined in the theme css.

There are other options - one worthy of mention here is the lightdm-slick-greeter which was developed for Ubuntu based systems.

My personal preference has over the years developed to use the sddm display manager.

Thanks - I had wondered about switching to sddm. I would have done that as a last resort because in my experience, switching like that always introduced new issues that need to be tracked down. I don’t have time for a software ‘Whack-a-mole’!

Actually I did refer to both the font size and the size of the dropdown username box itself. Do you think if I merely changed the font size, the dropdown would be automatically adjusted to suit?

Additional question: I really dont want to copy theme templates then install a different theme. Do you know where the current css file that is governing styling of the LightDM login box?

Thanks