Cách sửa lỗi khung đăng nhập bị vỡ chữ khi nâng cấp xenforo

[PVS]

Cách sửa lỗi khung đăng nhập bị vỡ chữ khi nâng cấp xenforo
Thay toàn bộ template login_bar bằng đoạn code sau:

<xen:require css="login_bar.css" />

<div id="loginBar">
    <div class="pageWidth">
        <div class="pageContent">  
            <h3 id="loginBarHandle">
                <label for="LoginControl"><a href="{xen:link login}" class="concealed noOutline">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
            </h3>
          
            <span class="helper"></span>

            <xen:edithint template="login_bar_form" />
        </div>
    </div>
</div>

Thay toàn bộ template login_bar.css bằng đoạn code sau:

/** Login bar basics **/

#loginBar
{
    @property "loginBar";
    color: @primaryLighter;
    background-color: @primaryDarker;
    border-bottom: 1px solid @primaryLightish;
    position: relative;
    z-index: 1;
    @property "/loginBar";
}

    #loginBar .ctrlWrapper
    {
        margin: 0 10px;
    }

    #loginBar .pageContent
    {
        padding-top: @loginBarCollapsedHeight;
        position: relative;
        _height: 0px;
    }

    #loginBar a
    {
        @property "loginBarLink";
        color: @primaryLight;
        @property "/loginBarLink";
    }

    #loginBar form
    {
        @property "loginBarForm";
        padding: 5px 0;
        margin: 0 auto;
        display: none;
        line-height: 20px;
        position: relative;
        @property "/loginBarForm";
    }
  
        #loginBar .xenForm .ctrlUnit,      
        #loginBar .xenForm .ctrlUnit > dt label
        {
            margin: 0;
            border: none;
        }
  
        #loginBar .xenForm .ctrlUnit > dd
        {
            position: relative;
        }
  
    #loginBar .lostPassword,
    #loginBar .lostPasswordLogin
    {
        font-size: 11px;
    }
  
    #loginBar .rememberPassword
    {
        font-size: 11px;
    }

    #loginBar .textCtrl
    {
        @property "loginBarTextCtrl";
        color: @primaryLightest;
        background-color: @primaryDark;
        border-color: @primaryLightish;
        @property "/loginBarTextCtrl";
    }
  
    #loginBar .textCtrl[type=text]
    {
        @property "loginBarUsername";
        font-weight: bold;
        font-size: 18px;
        @property "/loginBarUsername";
    }

    #loginBar .textCtrl:-webkit-autofill /* http://code.google.com/p/chromium/issues/detail?id=1334#c35 */
    {
        background: @loginBarTextCtrl.background-color !important;
        color: @loginBarTextCtrl.color;
    }

    #loginBar .textCtrl:focus
    {
        @property "loginBarTextCtrlFocus";
        background: black none;
        @property "/loginBarTextCtrlFocus";
    }
  
    #loginBar input.textCtrl.disabled
    {
        @property "loginBarTextCtrlDisabled";
        color: @primaryLighter;
        background-color: @primaryDarker;
        border-style: dashed;
        @property "/loginBarTextCtrlDisabled";
    }
  
    #loginBar .button
    {
        min-width: @loginButtonWidth;
        *width: @loginButtonWidth;
    }
  
        #loginBar .button.primary
        {
            font-weight: bold;
        }
      
/** changes when eAuth is present **/

#loginBar form.eAuth
{
    -x-max-width: {xen:calc '500 + @eAuthButtonWidth + 20'}px; /* normal width + 170px */
}

    #loginBar form.eAuth .ctrlWrapper
    {
        border-right: 1px dotted @primaryMedium;
        margin-right: {xen:calc '@eAuthButtonWidth + 20'}px;
        box-sizing: border-box;
    }

    #loginBar form.eAuth #eAuthUnit
    {
        position: absolute;
        top: 0px;
        right: 10px;
    }

        #eAuthUnit li
        {
            margin-top: 10px;
        }
  
            #eAuthUnit li a
            {
                width: @eAuthButtonWidth;
                box-sizing: border-box;
            }
  
/** handle **/

#loginBar #loginBarHandle
{
    @property "loginBarHandle";
    font-size: 11px;
    color: @primaryLightest;
    background-color: @primaryDarker;
    padding: 0 10px;
    margin-right: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    right: 0px;
    bottom: -20px;
    text-align: center;
    z-index: 1;
    line-height: 20px;
    box-shadow: 0px 2px 5px @primaryDarker;
    @property "/loginBarHandle";
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
    .Responsive #loginBar form.eAuth .ctrlWrapper
    {
        border-right: none;
        margin-right: 10px;
    }

    .Responsive #loginBar form.eAuth #eAuthUnit
    {
        position: static;
        width: @eAuthButtonWidth;
        margin: 0 auto 10px;
    }
}
</xen:if>

Thay toàn bộ template login_bar_form bằng đoạn code sau:

<xen:comment>
With Javascript enabled, this form will be moved at page init time,
with the command $('#login').appendTo('#loginBar .pageContent');

Note that all external auth checks need to be added to the conditional below
in order to set $eAuth = 1 if any external auth providers are available.
</xen:comment>

<xen:hook name="login_bar_eauth_set">
<xen:if is="{$xenOptions.facebookAppId}"><xen:set var="$eAuth">1</xen:set></xen:if>
</xen:hook>

<form action="{xen:link 'login/login'}" method="post" class="xenForm {xen:if $eAuth, 'eAuth'}" id="login" style="display:none">

    <xen:if hascontent="true">
        <ul id="eAuthUnit">
            <xen:contentcheck>
                <xen:hook name="login_bar_eauth_items">
                <xen:if is="{$xenOptions.facebookAppId}">
                    <xen:require css="facebook.css" />
                    <li><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin" tabindex="110"><span>{xen:phrase login_with_facebook}</span></a></li>
                </xen:if>
                </xen:hook>
            </xen:contentcheck>
        </ul>
    </xen:if>

    <div class="ctrlWrapper">
        <dl class="ctrlUnit">
            <dt><label for="LoginControl">{xen:phrase your_name_or_email_address}:</label></dt>
            <dd><input type="text" name="login" id="LoginControl" class="textCtrl" tabindex="101" /></dd>
        </dl>
  
    <xen:if is="{$xenOptions.registrationSetup.enabled}">
        <dl class="ctrlUnit">
            <dt>
                <label for="ctrl_password">{xen:phrase do_you_already_have_account}</label>
            </dt>
            <dd>
                <ul>
                    <li><label for="ctrl_not_registered"><input type="radio" name="register" value="1" id="ctrl_not_registered" tabindex="105" />
                        {xen:phrase no_create_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" />
                        {xen:phrase 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="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="106">{xen:phrase forgot_your_password}</a></div>
                    </li>
                </ul>
            </dd>
        </dl>
    <xen:else />
        <dl class="ctrlUnit">
            <dt>
                <label for="ctrl_password">{xen:phrase password}:</label>
            </dt>
            <dd>
                <input type="password" name="password" class="textCtrl" id="ctrl_password" tabindex="102" />
                <div class="lostPasswordLogin"><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="106">{xen:phrase forgot_your_password}</a></div>
            </dd>
        </dl>
    </xen:if>
      
        <dl class="ctrlUnit submitUnit">
            <dt></dt>
            <dd>
                <input type="submit" class="button primary" value="{xen:phrase log_in}" tabindex="104" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" />
                <label for="ctrl_remember" class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_remember" tabindex="103" /> {xen:phrase stay_logged_in}</label>
            </dd>
        </dl>
    </div>

    <input type="hidden" name="cookie_check" value="1" />
    <input type="hidden" name="redirect" value="{$requestPaths.requestUri}" />
    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />

</form>

Thay toàn bộ template form.css bằng đoạn code sau:

/** Forms **/

.xenForm
{
    margin: 10px auto;
    max-width: @formWidth;
}

    .xenOverlay .xenForm
    {
        max-width: @overlayFormWidth;
    }

.xenForm .ctrlUnit > dd
{
    width: @ctrlUnitValueWidth;
    box-sizing: border-box;
    padding-right: @ctrlUnitEdgeSpacer;
}

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

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

    .xenForm .ctrlUnit > dd .textCtrl.number
    {
        width: 150px;
    }


.xenForm > .sectionHeader:first-child,
.xenForm > fieldset > .sectionHeader:first-child
{
    margin-top: 0;
}

/** Sections **/

.xenForm fieldset,
.xenForm .formGroup
{
    border-top: 1px solid @primaryLighterStill;
    margin: 20px auto;
}

.xenForm > fieldset:first-child,
.xenForm > .formGroup:first-child
{
    border-top: none;
    margin: auto;
}

.xenForm .PreviewContainer + fieldset,
.xenForm .PreviewContainer + .formGroup
{
    border-top: none;
}

.xenForm fieldset + .ctrlUnit,
.xenForm .formGroup + .ctrlUnit,
.xenForm .submitUnit
{
    border-top: 1px solid @primaryLighterStill;
}

.xenForm fieldset + .ctrlUnit,
.xenForm .formGroup + .ctrlUnit
{
    padding-top: 10px;
}

.xenForm .primaryContent + .submitUnit,
.xenForm .secondaryContent + .submitUnit
{
    margin-top: 0;
    border-top: none;
}

.xenForm .ctrlUnit.submitUnit dd
{  
    line-height: 31px;
    padding-top: 0;
}

    .ctrlUnit.submitUnit dd .explain,
    .ctrlUnit.submitUnit dd .text,
    .ctrlUnit.submitUnit dd label
    {
        line-height: 1.28;
    }

/* now undo that */

.xenOverlay .ctrlUnit.submitUnit dd,
.Menu .ctrlUnit.submitUnit dd,
#QuickSearch .ctrlUnit.submitUnit dd
{
    border: none;
    background: none;
}

.xenForm .ctrlUnit
{
    @property "ctrlUnit";

    @property "/ctrlUnit";
}

    /** Sections Immediately Following Headers **/

    .xenForm .sectionHeader + fieldset,
    .xenForm .heading + fieldset,
    .xenForm .subHeading + fieldset,
    .xenForm .sectionHeader + .formGroup,
    .xenForm .heading + .formGroup,
    .xenForm .subHeading + .formGroup
    {
        border-top: none;
        margin-top: 0;
    }


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

.textCtrl
{
    @property "textCtrl";
    font-size: 13px;
    font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: @textCtrlText;
    background-color: @textCtrlBackground;
    padding: 3px;
    margin-bottom: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: 0;
    @property "/textCtrl";
}

select.textCtrl
{
    word-wrap: normal;
    -webkit-appearance: menulist;
}

select[multiple].textCtrl,
select[size].textCtrl
{
    -webkit-appearance: listbox;
}

select[size="0"].textCtrl,
select[size="1"].textCtrl
{
    -webkit-appearance: menulist;
}

textarea.textCtrl
{
    word-wrap: break-word;
}

    .textCtrl:focus,
    .textCtrl.Focus
    {
        @property "textCtrlFocus";
        background-color: @textCtrlBackground;
        border: 1px solid #bbb;
        box-shadow: inset rgba(0,0,0,0.1) 0px 1px 4px;
        @property "/textCtrlFocus";
    }  

    textarea.textCtrl:focus
    {
        @property "textCtrlTextareaFocus";

        @property "/textCtrlTextareaFocus";
    }

    input.textCtrl.disabled,
    textarea.textCtrl.disabled,
    .disabled .textCtrl
    {
        @property "textCtrlDisabled";
        font-style: italic;
        color: rgb(100,100,100);
        background-color: rgb(245,245,245);
        @property "/textCtrlDisabled";
    }
  
    .textCtrl.prompt
    {
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }
  
    .textCtrl:-moz-placeholder
    {
        /* needs to be in its own rule due to weird selector */
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }
  
    .textCtrl::-moz-placeholder
    {
        /* needs to be in its own rule due to weird selector */
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }

    .textCtrl::-webkit-input-placeholder
    {
        /* needs to be in its own rule due to weird selector */
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }
  
    .textCtrl:-ms-input-placeholder
    {
        /* needs to be in its own rule due to weird selector */
        @property "formElementPrompt";
        font-style: italic;
        color: rgb(160,160,160);
        @property "/formElementPrompt";
    }
  
    .textCtrl.autoSize
    {
        width: auto !important;
    }

    .textCtrl.number,
    .textCtrl.number input
    {
        text-align: right;
        width: 150px;
    }
  
    .textCtrl.fillSpace
    {
        width: 100%;
        box-sizing: border-box;
        _width: 95%;
    }

    .textCtrl.code,
    .textCtrl.code input
    {
        @property "textCtrlCode";
        font-family: Consolas, "Courier New", Courier, monospace;
        white-space: pre;
        word-wrap: normal;
        direction: ltr;
        @property "/textCtrlCode";
    }
  
    input.textCtrl[type="password"]
    {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    input[type="email"],
    input[type="url"]
    {
        direction: ltr;
    }

    .textCtrl.titleCtrl,
    .textCtrl.titleCtrl input
    {
        font-size: 18pt;
    }

textarea.textCtrl.Elastic
{
    /* use for jQuery.elastic */
    max-height: 300px;
}

/* for use with wrapped inputs */
.textCtrlWrap
{
    display: inline-block;
}

.textCtrlWrap input.textCtrl
{
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.textCtrlWrap.blockInput input.textCtrl
{
    border-top: @textCtrl.border-top-width @textCtrl.border-top-style @textCtrl.border-top-color !important;
    margin-top: 4px !important;
}

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

.button
{
    font-style: normal;
  
    @property "button";
    font-size: 12px;
    font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #fff;
    background: #0073A8 url('@imagePath/xenforo/gradients/highlight_faint.png') repeat-x top;
    padding: 0px 6px;
    border: 1px solid #005881;
    border-radius: 3px;
    text-align: center;
    box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
    text-shadow: #2b2b2b 0px -1px 0px;
    outline: none;
    line-height: 26px;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    height: 26px;
    @property "/button";
}

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


input.button.disabled,
a.button.disabled,
input.button.primary.disabled,
a.button.primary.disabled
{
    @property "buttonDisabled";
    color: #999;
    background-color: #EEE;
    border-color: #CCC;
    box-shadow: 0 0 0 transparent;
    @property "/buttonDisabled";
}

    .button::-moz-focus-inner
    {
        border: none;
    }

    a.button
    {
        display: inline-block;
        color: @button.color;
    }

    .button:hover,
    .button[href]:hover,
    .buttonProxy:hover .button
    {
        @property "buttonHover";
        color: #fff;
        text-decoration: none;
        background-color: #0073A8;
        @property "/buttonHover";
    }

    .button:focus
    {
        @property "buttonFocus";
        /*border-color: @primaryLight;*/
        @property "/buttonFocus";
    }

    .button:active,
    .button.ToggleButton.checked,
    .buttonProxy:active .button
    {
        @property "buttonActive";
        color: #fff;
        background-color: #222;
        outline: 0;
        @property "/buttonActive";
    }

    .button.ToggleButton
    {
        cursor: default;
        width: auto;
        color: @button.border-bottom-color;
    }
  
    .button.ToggleButton.checked
    {
        background-color: rgb(255,150,50);
    }

    .button.inputSupplementary
    {
        width: 25px;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .button.inputSupplementary.add
    {
        color: green;
    }

    .button.inputSupplementary.delete
    {
        color: red;
    }

    .submitUnit .button
    {
        min-width: 100px;
        *min-width: 0;
    }

















/** Control Units **/

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

{xen:helper clearfix, '.xenForm .ctrlUnit'}

.xenForm .ctrlUnit.fullWidth
{
    overflow: visible;
}

/** Control Unit Labels **/

.xenForm .ctrlUnit > dt
{
    @property "ctrlUnitLabel";
    padding-top: 4px;
    padding-right: 15px;
    text-align: right;
    vertical-align: top;
    @property "/ctrlUnitLabel";
    box-sizing: border-box;
    width: @ctrlUnitLabelWidth;
    float: left;
}

/* special long-text label */
.xenForm .ctrlUnit > dt.explain
{
    font-size: 11px;
    text-align: justify;
}


.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: @ctrlUnitEdgeSpacer;
    }

    /** Hidden Labels **/

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

    /** Section Links **/

    .ctrlUnit.sectionLink dt
    {
        text-align: left;
        font-size: 11px;
    }

        .ctrlUnit.sectionLink dt a
        {
            margin-left: {xen:calc '10 + 1'}px; /*TODO: sectionHeader padding + border*/
        }      

    /** Hints **/

    .ctrlUnit > dt dfn
    {
        @property "ctrlUnitLabelHint";
        font-style: italic;
        font-size: 10px;
        color: @mutedTextColor;
        margin-left: @ctrlUnitEdgeSpacer;
        display: block;
        @property "/ctrlUnitLabelHint";
    }
  
    .ctrlUnit.fullWidth dt dfn
    {
        display: inline;
        margin: 0;
    }
  
        .ctrlUnit > dt dfn b,
        .ctrlUnit > dt dfn strong
        {
            color: @dimmedTextColor;
        }

    /** Inline Errors **/

    .ctrlUnit > dt .error
    {
        @property "ctrlUnitLabelError";
        font-size: 10px;
        color: red;
        display: block;
        @property "/ctrlUnitLabelError";
    }
  
    .ctrlUnit > dt dfn,
    .ctrlUnit > dt .error,
    .ctrlUnit > dt a
    {
        font-weight: normal;
    }

.xenForm .ctrlUnit.submitUnit dt
{
    height: 19px;
    display: block;
}

    .ctrlUnit.submitUnit dt.InProgress
    {
        background: transparent url('@imagePath/xenforo/widgets/ajaxload.info_B4B4DC_facebook.gif') no-repeat center center;
    }

/** Control Holders **/

.xenForm .ctrlUnit > dd
{
    /*todo: kill property */
    @property "ctrlUnitCtrl";

    @property "/ctrlUnitCtrl";
    float: left;
}

.xenForm .ctrlUnit.fullWidth > dd
{
    float: none;
    width: auto;
    padding-left: @ctrlUnitEdgeSpacer;
}

/** Explanatory paragraph **/

.ctrlUnit > dd .explain
{
    @property "ctrlUnitCtrlExplain";
    font-size: 11px;
    color: @mutedTextColor;
    margin-top: 2px;
    @property "/ctrlUnitCtrlExplain";
    /*TODO:max-width: auto;*/
}
  
    .ctrlUnit > dd .explain b,
    .ctrlUnit > dd .explain strong
    {
        color: @dimmedTextColor;
    }

/** List items inside controls **/

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

.ctrlUnit > dd > * > li:first-child > .textCtrl:first-child
{
    margin-top: -3px;
}

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

.ctrlUnit > dd .rule
{
    border-bottom: 1px solid @primaryLighterStill;
}

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

/** Hints underneath checkbox / radio controls **/

.ctrlUnit > dd > * > li .hint
{
    font-size: 11px;
    color: @mutedTextColor;
    margin-left: @formCtrlIndent;
    margin-top: 2px;
}

/** DISABLERS **/

.ctrlUnit > dd > * > li > ul,
.ctrlUnit .indented
{
    margin-left: @formCtrlIndent;
}

.ctrlUnit > dd > * > li > ul > li:first-child
{
    margin-top: 6px;
}

.ctrlUnit > dd .disablerList > li,
.ctrlUnit > dd .checkboxColumns > li,
.ctrlUnit > dd .choiceList > li
{
    margin-top: 6px;
}
  
/** Other stuff... **/

.ctrlUnit > dd .helpLink
{
    font-size: 10px;
}

.ctrlUnit.textValue dt
{
    padding-top: 0px;
}

.button.spinBoxButton
{
    font-family: @body.font-family;
    font-size: 11pt;
}

.unitPairsJustified li
{
    overflow: hidden;
}

    .unitPairsJustified li .label
    {
        float: left;
    }
  
    .unitPairsJustified li .value
    {
        float: right;
    }

<xen:include template="form_date_picker.css" />
<xen:include template="form_auto_complete.css" />

/** status editor **/

.statusEditorCounter
{
    color: green;
}

.statusEditorCounter.warning
{
    color: orange;
    font-weight: bold;
}

.statusEditorCounter.error
{
    color: red;
    font-weight: bold;
}

.explain .statusHeader
{
    display: inline;
}

.explain .CurrentStatus
{
    color: @contentText;
    font-style: italic;
    padding-left: 5px;
}

/* BB code-based editor styling */

.xenForm .ctrlUnit.fullWidth dd .bbCodeEditorContainer textarea
{
    margin-left: 0;
    min-height: 200px;
}

.bbCodeEditorContainer a
{
    font-size: 11px;
}

/*
* Fix silly top padding. This may require additional tags in the padding-top selector.
*/

.xenForm .ctrlUnit > dd
{
    padding-top: 4px;
}

    .xenForm .ctrlUnit.fullWidth > dd
    {
        padding-top: 0;
    }

.xenForm .ctrlUnit > dd > input,
.xenForm .ctrlUnit > dd > select,
.xenForm .ctrlUnit > dd > textarea,
.xenForm .ctrlUnit > dd > ul
{
    margin-top: -4px;
}

    .xenForm .ctrlUnit.fullWidth > dd > input,
    .xenForm .ctrlUnit.submitUnit > dd > input,
    .xenForm .ctrlUnit.fullWidth > dd > select,
    .xenForm .ctrlUnit.submitUnit > dd > select,
    .xenForm .ctrlUnit.fullWidth > dd > textarea,
    .xenForm .ctrlUnit.submitUnit > dd > textarea,
    .xenForm .ctrlUnit.fullWidth > dd > ul,
    .xenForm .ctrlUnit.submitUnit > dd > ul
    {
        margin-top: 0;
    }
  
/*
* Multi-column checkboxes
*/
.xenForm .checkboxColumns > dd > ul,
ul.checkboxColumns
{
    column-count: 2;
    column-gap: 8px;
}

    .xenForm .checkboxColumns > dd > ul li,
    ul.checkboxColumns li
    {
        column-break-inside: avoid;
        break-inside: avoid-column;
        margin-bottom: 4px;
        display: inline-block;
        width: 100%;
    }
  
    .xenForm .checkboxColumns.blockLinksList > dd > ul li,
    ul.checkboxColumns.blockLinksList li
    {
        display: block;
    }

.xenForm .checkboxColumns.multiple > dd > ul
{
    column-count: 1;
    column-gap: 0;
}

.xenForm .checkboxColumns.multiple > dd
{
    column-count: 2;
    column-gap: 8px;
}

.xenForm .checkboxColumns.multiple > dd > ul
{
    margin-bottom: 18px;
}

#recaptcha_image
{
    box-sizing: content-box;
}

#helper_birthday { display: inline-block; }
#helper_birthday > li
{
    display: inline;
}
html[dir=rtl] #helper_birthday input,
html[dir=rtl] #helper_birthday select
{
    direction: rtl;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .xenForm .ctrlUnit > dt
    {
        float: none;
        width: auto;
        text-align: left;
        height: auto;
    }

        .Responsive .xenForm .ctrlUnit > dt label
        {
            margin-left: 0;
        }

    .Responsive .xenForm .ctrlUnit.submitUnit dt
    {
        height: auto;
    }

    .Responsive .xenForm .ctrlUnit > dd,
    .Responsive .xenForm .ctrlUnit.fullWidth dd
    {
        float: none;
        width: auto;
        text-align: left;
        height: auto;
        padding-left: @ctrlUnitEdgeSpacer;
        overflow: hidden;
    }

    .Responsive .xenForm .checkboxColumns > dd > ul,
    .Responsive ul.checkboxColumns
    {
        column-count: 1;
    }
  
    .Responsive #ctrl_upload
    {
        max-width: 200px;
    }
  
    .Responsive .xenForm .ctrlUnit > dd .textCtrl[size],
    .Responsive .xenForm .ctrlUnit > dd .textCtrl.autoSize
    {
        width: 100% !important;
    }
  
    .Responsive .xenForm .ctrlUnit > dd > input,
    .Responsive .xenForm .ctrlUnit > dd > select,
    .Responsive .xenForm .ctrlUnit > dd > textarea,
    .Responsive .xenForm .ctrlUnit > dd > ul
    {
        margin-top: -0;
    }
}

@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .insideSidebar .xenForm .ctrlUnit > dt
    {
        float: none;
        width: auto;
        text-align: left;
        height: auto;
    }

        .Responsive .insideSidebar .xenForm .ctrlUnit > dt label
        {
            margin-left: 0;
        }

    .Responsive .insideSidebar .xenForm .ctrlUnit.submitUnit dt
    {
        height: auto;
    }

    .Responsive .insideSidebar .xenForm .ctrlUnit > dd,
    .Responsive .insideSidebar .xenForm .ctrlUnit.fullWidth dd
    {
        float: none;
        width: auto;
        text-align: left;
        height: auto;
        padding-left: @ctrlUnitEdgeSpacer;
        overflow: hidden;
    }
  
    .Responsive .insideSidebar .xenForm .ctrlUnit > dd .textCtrl[size],
    .Responsive .insideSidebar .xenForm .ctrlUnit > dd .textCtrl.autoSize
    {
        width: 100% !important;
    }
  
    .Responsive .insideSidebar .xenForm .ctrlUnit > dd > input,
    .Responsive .insideSidebar .xenForm .ctrlUnit > dd > select,
    .Responsive .insideSidebar .xenForm .ctrlUnit > dd > textarea,
    .Responsive .insideSidebar .xenForm .ctrlUnit > dd > ul
    {
        margin-top: -0;
    }
}

@media (max-device-width:568px)
{
    .Responsive .textCtrl
    {
        font-size: 16px;
    }
}
</xen:if>

Còn lại màu sắc các bạn chỉnh ở các file css nhé.

Nguồn: codientu.org​

 

[Trung Nhẫn]

Mình bị lỗi
NEW PROFILE POSTS
thì sửa sao bạn?