WordPress Login Dropdown Like XF

This would be extremely cool. However with the lack any response I don't think anyone has does it yet. With the current XF and WP bridges I am sure someone will now come up with something.

Edit: Just checked out the link, interesting. I am currently building a site with WP and XF. Have got the bridge working made by @xfrocks. Hopefully I should be able to do it.

PS: I have only limited coding skills so it will take some time.
 
Last edited:
After some work I now have modified the WP template to include the login. Check this out
upload_2014-3-22_20-7-16.webp


This matches almost perfectly with my XF theme.
upload_2014-3-22_20-8-12.webp


Even the login works perfectly with @xfrocks Wordpress Bridge. On login it redirects me to the Home Page.

The only issue I have apart from php coding which will hide the whole thing when logged in (will do this later) is I cannot get it to Hide and unhide.

Code I added in WP template before the <body> tag
HTML: 
<noscript><style>.JsOnly, .jsOnly { display: none !important; }</style></noscript>
    <link rel="stylesheet" href="community/css.php?css=xenforo,form,public&amp;style=2&amp;dir=LTR&amp;d=1395361109" />
    <link rel="stylesheet" href="community/css.php?css=login_bar&amp;style=2&amp;dir=LTR&amp;d=1395361109" />

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
  
        <script>if (!window.jQuery) { document.write('<scr'+'ipt type="text/javascript" src="community/js/jquery/jquery-1.11.0.min.js"><\/scr'+'ipt>'); }</script>
      
    <script src="community/js/xenforo/xenforo.js?_v=cabf4df7"></script>

Just after the <body> tag added this code

HTML: 
<div id="loginBar">
    <div class="pageWidth">
        <div class="pageContent">  
            <h3 id="loginBarHandle">
                <label for="LoginControl"><a href="community/login/" class="concealed noOutline">Log in or Sign up</a></label>
            </h3>
          
            <span class="helper"></span>

<form action="community/login/login" method="post" class="xenForm " id="login" style="display: block;">
    <div class="ctrlWrapper">
        <dl class="ctrlUnit">
            <dt><label for="LoginControl">Your name or email address:</label></dt>
            <dd><input type="text" name="login" id="LoginControl" class="textCtrl" tabindex="101"></dd>
        </dl>
        <dl class="ctrlUnit">
            <dt>
                <label for="ctrl_password">Do you already have an account?</label>
            </dt>
            <dd>
                <ul>
                    <li><label for="ctrl_not_registered"><input type="radio" name="register" value="1" id="ctrl_not_registered" tabindex="105">
                        No, create an account now.</label></li>
                    <li><label for="ctrl_registered"><input type="radio" name="register" value="0" id="ctrl_registered" tabindex="105" checked="checked" class="Disabler">
                        Yes, my password is:</label></li>
                    <li id="ctrl_registered_Disabler">
                        <input type="password" name="password" class="textCtrl" id="ctrl_password" tabindex="102">
                        <div class="lostPassword"><a href="lost-password/" class="OverlayTrigger OverlayCloser" tabindex="106">Forgot your password?</a></div>
                    </li>
                </ul>
            </dd>
        </dl>
        <dl class="ctrlUnit submitUnit">
            <dt></dt>
            <dd>
                <input type="submit" class="button primary" value="Log in" tabindex="104" data-loginphrase="Log in" data-signupphrase="Sign up">
                <label for="ctrl_remember" class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_remember" tabindex="103"> Stay logged in</label>
            </dd>
        </dl>
    </div>
    <input type="hidden" name="cookie_check" value="1">
    <input type="hidden" name="redirect" value="/">
    <input type="hidden" name="_xfToken" value="">
</form></div></div>
        </div>
    </div>
</div>

With some reading I think the <label for="LoginControl"> is responsible for hiding and displaying the login bar. Is this correct? If so how do I get it to work outside of the XF directory?

I want to change
HTML: 
<div class="_swOuter" style="overflow: hidden;"><div class="_swInner"

style="margin: 0px auto auto;"><form action="community/login/login"

method="post" class="xenForm " id="login" style="display: block;">

<div class="_swOuter" style="overflow: hidden; height: 0px;">

to this on click

HTML: 
<div class="_swInner" style="margin: -187px auto auto;"><form

action="community/login/login" method="post" class="xenForm "

id="login" style="display: block;">

Any ideas?

PS: I am extremely new to XF with basic knowledge of HTML, JS and PHP
 
Can now hide the bar if user is logged in
PHP: 
<?php if ( !is_user_logged_in() ) {  ?>
<div id="loginBar">
    <div class="pageWidth">
        <div class="pageContent">   
            <h3 id="loginBarHandle">
                <label for="LoginControl"><a href="community/login/" class="concealed noOutline">Log in or Sign up</a></label>
            </h3>
           
            <span class="helper"></span>

<form action="community/login/login" method="post" class="xenForm " id="login" style="display: block;">



    <div class="ctrlWrapper">
        <dl class="ctrlUnit">
            <dt><label for="LoginControl">Your name or email address:</label></dt>
            <dd><input type="text" name="login" id="LoginControl" class="textCtrl" tabindex="101"></dd>
        </dl>
   
   
        <dl class="ctrlUnit">
            <dt>
                <label for="ctrl_password">Do you already have an account?</label>
            </dt>
            <dd>
                <ul>
                    <li><label for="ctrl_not_registered"><input type="radio" name="register" value="1" id="ctrl_not_registered" tabindex="105">
                        No, create an account now.</label></li>
                    <li><label for="ctrl_registered"><input type="radio" name="register" value="0" id="ctrl_registered" tabindex="105" checked="checked" class="Disabler">
                        Yes, my password is:</label></li>
                    <li id="ctrl_registered_Disabler">
                        <input type="password" name="password" class="textCtrl" id="ctrl_password" tabindex="102">
                        <div class="lostPassword"><a href="lost-password/" class="OverlayTrigger OverlayCloser" tabindex="106">Forgot your password?</a></div>
                    </li>
                </ul>
            </dd>
        </dl>
   
       
        <dl class="ctrlUnit submitUnit">
            <dt></dt>
            <dd>
                <input type="submit" class="button primary" value="Log in" tabindex="104" data-loginphrase="Log in" data-signupphrase="Sign up">
                <label for="ctrl_remember" class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_remember" tabindex="103"> Stay logged in</label>
            </dd>
        </dl>
    </div>

    <input type="hidden" name="cookie_check" value="1">
    <input type="hidden" name="redirect" value="/">
    <input type="hidden" name="_xfToken" value="">

</form></div></div>

        </div>
    </div>
</div>
<?php } ?>

Trying to figure out the jquery call to actually slide up and down the login bar.
 
Great work friend. I was hoping to be able to do the same thing. Setting up the bridge today and i love the drop down XF has and it would be an excellent add for users.
 
Okay, I got the drop down to work, but I had to use my own script to duplicate the drop down effect. It still does not match 100% but its close. Maybe someone can help me sort it out?

Please note the below scripts assumes the following directory structure.
<root> - WordPress
/community - XenForo
Add the following code under your <head> tag
HTML: 
<link rel="stylesheet" href="community/css.php?css=login_bar&style=2" />
<link rel="stylesheet" href="community/css.php?css=xenforo,form&style=2" />

The style variable will have to match with XF theme. Have requested @xfrocks for feature to get user's current style from XF here

Also had the following JavaScript within your head tag
Code: 
<script>
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});

    $(document).ready(function(){
            var container = $( ".dropdowndiv" );
              // Bind the link to toggle the slide.
            $( "#showdiv" ).click(
                function( event ){
                    // Prevent the default event.
                    event.preventDefault();
                    // Toggle the slide based on its current visibility
                    if (container.is( ":visible" )){
                        // Hide - slide up.
                        container.slideUp("slow");
                    } else {
                        // Show - slide down.
                        container.slideDown("slow","easeOutBounce");
                    }
                }
            );
        });
</script>

The first part defines additional effects for jQuery.
Add this just below your <body> tag.
PHP: 
<?php if ( !is_user_logged_in() ) {  ?>
<div id="loginBar">
    <div class="pageWidth">
        <div class="pageContent">
            <h3 id="loginBarHandle">
                <label for="LoginControl">
                    <a id="showdiv" href="#">Log in or Sign up</a>
                </label>
            </h3>
      
<div class="dropdowndiv" style="overflow: hidden;display:none;">
        <form action="community/login/login" method="post" class="xenForm " id="login" style="display: block;">
            <dl class="ctrlUnit">
            <dt><label for="LoginControl">Your name or email address:</label></dt>
            <dd><input type="text" name="login" id="LoginControl" class="textCtrl" tabindex="101"></dd>
        </dl>
            <dl class="ctrlUnit">
            <dt>
                <label for="ctrl_password">Do you already have an account?</label>
            </dt>
            <dd>
                <ul>
                    <li><label for="ctrl_not_registered"><input type="radio" name="register" value="1" id="ctrl_not_registered" tabindex="105">
                        No, create an account now.</label></li>
                    <li><label for="ctrl_registered"><input type="radio" name="register" value="0" id="ctrl_registered" tabindex="105" checked="checked" class="Disabler">
                        Yes, my password is:</label></li>
                    <li id="ctrl_registered_Disabler">
                        <input type="password" name="password" class="textCtrl" id="ctrl_password" tabindex="102">
                        <div class="lostPassword"><a href="lost-password/" class="OverlayTrigger OverlayCloser" tabindex="106">Forgot your password?</a></div>
                    </li>
                </ul>
            </dd>
        </dl>

        <dl class="ctrlUnit submitUnit">
            <dt></dt>
            <dd>
                <input type="submit" class="button primary" value="Log in" tabindex="104" data-loginphrase="Log in" data-signupphrase="Sign up">
                <label for="ctrl_remember" class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_remember" tabindex="103"> Stay logged in</label>
            </dd>
        </dl>
    </div>

    <input type="hidden" name="cookie_check" value="1">
    <input type="hidden" name="redirect" value="/">
    <input type="hidden" name="_xfToken" value="">

</form></div></div>

        </div>
    </div>
</div>
<?php } ?>

Currently there are 2 bugs I need to sort out.
1) The easeOutBounce effect doesn't 100% match what XF have implemented. Any help here would be nice.
2) Darken the whole page like what happens in XF. Again any suggestions would be welcomed :)
 
Last edited:
I had to make a copy of xenforo.css and remove all unwanted (for loginbar) and also modified to have minimal impact on WP css.

I created a new css called loginbar2.css.
Remove the following line and replace it with your link to this new css.


Code: 
@CHARSET "UTF-8";
html {
    color: #000;
    background: #FFF;
}
body  {
    margin: 0;
    padding: 0;
}
.pageWidth div,.ctrlUnit dl,.pageWidth dt,.pageWidth dd,.pageWidth ul,.pageWidth li,.pageWidth h3,.pageWidth form, input,.textCtrl button,.pageWidth  p{
    margin: 0;
    padding: 0;
}

.ctrlUnit li {
    list-style: none;
}

q:before, q:after {
    content: '';
}

.ctrlUnit label {
    font: 13px/1.231 'Trebuchet MS', Helvetica, Arial, sans-serif;
    *font-size: small;
    *font: x-small;
}
input,.textCtrl button {
    font: 99% arial, helvetica, clean, sans-serif;
}
 
/** Forms **/
.xenForm
{
    margin: 10px auto;
    max-width: 800px;
}

.xenForm .ctrlUnit > dd
{
    width: 68%;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
    padding-right: 30px;
}

.xenForm .ctrlUnit > dd .textCtrl
{
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
    width: 100%;
}

    .xenForm .ctrlUnit > dd .textCtrl[size],
    .xenForm .ctrlUnit > dd .textCtrl.autoSize
    {
        width: auto !important;
        min-width: 0;
    }


/** *********************** **/
/** TEXT INPUTS             **/
/** *********************** **/

.textCtrl
{
    font-size: 13px;
font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #2E2A26;
background-color: rgb(227, 225, 215);
padding: 3px;
margin-bottom: 2px;
border: 1px solid silver;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
outline: 0;

}

/** *********************** **/
/** BUTTONS                 **/
/** *********************** **/

.button
{
    font-style: normal;
 
    font-size: 12px;
font-family: Calibri, \\\'Trebuchet MS\\\', Verdana, Geneva, Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0);
background-color: #EFEDE1;
padding: 0px 6px;
border: 1px solid rgb(221, 221, 235);
border-top-color: rgb(255, 255, 255);
border-bottom-color: rgb(179, 179, 189);
-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
text-align: center;
-webkit-box-shadow: 0px 1px 4px 0px rgb(200,200,210); -moz-box-shadow: 0px 1px 4px 0px rgb(200,200,210); -khtml-box-shadow: 0px 1px 4px 0px rgb(200,200,210); box-shadow: 0px 1px 4px 0px rgb(200,200,210);
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
height: 25px;

}

.button.smallButton
{
    font-size: 11px;
    padding: 0px 4px;
    line-height: 21px;
    height: 21px;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
}

.button.primary
{
    background-color: rgb(199, 197, 186);

}
    .button:hover,
    .button[href]:hover,
    .buttonProxy:hover .button
    {
        color: rgb(227, 225, 215);
text-decoration: none;

        background-color: #B8330D;

    }


/** Control Units **/

.xenForm .ctrlUnit
{
    position: relative;
    margin: 10px auto;
}

/* clearfix */ .xenForm .ctrlUnit { zoom: 1; } .xenForm .ctrlUnit:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; }



/** Control Unit Labels **/

.xenForm .ctrlUnit > dt
{
    padding-top: 4px;
padding-right: 15px;
text-align: right;
vertical-align: top;

    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
    width: 32%;
    float: left;
}

.xenForm .ctrlUnit.fullWidth dt,
.xenForm .ctrlUnit.submitUnit.fullWidth dt
{
    float: none;
    width: auto;
    text-align: left;
    height: auto;
}

.xenForm .ctrlUnit.fullWidth dt
{
    margin-bottom: 2px;
}

    .xenForm .ctrlUnit > dt label
    {
        margin-left: 30px;
    }

    /** Hidden Labels **/

    .xenForm .ctrlUnit.surplusLabel dt label
    {
        display: none;
    }

 
/** Control Holders **/

.xenForm .ctrlUnit > dd
{
    /*todo: kill property */
 
    float: left;
}


/** List items inside controls **/

.ctrlUnit > dd > * > li
{
    margin: 4px 0 8px;
    padding-left: 1px; /* fix a webkit display bug */
}


.ctrlUnit > dd .break
{
    margin-bottom: 0.75em;
    padding-bottom: 0.75em;
}

.ctrlUnit > dd .rule
{
    border-bottom: 1px solid rgb(227, 225, 215);
}

.ctrlUnit > dd .ddText
{
    margin-bottom: 2px;
}

Minify version
HTML: 
html{color:#000;background:#FFF}.ctrlUnit dl,.pageWidth dd,.pageWidth div,.pageWidth dt,.pageWidth form,.pageWidth h3,.pageWidth li,.pageWidth p,.pageWidth ul,.textCtrl button,body,input{margin:0;padding:0}.ctrlUnit li{list-style:none}q:after,q:before{content:''}.ctrlUnit label{font:13px/1.231 'Trebuchet MS',Helvetica,Arial,sans-serif;*font-size:small;*font:x-small}.textCtrl button,input{font:99% arial,helvetica,clean,sans-serif}.xenForm{margin:10px auto;max-width:800px}.xenForm .ctrlUnit>dd{width:68%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding-right:30px}.xenForm .ctrlUnit>dd .textCtrl{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;width:100%}.xenForm .ctrlUnit>dd .textCtrl.autoSize,.xenForm .ctrlUnit>dd .textCtrl[size]{width:auto!important;min-width:0}.textCtrl{font-size:13px;font-family:Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;color:#2E2A26;background-color:#e3e1d7;padding:3px;margin-bottom:2px;border:1px solid silver;-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;outline:0}.button{font-style:normal;font-size:12px;font-family:Calibri,\\\'Trebuchet MS\\\', Verdana, Geneva, Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0);
background-color: #EFEDE1;
padding: 0px 6px;
border: 1px solid rgb(221, 221, 235);
border-top-color: rgb(255, 255, 255);
border-bottom-color: rgb(179, 179, 189);
-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
text-align: center;
-webkit-box-shadow: 0px 1px 4px 0px rgb(200,200,210); -moz-box-shadow: 0px 1px 4px 0px rgb(200,200,210); -khtml-box-shadow: 0px 1px 4px 0px rgb(200,200,210); box-shadow: 0px 1px 4px 0px rgb(200,200,210);
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
height: 25px;
}
.button.smallButton
{
    font-size: 11px;
    padding: 0px 4px;
    line-height: 21px;
    height: 21px;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
}

.button.primary
{    background-color: rgb(199, 197, 186);}
    .button:hover,
    .button[href]:hover,
    .buttonProxy:hover .button
    {
        color: rgb(227, 225, 215);
text-decoration: none;
        background-color: #B8330D; }

.xenForm .ctrlUnit
{
    position: relative;
    margin: 10px auto;
}
.xenForm .ctrlUnit { zoom: 1; } .xenForm .ctrlUnit:after { content: '.';display:block;height:0;clear:both;visibility:hidden}.xenForm .ctrlUnit>dt{padding-top:4px;padding-right:15px;text-align:right;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;width:32%;float:left}.xenForm .ctrlUnit.fullWidth dt,.xenForm .ctrlUnit.submitUnit.fullWidth dt{float:none;width:auto;text-align:left;height:auto}.xenForm .ctrlUnit.fullWidth dt{margin-bottom:2px}.xenForm .ctrlUnit>dt label{margin-left:30px}.xenForm .ctrlUnit.surplusLabel dt label{display:none}.xenForm .ctrlUnit>dd{float:left}.ctrlUnit>dd>*>li{margin:4px 0 8px;padding-left:1px}.ctrlUnit>dd .break{margin-bottom:.75em;padding-bottom:.75em}.ctrlUnit>dd .rule{border-bottom:1px solid #e3e1d7}.ctrlUnit>dd .ddText{margin-bottom:2px}
 
Last edited:

Similar threads

D
  • Question Question
XF 1.4 How can I modify Login Dropdown time and Solve the dropdown Lag?
Replies
6
Views
605
BassMan
BassMan
gavpeds
  • Question Question
XF 1.3 Login dropdown
Replies
2
Views
601
gavpeds
gavpeds
D
  • Suggestion Suggestion
Duplicate Native Wordpress login/profile/avatar just like Simple-Press
Replies
0
Views
880
Deleted member 77670
D
RandallC
  • Question Question
XF 1.2 Need coding help with login dropdown & header bar
Replies
0
Views
684
RandallC
RandallC
beanfan78
  • Question Question
XF 1.2 Chrome Login Dropdown Not Working
Replies
18
Views
3K
yavuz
yavuz
Back
Top Bottom