A5 custom login page – Text Alignment

Hi Andreas,

#login {padding: 0} will do the trick.

Put that to your custom CSS for the login page and you’ll see the space above the message disappear.

If you then want to style the message itself, you’ll want to put something like:

#login p {...} or p.message {...}

Best,
Stefan

Hi Stefan,

Your trick was working, thanks, but….

The messages after logout or failure and the link to get new passwort are still sticked at the left side, no idea how to align with the input fields.

The LOGIN-button should be also aligned (which it is) and have some distance from the password input field (where the button covers currently the shadow of the field, which is not nice).

Thanks in advance for your prompt reply.

Kind regards,
Andreas

Hi Stefan,

I need to know the different element names to solve the problem (custom CSS works well):

#login {padding: 0} —> removes the empty space above a message, done
#login p {padding: 15px} —> moves all elements to the desired position, done

But: The LOGIN-button remains at the left side. If I change the padding in the backend using the field LOGIN FORMULAR – PADDING it is affecting the button, the credential fields and the text of it. Why login# p {…} do not move also the button, but the parameter setting in the plugin does?

Please help!

Kind regards,
Andreas

Hi Andreas,

your questions are not easy to answer. You want to have the most complicated case. ??

It’s always more difficult to work in a login page with the theme’s header, since the styles of the theme are there plus the wp-login and the A5-login.

Depending on what theme you have or how you have configured the plugin’s CSS, you’ll have styles in the html document which might be declared later than the style sheets are imported and thus overwrite everything which is not marked as !important.

In your case that means the following order:

1. Custom Login inline styles
2. Core stylesheets (dashicons, buttons, forms, l10n, login)
3. Google stuff
4. Custom Login Widget inline styles
5. Other inline stuff
6. Plugin and theme stylesheets
7. Theme inline styles
8. More theme stylesheets
9. Inline style for the Bibletext

That’s a lot of chances to override your inline styles from the beginning.

Things to do are to either further define the CSS for the button in the plugin’s settings or go to the custom CSS section of your theme and enter some styles there.

And be very specific. Otherwise, you won’t affect that darned button. If you look at the source code, you’ll see that it has the id wp-submit inside the p element with the class submit.

Address it with .submit #wp-submit. If it doesn’t help, write an ‘!important’. That should do the trick.

Hi Stefan,

Thank you for taking time to explain me. As a PLC programer I agree when have to change an existing program to figure out what the previous author have had in mind with his code….

I wrote to the custom css following lines:

#login {padding: 0}
#login p {padding: 15px}
.submit {padding: 15px !important}

The only last thing is that error messages (i.e. wrong credentials) are still at the left side shown. I tried p.message, but won′t work. There must exsist a different p-element!?

You are invited to see the result at

seckmauern.com/wp-login.php

and if ypu like to use it as a reference for advertising.

Kind regards,
Andreas

The error message is in a div with id “login_error”.

You can use the firebug extension in firefox to get easy access to all these things, if you ever have to do a similar job again.

Firebug saved me tons of time over the years. ??

All the best,
Stefan

Dear Stefan,

I have solved my “problem”. Thanks to your precise advise I was able to understand and to fix it.

Following lines I put finally in the custom css:

#login {padding: 0}
#login p {padding: 15px}
#login_error {padding: 15px}
.submit {padding: 15px !important}
#wp-submit {box-shadow: 10px 10px 5px rgb(113,119,118)}

Kind regards,
Andreas

PS: Firebug works great!

Sorry for answering that late, but good to read that you solved the problem.

And firebug IS a good tool, in deed. ??

As mentioned, it saved me some hours over the years.

All the best,
Stefan