Changing width of logo, bringing it down, and changing hover link colour

Hey Sam,

Sorry for the late reply.

You can always tweak the css by editing the plugin file itself. But note, the changes you make will disappear on next plugin update. So make sure to take a backup.

To change the logo size:

Open WordPress Dashboard, Goto Plugin-> Editor and select “Erident Custom Login and Dashboard”
Search body.login div#login h1 a
Add width and height inside that div as shown below.

body.login div#login h1 a {
background-image: url(<?php echo $er_logo ?>);
padding-bottom: 30px;
margin: 0 auto;
width: 400px; // Change the value to yours
height: 150px; // Change the value to yours
}

To change the hover color, add the below code:

body.login #nav a:hover, body.login #backtoblog a:hover {
color: #fff !important; //Change the color code to yours
}

In the next version I will add both these options.

I don’t want to use a logo so left that field blank. However. now I have an empty space on the page where the logo should be. The login screen needs to come up on the page. I have tried to find the CSS but no luck yet. If you can help me I would sincerely appreciate it! Cheers.

Its really easy. Did you able to find the above piece of code I posted?

body.login div#login h1 a {
background-image: url(<?php echo $er_logo ?>);
padding-bottom: 30px; // Change the value to 0
margin: 0 auto;
width: 400px;
height: 150px; // Change the value to 0
}

Change the height and padding-bottom attribute to zero.
Thats it.

Thanks. But I tried that and it did not work. I even set the padding to a negative number but the login box reaches a certain point and will not move further up the page. This occurs with other similar plugins as well.

It seems to be something inherent in the WordPress code.

Can you post your login page url?

Sure. I am using another plugin at the moment, however all plugins are effected. https://www.bitcoinranger.com/wp-login.php?action=register

Okay. You need to remove the padding applied to the #login.

The following code will remove the padding.

body.login #login {
padding: 0 !important;
}

But you need to activate my plugin and add the above code. Open WordPress Dashboard, Goto Plugin-> Editor and select “Erident Custom Login and Dashboard”
Search <style> tag and add the above code inside it. This will work.

Thank you very much. I will do as you instructed. You have been so helpful and I appreciate your assistance. Cheers.

If my plugin seems helpful to you, please give a 5 star rating. https://www.ads-software.com/support/view/plugin-reviews/erident-custom-login-and-dashboard

Thank You.

Hi, Libin! I try add to logo div width and height my png logo? but logo is displayed not correctly, logo cropped. You can see that on my test blog.

Hey Kingstakh,

To change the wordpress logo width or height, you need to add/change two values.
Open WordPress Dashboard, Goto Plugin-> Editor and select “Erident Custom Login and Dashboard”
Search body.login div#login h1 a

body.login div#login h1 a {
background-image: url(<?php echo $er_logo ?>);
padding-bottom: 30px;
margin: 0 auto;
width: 400px;
height: 150px; // Change the value to your logo height
background-size: 274px 63px; // Add this line and Change 63px to your logo height
}

And Update the file. Hope this will help.

Thanx, Libin for response and great plugin. Help adding only ‘background-size’ without ‘width’ and ‘height’. Now my logo look Great. Thank you!

body.login div#login h1 a {
background-image: url(<?php echo $er_logo ?>);
padding-bottom: 80px; // Set padding for best logo look
margin: 0 auto;
background-size: 150px 150px; // Add this line and Change 63px to your logo height
}

PERFECT !!! Make sure to backup your changes because in the next plugin update this will be overwrite. So backup, then update and restore the changed portion only to get the full plugin features.

GREAT NEWS guys!!!

The new version(ver:2.0.0) included “Logo height” and “width” option. Enjoy.

Hi. I have a challenge. I want to be able to change the color of my logo. The logo goes on t-shirts and I want customers to pick the color logo they want. So if they want red or green or blue they configure it themselves.

Here is a sample on https://www.nike.com of what I need. There the customers change the Nike logo on the sneaker.

Thanks,
Tyler