0
Started

Move Logo Above Login Credentials?

Marthur J 2 months ago updated 1 month ago 10

How can I move the logo above the login credentials?

Image 1276

Under review

It would be quite hard to do that at the moment.

Most screens are wider than than they are taller. It would maybe make sense for a mobile screen. Any particular reason why you would like that?

I looked into the CSS more and was able to get the look that I wanted:

Image 1277

I just want to experiment with the aethetics of the login page. Moving the logo above the login credentials would remove a lot of the unused empty space above and below the logo. I'm currently working with the "customizables/theme.css" at the moment.

Please share, it looks much better than the default login screen.

Thank you, this is what I'm currently using for the "customizables/theme.css". I don't have it optimized for mobile yet.

#filerun-login-window
{
background-color: rgba(20,20,20,0.6);
box-shadow: 0 0 33px 0px #131313;
backdrop-filter: blur(50px);
}

#theBODY.fr-transparent-login
{
margin-left: auto;
margin-right: auto;
}

#filerun-login-window.x-window.login
{
width: 400px !important;
}

#fr-gen11.x-window-body.x-border-layout-ct
{
height: 375px !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#fr-comp-1111.x-panel.x-border-panel
{
height: 165px !important;
width: 280px !important;
position: initial;
order: 1;
}

#fr-comp-1107.x-panel.x-border-panel
{
height: 200px !important;
width: 280px !important;
position: initial;
order: 2;
}

#fr-gen15.x-panel-body
{
height: 140px !important;
}

Here is an example graphic of what I'm targeting:

Image 1278

Final result:

Image 1279

UPDATE: I was able to get the mobile view setup. I made some additional changes. Below is the final"customizables/theme.css":

/* Login Page Body */
#theBODY.fr-transparent-login
{
margin-left: auto;
margin-right: auto;
}

/* Login Window */
#filerun-login-window.x-window.login
{
background-color: rgba(30,30,40,0.9);
box-shadow: 0 0 33px 0px #131313;
backdrop-filter: blur(0px);
width: 375px !important;
}


/* Parent of Logo and Login DIV containers */
#fr-gen11.x-window-body.x-border-layout-ct
{
height: 330px !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Logo DIV container for "normal" view */
#fr-comp-1111.x-panel.x-border-panel
{
margin-bottom: 10px !important;
height: 140px !important;
width: 280px !important;
top: 0px !important;
left: 0px !important;
right: 0px !important;
position: sticky;
order: 1;
}

/* Logo DIV container for "small" view */
#fr-comp-1113.x-panel.x-border-panel
{
margin-bottom: 20px !important;
height: 140px !important;
width: 280px !important;
top: 0px !important;
left: 0px !important;
right: 0px !important;
position: sticky;
order: 1;
}

/* Login DIV container*/
#fr-comp-1107.x-panel.x-border-panel
{
height: 200px !important;
width: 280px !important;
top: 0px !important;
left: 0px !important;
right: 0px !important;
position: sticky;
order: 2;
}

/* Adjust "Sign in" button vertical placement */
#fr-gen15.x-panel-body
{
height: 130px !important;
}

/* Forgot Password */
.x-form-display-field.forgotPass
{
display: none;
}

/* "Sign in" button for "Normal" view + hover effect */
#fr-comp-1110.frBtn.fr-btn-primary.fr-btn-signin
{
width: 280px;
background-color: #0069e0;
}

#fr-comp-1110.frBtn.fr-btn-primary.fr-btn-signin:hover
{
background-color: #61a0ff;
}

/* "Sign in" button for "small" view + hover effect */
#fr-comp-1112.frBtn.fr-btn-primary.fr-btn-signin
{
width: 280px;
background-color: #0069e0;
}

#fr-comp-1112.frBtn.fr-btn-primary.fr-btn-signin:hover
{
background-color: #61a0ff;
}

The final login window looks like the following:

Image 1280

Beautiful! I will do my best to implement this or at least make it more reliable to keep the customizations between updates (addressing elements by id's such as #fr-comp-1112 works ok, but is not very relibable as the can change between updates or with different settings).

Thank you! That would be aweome if you can have an ID or Class that is more specific (and static/universal). I figured the IDs were generated and could differ between FIleRun instances, but I didn't know of another way to target what I needed using the CSS. So I made that quick diagram showing roughly where the page elements are for the custom css.


I made further updates, but decided that I'll link them below since the CSS takes up a lot of space on this page.

https://tb7.link/fileruncustomlogin


Notes:

I made adjustments to the Username/Password input fields - they were not selectable using Chrome - kinda important. The CSS for "display:flex;" and "flex-direction:column;" worked fine in Firefox, but not in Chrome - the input elements were unselectable via the mouse cursor (tab key still worked). To fix this I added a "position: relative" and a "z-index" value to the "Login DIV container" (see link above).

+1
Started

With the next update there will be a control panel option for moving the logo at the top, so you don't need to make structural changes via CSS, as it might result in problems on particular screen sizes (mobile devices). I have adapted the cosmetic changes, so in the end it should look by default quite similar to your look. I've also improved the blue theme, particulary on dark mode.

Thank you for adding this to the update. I'm looking forward to it!