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:
Thay toàn bộ template login_bar.css bằng đoạn code sau:
Thay toàn bộ template login_bar_form bằng đoạn code sau:
Thay toàn bộ template form.css bằng đoạn code sau:
Còn lại màu sắc các bạn chỉnh ở các file css nhé.
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
Bài viết liên quan
Bài viết mới