style bb single login

[plp-pily]

Hi y’all,

could you please help with the login screen colors?

This is what I found so far, but it lacks the color of the button icon and text:

.login_popup .loginform label .forgot_password{
    color:#574b3f !important;
}

#login #loginform input{
    color:#574b3f !important;
    background-color:#e1f5f4 !important;; 
}

.icon .vicon .vicon-email .button .is-primary{
    color:#574b3f !important;
    background-color:#e1f5f4 !important;; 
}

.logged-out #vibe_bp_login .fullscreen_login, #vibe_bp_login ul+ul, .login_popup {
background: #574b3f ;
}
.login_popup.medium .login_popup_content h2, .login_popup.elegance .login_popup_content h2 {
color: #e1f5f4; 
}

I’d like to alter “Login with email” into just login and with the color #e1f5f4

Would there also be a way to style this a little better. I’d like to set a background image.

Thanks for your help.

[plp-pily]

PS.: On the next screen the black labels are disturbing: https://prnt.sc/10fgbcb

I tried
.control{color: #e1f5f4; }
without success.

[plp-pily]

This reply has been marked as private.

[Ada]

Hi,

To change the login with email button color you can use this custom css in appearance>> customize>> custom css.
Adjust color code as per your need.

#vibebp_login_wrapper .login_popup.medium a.button.is-primary {
    background:#a8d9d7 !important;
}
#vibebp_login_wrapper .login_popup.medium a.button.is-primary span{
   
    color:grey !important;
}

And to change the text to just login you need to use translation plugin like loco translate and there from vibebp plugin translate “Login with email” string to “login”.

[plp-pily]

Thanks for this Ada. Worked great!

Would there also be a way to style this a little better? I’d like to set a background image.

On the next screen the black labels are disturbing: https://prnt.sc/10fgbcb

I tried
.control{color: #e1f5f4; }

…without success.

Thanks for your help.

[Ada]

Hi,

Yes you can add background-image here.
Use this css for colors and background image modification.
Adjust color code as per your need.

.login_popup.medium {
    background-image:url(http://localhost/wplms-1/wordpress/wp-content/uploads/2021/03/pexels-photo-92331-768x512-1.jpeg) !important;
    height:auto !important;
    width:auto !important
  background-position: center; 
  background-repeat: no-repeat; 
   background-size: cover;
 
} 
.login_popup.medium .login_popup_content  h2{
    color:#363e45 !important; }

    .login_popup.medium .login_popup_content  p{
    color:#363e45 !important; }
   
   .login_popup.medium .loginform .control label strong{
     color:#3e39398923 !important;
   }
   #vibebp_login_wrapper .login_popup.medium a.button.is-primary{
   
    color:grey !important;
}

[plp-pily]

Excellent! On the following site is a missing class that I can’t find….
One Color at the login site here: https://prnt.sc/10gbuct

I guess this ticket is sorted when I’m able to change this last bit. 😉

Thanks a lot!

• This reply was modified 1 month, 1 week ago by plp-pily.

[Ada]

Hi,

Use this css code for this https://prnt.sc/10gbuct

#vibebp_login_wrapper .login_popup_content .loginform .checkbox.error {
    color:white !important;
    border-color:white !important;
}
#vibebp_login_wrapper .login_popup_content .loginform .checkbox.error label:before {
    border-color:white !important;
    }
#vibebp_login_wrapper .loginform .error{
    color:white !important;
}

[plp-pily]

Thanks ADA,
what would be the class for the t&c link please? https://prnt.sc/10gxudm

• This reply was modified 1 month ago by plp-pily.

[Ada]

This code will work

#vibebp_login_wrapper .login_popup_content .loginform .checkbox.error a {
    color:white !important;
    border-color:white !important;
}

Please confirm can we close this topic?

[plp-pily]

Perfect ADA, thanks a lot!

Problem solved, ticket can be closed!

[Ada]

Thankyou for appreciation. 🙂
Closing.