Change log in color

There are a number of plugins for this

https://www.ads-software.com/plugins/search/login+customize

I’ve used https://www.ads-software.com/plugins/login-customizer/ on a number of sites.

Are you looking for a plugin or how to customize the login screen manually?

If you wish to avoid plugins, have a look at Customizing the Login Form to do your own customizing.

So i red and made this.

functions.php

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/stylized-login.css' );;
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

stylized-login.css

.wp-core-ui .button-primary{
background-color:#e74c3c;
background-image:none;
border-color:#e74c3c;
border-bottom-color:#e74c3c;
color:#fff;
}

.wp-core-ui .button-primary:hover {
background-color:#000;
background-image:none;
border-color:#e74c3c;
color:#000;
}

But…
The old css is also loading so the border and other stuff is still loading from the old .css
How do i turn off the old .css?

You do so by overriding undesirable CSS. There are a couple ways. One is to use the exact same selectors, but ensure your CSS is parsed after the original. In the case of equal selectors, the last parsed takes precedence. This generally means causing your CSS file to be loaded last. This is done by enqueuing stylesheets with wp_enqueue_style(). Specifying other stylesheets as dependencies for the one being enqueued causes them to be loaded first. The recommended way of enqueuing stylesheets (third example) for child themes is an example of this.

There are a couple situations that take even greater precedence than parse order. Style blocks on the page take precedence over external stylesheets. Element style attributes take precedence over all other styles.

The other way is to use a selector that is more specific than the one you want to override. When working with existing HTML, this is not always possible.

Can you check https://csmix.se/
You see log in button has something blue behind it.

I cant overwrite it how to do?

Do you mean the lower image in the “Me” box on hover? A small portion does appear sort of aqua, but it’s an optical illusion, it’s actually light green. The color is part of the roll over image at i.imgur.com/6gd2URA.png. The image should be edited if that’s what you are referring to.

If it is not what you are referring to, please provide more specific information.

See the image.

View post on imgur.com

The red is stylized-login.css in theme folder.
It looks like this.

.wp-core-ui .button-primary{
background-color:#e74c3c;
background-image:none;
border-color:#e74c3c;
border-bottom-color:#e74c3c;
color:#fff;
}

.wp-core-ui .button-primary:hover {
background-color:#ff1800;
background-image:none;
border-color:#e74c3c;
color:#fff;
}

a {
color:#AEAEAE;
text-decoration:none;
}

a:hover {
color:#e74c3c;
text-decoration:none;
}

But wordpress still loads the old .css i dont know which one.
That .css has basicly same code but with blue colors.
I want to remove that.

How to?

Ah, I see now. I ended up on the wrong page entirely.

Yes, WP still loads its own CSS, you wouldn’t generally wish to restyle the entire page to change button color! I mentioned that you need a more specific selector for your override to take precedence. I didn’t get into full detail what that entails. One of the CSS specificity rules is ID attributes are more specific than classes because a class can be utilized any number of times on a page. An ID can only be used once. Use the button’s ID to override the default CSS.

input#wp-submit {
   background-color: #e74c3c;
   border-color: #e74c3c;
}