New to the community? Start here

Password protect CSS classes global selectors

Hello!

I've been trying to edit and make the password protect area look prettier. I was able to mess around a bit with the entire grouping and center the entire content.

I'm trying to change the button style along with the area where they type in the password but I've been having difficulty finding a global selector to act as a catchall for the password protected area's. (I had no trouble finding a specific instance and changing that, I just don't want to copy that code fore everything)

Thanks for your help.

-Jake

More Password Protect discussions
Password Protect
  • Sajid

    Hi @alex

    Hope you are doing good today :slight_smile:

    If you are using same theme for all sites on network then you can add your CSS code in style.css file by creating a child theme.

    If its different theme then you can use mu-plugin to add custom css in header or footer of your theme.

    For mu-plugin use below code and replace the text that says your style goes here with your own CSS code. 

    add_action('wp_head','hook_css');
function hook_css() {

	$output="<style> Your_Style_Goes_Here </style>";

	echo $output;

}

    Please see below manual to use mu-plugin.
    https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Luís

    Hi @alex,

    if you try to change the styles of this particular button, it's possible that will affect other buttons of your theme (or network themes).

    If doesn't matter, the password protected button use the common selector:

    input[type="submit"]

    But keep in mind, if you want to change the button styles in all network themes, the best solution is using the method that Sajid gives above.

    If you need any further assistance with this, just let us know.

    Cheers, Luís

  • Sajid

    Hi @Jake

    Hope you are doing good today :slight_smile:

    You can find out CSS class and CSS ID of an attribute by inspecting element. In the example below I used chrome to find the CSS class or CSS ID.

    1.right click on the button
    2. go on Inspect element
    3. carefully look at the button, you should see either id="theIdForTheButton" or class="theClassForTheButton" in this example am using the Post button on WPMUDEV text editor.
    4. on the right, look carefully for the class or id name that is given to the button.
    5.since for this example am using the Post button on wpmudev, so i'd go to my theme style sheet and type it like this.

    .darkgrey-button {
  background:red !important;
}

    Or

    #darkgrey-button {
  background:red !important;
}

    NB. if your button had a class make sure you use the first option and if it has an ID use the second option.
    NB. the reason why I have !important is because it allows you to override the previous value of of (if present in default stylesheet. ) color that was given to that button.

    Including CSS classes is also a good idea, we always appreciate the feedback and suggestions from our valuable members. We also have this implemented in our new Upfront framework where you can use preset classes while editing CSS of an element.

    Hope that helps and thanks for being a member :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.