WordPress.org

Ready to get started?Download WordPress

Forums

s2Member Framework (Member Roles, Capabilities, Membership, PayPal Members)
[resolved] Registration/Login page logo alignment? (18 posts)

  1. PatriciaFitness
    Member
    Posted 2 months ago #

    [I'm a newbie] :)

    Setting up my registration/login page, I'm having trouble getting my logo to center-align with the reg form (even though I select "center" when choosing the image). It keeps wanting to extend beyond the upper right of the form. It becomes more obvious when I add a background to the page and the white rectangle around the logo image is in it's own little area, lol.

    http://holisticfitnessinstitute.com/wp-login.php?action=register

    Does anybody have any suggestions?

    Thanks!!

    https://wordpress.org/plugins/s2member/

  2. WarrenSports
    Member
    Posted 2 months ago #

    Hi Patricia,

    Your CSS needs adjusting, change :
    .login h1 a {
    margin: 10px 63px;

    to :
    .login h1 a {
    margin: 10px 0px;

    Warren

  3. PatriciaFitness
    Member
    Posted 2 months ago #

    Thanks!

    I've dug through the CSS files of both the S2Member plugin and my main theme, and I can't seem to locate the above code in order to adjust it.

    Do you mind pointing me in the direction of where I might find/edit that particular portion of CSS?

    Thank you again! I really appreciate the help! :)

  4. PatriciaFitness
    Member
    Posted 2 months ago #

    LOL - I just discovered Chrome's "inspect element" feature (well, that's embarrassing - does that mean everybody in the world can see my code and update history?!!)

    Anyway, I found the "10px 63px" note that you mentioned, but I'm not quite sure how to adjust that.

    As a side-question (if you don't mind my asking), with Chrome's helpful features (inspect element, developer's tools, etc.), is my code able to be manipulated by anybody who checks it?

    Thanks again! I'm trying my hardest, but when I get super stuck on something it's really nice that people are willing to help. Hopefully I'll get proficient enough to 'pay it forward' someday! :)

  5. esmi
    Forum Moderator
    Posted 2 months ago #

    does that mean everybody in the world can see my code and update history?!!

    See? Yes
    Change? No

  6. PatriciaFitness
    Member
    Posted 2 months ago #

    Haha thanks! Good to know :)

  7. Michael
    Member
    Posted 2 months ago #

    Do you have an extra plugin installed that changes the login logo?

  8. PatriciaFitness
    Member
    Posted 2 months ago #

    I don't believe so...

  9. Michael
    Member
    Posted 2 months ago #

    It may be the CoachPro theme. I believe it allows for changing the login logo (since I can see Logo-Sample-Small.jpg also loads on this register page).

  10. PatriciaFitness
    Member
    Posted 2 months ago #

    Ya, I originally tried a workaround by putting the "small" logo as a background image in the upper left (matching my homepage, and avoiding the awkwardness of being not-quite-centered), but I found that it did not translate well to mobile version. I'd much rather be able to put the info in the logo area so that it looks clean cross-platform.

    I've emailed Presscoders to see if they can point me to the magic code area in the CSS editor. :)

    Thanks again!

  11. PatriciaFitness
    Member
    Posted 2 months ago #

    When I follow Warren's advice (change the 63 to 0), in Element Inspector, it works! I just don't know where to find that same line of code in my own CSS to make the change permanent. : /

  12. Michael
    Member
    Posted 2 months ago #

    That is likely changed by the theme. PressCoders should be able to give you that advice.

  13. PatriciaFitness
    Member
    Posted 2 months ago #

    ruh roh! : /

    http://holisticfitnessinstitute.com/wp-login.php?action=register

    "Not Acceptable!

    An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security."

  14. Michael
    Member
    Posted 2 months ago #

    That sounds like a webhost issue.

  15. KTS915
    Member
    Posted 2 months ago #

    Can you not simply override this CSS by entering your own?

    If you using a child theme, you should be able to do this in your child theme's style.css file. If you're not using a child theme, then download, install, and activate the Simple Custom CSS plugin.

    In either case, the code you will need to override this CSS is either:

    .login h1 a {
        margin: 10px 0;
    }

    i.e., that given by WarrenSports but with a closing brace or, if that still doesn't work, then this should:

    .login h1 a {
        margin: 10px 0 !important;
    }

    The big advantage of changing the CSS by either of these methods is that it will not get changed back again if you update your theme.

  16. PatriciaFitness
    Member
    Posted 2 months ago #

    Thank you all for your help! I'm still trying to figure this out, lol, this is definitely the longest 'block' I've ever dealt with. It's really silly (I know). I've taken a little break from the issue to work on something else so I can return with a fresh set of eyes.

    I have put the .login h1 etc. into the custom CSS and can't seem to override it, even with "!important" added. I've had a few emails with my theme's support and while they had suggestions, I think it was a little over my head.

    For the time being I think I'll just move fwd with the website as is, and hopefully as I become more proficient with WordPress I'll be able to go back and align my logo.

    If, in the meantime, anyone has a complete work around (such as a plugin suggestion for a login page that is compatible?), I'm definitely open to hear it!

    Thank you!! :)

  17. KTS915
    Member
    Posted 2 months ago #

    OK, I have a couple more suggestions. The first is to try this code instead:

    .login h1 a {
        margin: 10px auto !important;
    }

    The second is to try one of these plugins: Custom Login, which will customize your current login page, or Sideways8 Custom Login and Registration, which will enable you to theme a new custom page that blends with the regular theme of your website.

    Good luck!

  18. PatriciaFitness
    Member
    Posted 2 months ago #

    Yay! I received an update from my theme peeps and it allowed me to save the custom CSS. Logo is centered. All is well.

    Thank you so much for all your help!!

    Patricia :)

Reply

You must log in to post.

About this Plugin

About this Topic