Styling Issues

[Brad]

@michael Thank you for your assurance and explanation. I have been working to refine the theme to match my brand and have required support to do so — I’ve been able to fix some of the issues on my own, but would appreciate guidance, assistance, and an acknowledgement of some of the issues I’ve identified (such as the login page not recognizing the logo panel background color in the design despite the presence of the logo on the page).

Thanks,

Brad

[Anonymous]

@tradingpremium your point number 3.) There is a blue line above the login button on the above noted page.

i had added the css codes inside the boss-child/css/style-login.css
which you had already hooked inside the login head.

for item dropdown on the profile

#item-buttons .pop .inner,#item-buttons .pop .inner:before {
  background-color: #8FC063 !important;
}
.is-desktop #item-buttons .pop .inner a:hover{
    background-color: #82AF5A  !important;
  }

that had been added to custom.css

Regards
Varun Dubey

[Debra]

Hi there,

I’m also having trouble customizing the background color on the login page. I’ve tried overwriting it in the custom.css file and the style-login.css file and neither of them affect it.

It looks like it’s inline and can’t be overwritten. Is there another way to work around this?

[Alyssa]

@debrascott3491 You need to use functions.php and add code like this:

add_action('login_enqueue_scripts','add_css');
function add_css(){
echo '<style>
body{background:black;}
</style>';
}

This is all WordPress and a very secure login page

[Debra]

Thanks, TJ.

Unfortunately, this technique doesn’t work either because it puts the inline styling above the other one. So, the other inline styling is still overwriting the new one.

Here’s the page: https://members.athru.com/wp-login.php?loggedout=true

The background color should be brown rather than peach (#7A6955 vs. #F9B49B)

[Alyssa]

@debrascott3491 use !important after the color to override.

[Debra]

Did that! But the one underneath is also using !important.

My code:

<style>
body.login {
    background-color: #7A6955 !important;
}
</style>

The inline one generated underneath it:

<style type="text/css">
        body.login {
           background-color: #f9b49b !important;
        }
        .login form .forgetmenot input[type="checkbox"]:checked + strong:before,
        #login form p.submit input {
            background-color: #f9b49b !important;
        }
        .login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
            color: #f9b49b !important;
        } 
    </style>

See what I mean?

Is there a way to move mine under the other one?

[Alyssa]

@debrascott3491 try this:

add_action('login_head','add_css',99999);
function add_css(){
echo '<style>
body{background:black;}
</style>';
}

NOTE the 99999 is the difference

[Debra]

Still no luck, unfortunately. I tried changed the 999999 to a really huge number and a really small one (0 and 1), but it didn’t effect its position.

Finally I just took it out of the Boss parent theme at: buddyboss-inc\buddyboss-customizer\buddyboss-customizer-loader.php

I didn’t want to copy that file over into the child theme, so I’ll have to find a workaround on theme updates for now.

In future versions, it would be awesome if this color could be set in the settings instead of taking on the panel color automatically. I can see cases where it wouldn’t always automatically match, like in ours. 🙂

Thanks!

[Alyssa]

Sorry about that. I’ll send this to the devs. Thanks for the feedback!

[Christina]

The below added to functions.php works for me to change login background color

function lifestarters_login_css() {?>
<style type=”text/css”>
body.login {
background-color: black !important;
}
</style>

<?php
}
add_action( ‘login_head’, ‘lifestarters_login_css’,99999 );

[Alyssa]

@debrascott3491 perhaps Christina’s code works for you?