Hi, All
I managed to put a custom background on the login page via custom scss.
However i don’t know how to change the login E icon , 2) How to remove or change the Home icon and the Login to frappe is quite transparent i want to make it more dark or delete, and last if possible transparent the login box.
Thanks
Check that class then apply display none
Please check the CSS in the reference post. I applied the white color.
I tried but i can’t find similar to like yours, can you please check it, as i don;t know much about this.
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background: url(‘/files/wmkw8ML-forest-green-wallpaper.jpg’) no-repeat center center/cover;
position: relative;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.login-box {
background: rgba(255, 255, 255, 0.1); // Increased transparency
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 300px;
width: 100%;
z-index: 1;
}
.login-box h2 {
margin-bottom: 20px;
font-size: 24px;
color: #fff;
}
.input-container {
position: relative;
margin-bottom: 20px;
}
.input-container input {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.7);
font-size: 16px;
outline: none;
}
.input-container label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #666;
pointer-events: none;
transition: all 0.3s ease;
}
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
top: -10px;
left: 10px;
font-size: 12px;
color: #fff;
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
color: #fff;
}
.options a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
button {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background: #fff;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #ddd;
}
p {
color: #fff;
font-size: 14px;
}
p a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
Thank You
The best way to apply changes is to open the console and make the changes one by one, checking the effects after each change. If it works properly, apply it to the code. Sometimes, the changes might not take effect immediately, so you may need to build the app using bench build --force.
how to open the console ?
ok thanks
thanks for the video , you deserve a raise 
hi, @NCP
I managed to change the styles, and the video is quite helpful too, however after changing the styles, how can i save it ?
Thank you
You can’t save or apply changes directly. Keep them in mind, then implement them in your code.
Ohh Okay okay , so it was a practice match and now i have to play the real moves into the field.
Yes 
What if i simply copy paste all those elements into the erpnext scss box, will it work ? or do i need to write the whole thing as i’m new to this so it’s little confusing.
Thank you
Yes.
Please check the reference, for more understanding.
Hi, @NCP
Everything works fine, only facing 2 issues.
1st Unable to change the Login with frappe colour to while, (can’t find the style)
2nd Unable to make the box transparent.
rest all working fine.
Thanks.
here is my scss as well- body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background: url(‘/files/wmkw8ML-forest-green-wallpaper.jpg’) no-repeat center center/cover;
position: relative;
}
.navbar {
visibility: hidden !important;
}
.web-footer {
display: none;
}
.navbar-brand {
display: none !important;
}
.btn-login-with-email-link {
display: block;
width: 100%;
max-width: 200px; /* Example max-width /
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #007bff;
border: none;
border-radius: 5px;
margin-top: 1rem;
font-size: 16px; / Adjust font size as needed */
cursor: pointer;
}
.btn-login-with-email-link:hover {
background-color: #0056b3;
}
.login-button-wrapper,
.text-muted.login-divider {
display: none; /* Hide the login button wrapper and the text-muted login divider */
}
.login-content.page-card {
background-color: rgba(255, 255, 255, 0.5); /* Transparent white background */
padding: 45px 10px;
max-width: 400px;
margin: 0 auto;
border-radius: var(–border-radius-md);
border: 1px solid var(–border-color);
}
