Looking for a floating login/registration plugin

Hi - I have been searching for a plugin that gives a more attractive login functionality. I want to emulate something like that which appears on the http://www.assetmatch.com home page.

Any suggestions?

Regards, Paul

  • Patrick

    Hi there @Paul

    I hope you're having a great day!

    That's actually what is known in the wacky world of WordPress as a sticky sidebar widget.

    However, you can reproduce that exact look by "borrowing" the HTML, CSS & icons used on that example site when viewing the site's source code.

    You can see the same thing working on my test site here:
    http://patrickcohen.net/

    I just grabbed the following HTML for it from that site, and added it to a text widget in a sidebar. Note that if you want the links to open in the same window instead of a new one, simply remove all instances of target=_"blank" in the code:

    <div id="loginRegister">
                <a target="_blank" class="login" href="/login"><span class="icon"></span><span class="text">Login</span>
                </a><a target="_blank" class="reg" href="/register"><span class="icon"></span><span class="text">Register</span>
                    </a><a target="_blank" class="call" href="/contact-us"><span class="icon"></span><span class="text">Call us</span><span style="" class="number">020 7248 2788</span></a>
    </div>

    Then I grabbed the CSS they're using and tweaked it just a bit so it looks identical on a WordPress install. You can add the following CSS to the style-sheet of your active theme/child-theme, or use a handy plugin like this one for all your custom CSS needs:
    https://wordpress.org/plugins/simple-custom-css/

    #loginRegister{
    	position: fixed;
    	top: 50%;
    	right: -2px;
    	margin-top: -114px;
    	z-index: 5;
    }
    
    #loginRegister a{
    	display: block;
    	height: 69px;
    	width: 163px;
    	border-radius: 5px 0 0 5px;
    	border: 1.5px solid #FFFFFF;
    }
    
    #loginRegister a + a{
    	margin-top: 6px;
    }
    
    #loginRegister a .text{
    	color: #FFFFFF;
        float:left;
    	font-family: "Open Sans", sans-serif;
    	font-size: 19px;
    	font-weight: 700;
    	display: block;
    	margin: 19px 0 0 4px;
    }
    
    #loginRegister .login{
    	background: #0e6071;
    }
    
    #loginRegister .reg{
    	background: #6aa745;
    }
    
    #loginRegister .call{
    	background: #10adcf;
    }
    
    #loginRegister a .icon{
    display: block;
    float:left;
    width: 44px;
    height: 36px;
    background-image: url("http://patrickcohen.net/wp-content/uploads/2014/12/loginIcons.png");
    	background-repeat: no-repeat;
    	margin: 16px 0 0 14px;
    }
    
    #loginRegister a.reg .icon{
    background-position: 0 -38px;
    height: 40px;
    }
    
    #loginRegister a.call .icon{
    background-position: 0 -81px;
    }
    
    #loginRegister a .number {
    bottom: 6px;
    color: #ffffff;
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 600;
    left: 54px;
    position: absolute;
    width: 100px;
    }

    Finally, to get the icons working, I uploaded the image they're using to my media library, and inserted the full URL to that image as seen in the CSS above. I've included that image here so you can download it easily.

  • Paul

    Hi again Patrick

    I used the code you provided and it worked great. I edited the graphic to make it my own too - but one small problem that I can't figure out. The two lower boxes (i.e. registration and call) are smaller than the login box. If I inspect element there is a 5px padding at the top of the first box, but there is nowhere in the CSS that I can find a reference to this.

    It is a small and very niggling problem. I just cannot figure out what is causing this padding. It is not on the aseetmatch.com site, so it must be coming from the theme css somewhere. Help please :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.