How to style the default Login / Account button

This guide is part of our Admin FAQ series.

  1. There is a default Login / Account button enabled when you install MemberSpace:This will output a black Login / Account button in the bottom right corner of every page on your website to make it easy for members to login or view their account.

    If you want to remove this button, please read these quick instructions.

    However, if you simply want to style the button differently or move it to a different corner of the screen, please read the steps below.
  2. In your website editor (Wordpress, Squarespace, Webflow, etc) find the area where you can output custom CSS.
  3. In the custom CSS area, if you want to move the button to the bottom left corner of your site, add this code:

    @media only screen and (min-width: 768px) {
    #__memberspace_memberlogin_button {
    width: initial;
    right: initial;
    left: 0;}}
    @media only screen and (min-width: 768px) {
    #__memberspace_memberlogin_button a {
    width: auto;
    border: none;
    border-top: 2px solid #fff;
    border-left: none;
    border-right: 2px solid #fff;
    border-radius: 0 4px 0 0;}}
  4. In the custom CSS area, if you want to move the button to the top right corner of your site, add this code:

    @media only screen and (min-width: 768px) {
    #__memberspace_memberlogin_button {
    top:0;
    width: initial;
    right: 0;
    left: initial;
    height: 42px;}}
    @media only screen and (min-width: 768px) {
    #__memberspace_memberlogin_button a {
    width: auto;
    border: none;
    border-top: 2px solid #fff;
    border-left: none;
    border-right: 2px solid #fff;
    border-radius: 0 4px 0 0;}}
  5. In the custom CSS area, if you want to change the button's background color, add this code:

    #__memberspace_memberlogin_button a {background-color: ADD COLOR OR HEX CODE HERE;}
  6. In the custom CSS area, if you want to change the button's border color, add this code:

    #__memberspace_memberlogin_button a {border-color: ADD COLOR OR HEX CODE HERE;}
  7. Make sure you save/publish all changes in your website editor.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.