1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress Login Dropdown Like XF

Discussion in 'Off Topic' started by LPH, Jan 6, 2013.

  1. LPH

    LPH Well-Known Member

    CountRock likes this.
  2. CountRock

    CountRock Member

    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: Mar 22, 2014
  3. CountRock

    CountRock Member

    After some work I now have modified the WP template to include the login. Check this out
    upload_2014-3-22_20-7-16.png

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

    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
     
    xfrocks likes this.
  4. CountRock

    CountRock Member

    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.
     
    geminiusa likes this.
  5. geminiusa

    geminiusa Member

    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.
     
  6. CountRock

    CountRock Member

    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: Mar 31, 2014
    geminiusa likes this.
  7. geminiusa

    geminiusa Member

    Will be very happy to give it a go and help friend. Has to be a css deal for the effects right ? Great work friend.
     
  8. CountRock

    CountRock Member

    Caution, this may break WP styling. I will keep refining this until I get it right :)
     
  9. geminiusa

    geminiusa Member

    You are stubborn like i am. LMAO, gotta admire that.
     
  10. CountRock

    CountRock Member

    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: Apr 3, 2014

Share This Page