Log In and Log out Buttons For Protected Content

I put the login - logout widget on our sidebar and when I previewed it was just a text link to logout. Thats not going to work so I am wondering how to put that into a button with my current theme. There has to be a easy way to do this so we dont have the default text.

The plugin dev really needs to put something else there other than text...lol

Thanks

  • Aicee Taguilaso
    • WordPress Warrior

    Hi there, Jason! :slight_smile:

    Hope you're well today! :slight_smile:

    I can see what you mean in here. Our apologies for this. I'll let the developer know of this concern. In the meantime, you can try using this CSS code to make it look like a button:

    a.login_button {
    	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    	-webkit-appearance: button;
    	background-color: #333;
    	border: 0;
    	color: #fff;
    	cursor: pointer;
    	font-family: "Noto Sans", sans-serif;
    	font-size: 12px;
    	font-size: 1.2rem;
    	font-weight: 700;
    	padding: 0.7917em 1.5em;
    	text-transform: uppercase;
    }
    
    a.login_button:hover {
    	background-color: #707070;
    	background-color: rgba(51, 51, 51, 0.7);
    	outline: 0;
    }

    Just adjust the values to fit your theme colors and just add it to your child theme's style.css (if you have) or using this plugin - Simple Custom CSS.

    Thanks, Jason! :slight_smile:

    Regards,
    Aicee

  • Jason
    • Design Lord, Child of Thor

    I added this to the custom css and it didnt change anything on login or out buttons. Is there any way I can call on the css from one of the themes buttons so it will match the other buttons on the sites style? That might be easier and if so would you share the code required for that one.

  • Aicee Taguilaso
    • WordPress Warrior

    Hi Jason,

    Sure, just grant support access from your Dashboard > WPMU DEV > Support > Support Access. See https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/
    Then, I can be able to take a look on it. :slight_smile:

    Or you can just provide url/link of any published page where I can see some of your buttons. Then, I can just match the colors of those buttons to your logout button. :slight_smile:

    Please respond here once you decided to grant support access, so I'll know.
    Thanks, Jason!! :slight_smile:

    Regards,
    Aicee

  • Jason
    • Design Lord, Child of Thor

    I just granted access for you to go on the site. :slight_smile: there are a few types of buttons we can use here from the theme files or even one VC ultimate add on plugin. Let me know if you need anything else.

  • Aicee Taguilaso
    • WordPress Warrior

    Hey, Jason! :slight_smile:

    You can try using this CSS code:

    a.login_button:hover {
      color: #fff;
      box-shadow: 0 0 0 2px #1b98e0 inset;
      background-color: #1b98e0 !important;
    }
    
    a.login_button {
      box-shadow: 0 0 0 2px #1b98e0 inset;
      color: #1b98e0;
      background-color: transparent !important;
      padding: 8px 28px;
      font-size: 18px;
      line-height: 55px;
      font-family: 'Open Sans';
      font-weight: 700;
      text-transform: uppercase;
      margin: 5px 0;
      border: none;
      border-radius: 5px;
      overflow: hidden;
      -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
      transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
    }

    It will be like this one: http://prntscr.com/6v8vvy
    When hovered: http://prntscr.com/6v8w39

    I matched it with some of your buttons on the homepage.

    Let me know if that works for you! :slight_smile:
    Have a great weekend, Jason!

    Regards,
    Aicee

  • Jason
    • Design Lord, Child of Thor

    Thank you so much :slight_smile: Just have two quick questions... 1. How can I change the width of the button so it can go the width of the sidebar. 2. Is there a way to just add a class name to the button not the code that way it can be changed down the road if needed by just changing the class name.

    Thank you so much :slight_smile:

  • Aicee Taguilaso
    • WordPress Warrior

    Hi Jason! :slight_smile:

    I've adjusted the padding for you to increase the width. I've set it to "padding: 8px 104px;".
    See screenshots:
    http://prntscr.com/6vxdex
    http://prntscr.com/6vxdhm

    I can't find a way to put a custom class name to it. But that class name "a.login_button" is specifically just for this protected content login/logout button. If you want it to be more specific, you can use ".ms-login-form a.login_button" or even include a #page-id before that. :slight_smile:

    Hope this helps!
    Thanks, Jason! :slight_smile:

    Regards,
    Aicee

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.