Change logo size on loginpage

Hi. I just want to make the logo bigger on the loginpage of my nextcloud server. I want to know where the code is for doing that.

The theming app doesn’t allow resizing the logo, so you’ll need to override your theme and enable it in your config file: https://docs.nextcloud.com/server/12/developer_manual/core/theming.html

In my theme the logo size is defined here:
/var/www/nextcloud/themes/mycustomtheme/core/css/styles.css

Like this:
#header .logo {
background-image: url(’…/img/logo.png’);
width: 250px;
height: 121px;
}
#header .logo-icon {
background-image: url(’…/img/logo-icon.png’);
width: 62px;
height: 34px;
}

I think that’s what you need.

With Nextcloud 13 I found that you have to modify the guest.css file in order to change the size and spacing of the logo size and logon form.

The path to the file is: /var/www/html/nextcloud/core/css/guest.css

Do a search or scroll down to:

/* Global content */
You will want to modify the following: “The text below in bold is my notes on what to do

#header .logo {
background-image: url(’…/img/logo.svg?v=1’);
background-repeat: no-repeat;
background-size: 275px;
background-position: left; Change this from center to Left - depending on your image, as center may be fine for you
width:446px; Change this from the default number to whatever number you want – I set mine to 446px
min-height: 288px; Change this from the default number to whatever number you want – I set mine to 288px
max-height: 280px; Change this from the default number to whatever number you want – I set mine to 280px
margin: 0 auto;
}

#header .logo img {
opacity: 0;
max-width: 100%;
max-height: 200px;
}
.wrapper {
width: 500px; Change this from the default number to whatever number you want – I set mine to 500px
margin-top: 10vh;
}

/* Default FORM */
form {
position: relative;
width: 280px;
margin: auto;
padding: 40px; Change this from 0 to whatever number you want (I changed mine to 40px I liked it spaced that far from the logo).
}

2 Likes

Hello I changed my guest.css like you did. Everything looks fine on a desktop PC or tablet, but when I open the login screen on a mobile device the logo seems to big for the screen and I’ve to “scroll” to the right to see the whole logo. Has anyone an idea what to change to get the mobile version of the website fixed?