Style the pop up plugin like upfront

Is there an CSS code I can past into:
http://sendtnorge.no/wp-admin/post.php?post=5801&action=edit
So I can get the button to look like the upfront design
http://screencast.com/t/5NKMCrvFkbm6
Access active until 10:28pm in 5 days

    Adam Czajczyk

    Hello morfjord,

    I hope you're well today and thank you for your question!

    The "Logg inn" button has an ID of "wp-signup" assigned but there are also other ways to address it via CSS. Could you please elaborate a bit on how would you like it to look look like? I think a screenshot of an example button would be very helpful.

    I would then take a look and I'll be happy to help you find the necessary CSS code.

    Best regards,
    Adam

    morfjord

    Thanks, here is an mockup:
    http://screencast.com/t/WfpjV1iJHtP

    Some text I have put in English so you understand.
    The most important is that the "Register" an user and the "login" is an to different buttons.
    And the fields starts to be usable.

    The same design problem is on all the register pages:
    http://sendtnorge.no/account/register/
    http://sendtnorge.no/account/

    All the buttons and field are not usable/visible.

    Adam Czajczyk

    Hello morfjord,

    Thank you for sharing this mockup with me. I checked your site and came up with some CSS code that should help here.

    This CSS would work for "/account" page and form in pop up.

    /* some styling for form - optional */
    .ms-membership-form-wrapper {
    	width:70%;
    	margin:0 auto;
    	background:#EFEFEF;
    	padding:30px;
    	-webkit-border-radius: 10px;
      border-radius: 10px;
    	border: 1px solid #ccc;
    	text-align:center;
    }
    
    /* buttons */
    .ms-membership-form-wrapper a { /* register and lost password */
    	display:inline-block;
    	background:#FFF;
      padding:10px 20px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    	border: 1px solid #ccc;
    	text-align:center;
    	font-weight:bold;
    	margin:10px auto;
    }
    
    .ms-membership-form-wrapper .login-remember label { /* remember login checkbox */
    	line-height:15px;
    }
    
    #wp-submit { /* login */
    	display:inline-block;
    	background:#006DD5;
      padding:15px 30px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    	border: 0;
    	text-align:center;
    	font-weight:bold;
    	color:white;
    }
    #wp-submit:hover {
    	background:#6AB0E9;
    	color:#59337E;
    }

    This part is for the register button on "/register" page:

    /* this is for "Register Deg" button on register page */
    .ms-membership-form-wrapper .ms-bottom-bar {
    	background:none;
    	text-align:center;
    }
    .ms-membership-form-wrapper .ms-bottom-bar button {
    	float:none;
    	display:inline-block;
    	background:#006DD5;
      padding:15px 30px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    	border: 0;
    	text-align:center;
    	font-weight:bold;
    	color:white;
    }
    .ms-membership-form-wrapper .ms-bottom-bar button:hover {
    	background:#6AB0E9;
    	color:#59337E;
    }

    I see that you are using Upfront theme so in order to apply this CSS to your site you may either add it to the "Global Theme CSS" via Upfront editor (preferably at the very end of existing CSS there) or use use a Simple Custom CSS plugin:

    https://wordpress.org/plugins/simple-custom-css/

    I hope that helps!

    Best regards,
    Adam

    Adam Czajczyk

    Hello morfjord!

    I'm very happy you like what I came up with

    As for the Safari issue. I'm not a "Mac guy" and the last Safari version that was released for Windows is extremely outdated (I believe it's 5.x version!) so I'm not quite able to test it. However, I would like you to make sure that if it's related to my CSS or not. Unfortunately, Safari does sometimes process/apply CSS a bit differently than other browsers so it's worth checking.

    To do this please temporarily remove all the code that I provided, clear all caches (on site and in browser; please note that Safari cache can be very persistent!), and check the forms. If they work fine that would mean that the CSS needs some tweaking.

    If the issue occurs without my CSS as well you may re-apply the code and I would ask you to start a separate thread on the form issue on our Support Forum. One of my colleagues would then test it on Mac and I'm sure we would be able to find a solution to that too

    Best regards,
    Adam