plugin is overiding unrelated css

  • Resolved andrew55

    (@andrew55)


    6 years, 4 months ago

    Although I love this plugin, I did discover that it seems to be overriding the css styling of some of our form fields. These fields are unrelated to Super Socializer.

    For example, you can see the “Username or Email” field in the login form (not signup, but login form) on this page:

    http://healthyhouseclub.com/my-account/

    When I inspect the css of the form field, it appears this css is overiding all styling:

    input#user_login, input#user_pass {
    height: auto!important;
    }

    I’m trying to make the form field 30px height, but the css from Super Socializer overrides any css I attempt to use.

    This Super Socializer css seems to come from /wp-content/plugins/super-socializer/css/front.css

    Even if I user !important; in the css file of my child them, or enter the following css into the “Custom Css” section of Super Socializer, my css is still overridden:

    input#user_login, input#user_pass {
    height: 30px!important;
    }

    Any suggestions on how to prevent Super Socializer from overiding my custom css in this scenario?

    Thanks for any help with this.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Heateor Support

    (@heateor)

    6 years, 4 months ago

    We are glad to know you like the plugin.
    Sorry about that CSS. We included that CSS after noticing many cases of login form input fields deformed with our plugin active.
    Try using following CSS:

    #loginform input#user_login, input#user_pass {
    height: 30px !important;
}

    Replace #loginform with the HTML ID of the login form at your website.

    Thread Starter andrew55

    (@andrew55)

    6 years, 4 months ago

    Thanks for the reply.

    Your css does work at fixing form, but when I replace #loginform with the HTML ID of the login form at my website (as suggested), the css no longer works.

    For example, this doesn’t work:

    #user_login input#user_login, 
input#user_pass {
    height: 30px !important;
}

    Any suggestions on how to get this working properly?

    Plugin Author Heateor Support

    (@heateor)

    6 years, 4 months ago

    The HTML ID of the login form at the webpage is loginform. So, use exactly the following CSS:

    #loginform input#user_login, #loginform input#user_password{
    height: 30px !important;
}
    Thread Starter andrew55

    (@andrew55)

    6 years, 4 months ago

    OK, I see now. Works great. Thanks for the help.

    Plugin Author Heateor Support

    (@heateor)

    6 years, 4 months ago

    You’re welcome

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘plugin is overiding unrelated css’ is closed to new replies.