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

PVS · 16/04/2015

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:

Mã:

<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:

Mã:

/** 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:

Mã:

<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:

Mã:

/** 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 · 03/08/2016

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

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

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

PVS

Super Moderator

Trung Nhẫn

Private

Chủ đề tương tự

Dịch vụ XenForo của VNXF

Hướng dẫn sử dụng

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ