Lưu ý: Khi tạo giao diện login kiểu này cũng sẽ thay đổi cấu trúc Xenform của bạn. Cái này không có gì to tát cả, làm đẹp cho nó thôi ^_^

Demo

[VNXF] - Tạo giao diện Login đẹp giống Mầm Công Nghệ Untitled-png.6265

​​

Đầu tiên thay template xenforo_overlay.css bằng code sau

Mã:

/* All overlays must have this */

.xenOverlay

.xenOverlay .overlayScroll

.xenOverlay .overlayScroll.ltr

.xenOverlay .overlayScroll .sortable-placeholder

.overlayOnly /* needs a bit more specificity over regular buttons */

.xenOverlay .overlayOnly

.xenOverlay input.overlayOnly,

.xenOverlay button.overlayOnly,

.xenOverlay a.overlayOnly

.xenOverlay a.close

.xenOverlay .nonOverlayOnly

/* Generic form overlays */

.xenOverlay .formOverlay

.Touch .xenOverlay .formOverlay

.xenOverlay .formOverlay a.muted,

.xenOverlay .formOverlay .muted a

.xenOverlay .formOverlay .heading

.xenOverlay .formOverlay .subHeading

.xenOverlay .formOverlay .textHeading

.xenOverlay .formOverlay > p

.xenOverlay .formOverlay .textCtrl

.xenOverlay .formOverlay .textCtrl option

.xenOverlay .formOverlay .textCtrl:focus,

.xenOverlay .formOverlay .textCtrl.Focus

.xenOverlay .formOverlay .textCtrl:focus option

.xenOverlay .formOverlay .textCtrl.disabled

.xenOverlay .formOverlay .textCtrl.disabled option

.xenOverlay .formOverlay .textCtrl.prompt

.xenOverlay .formOverlay .ctrlUnit > dt dfn,

.xenOverlay .formOverlay .ctrlUnit > dd li .hint,

.xenOverlay .formOverlay .ctrlUnit > dd .explain

.xenOverlay .formOverlay a

.xenOverlay .formOverlay a.button

.xenOverlay .formOverlay .avatar img,

.xenOverlay .formOverlay .avatar .img,

.xenOverlay .formOverlay .avatarCropper

/* tabs in form overlay */

.xenOverlay .formOverlay .tabs /* the actual tabs */

.xenOverlay .formOverlay .tabs a

.xenOverlay .formOverlay .tabs a:hover

.xenOverlay .formOverlay .tabs .active a

.xenOverlay .formOverlay .tabPanel /* panels switched with the tab controls */

/* Generic overlays */

.xenOverlay .section,

.xenOverlay .sectionMain

-webkit-box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19); -moz-box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19); -khtml-box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19); box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19);

border-color: ;

}

.Touch .xenOverlay .section,

.Touch .xenOverlay .sectionMain

.xenOverlay > .section,

.xenOverlay > .sectionMain

.xenOverlay .section .heading,

.xenOverlay .sectionMain .heading

.xenOverlay .section .subHeading,

.xenOverlay .sectionMain .subHeading

.xenOverlay .section .sectionFooter,

.xenOverlay .sectionMain .sectionFooter

.xenOverlay .sectionFooter .buttonContainer

.xenOverlay .sectionFooter .button,

.xenOverlay .sectionFooter .buttonContainer

.xenOverlay .sectionFooter .buttonContainer .button

/* The AJAX progress indicator overlay */

#AjaxProgress.xenOverlay

#AjaxProgress.xenOverlay .content

.Touch #AjaxProgress.xenOverlay .content

/* Timed message for redirects */

.xenOverlay.timedMessage

.xenOverlay.timedMessage .content

/* Growl-style message */

#StackAlerts

#StackAlerts .stackAlert

#StackAlerts .stackAlertContent

/* Inline Editor */

.xenOverlay .section .messageContainer

.xenOverlay .section .messageContainer .mceLayout

.xenOverlay .section .messageContainer tr.mceFirst td.mceFirst

.xenOverlay .section .messageContainer tr.mceLast td.mceLast,

.xenOverlay .section .messageContaner tr.mceLast td.mceIframeContainer

.xenOverlay .section .textCtrl.MessageEditor,

.xenOverlay .section .mceLayout,

.xenOverlay .section .bbCodeEditorContainer textarea

@media (max-width:610px)

.Responsive .xenOverlay .formOverlay,

.Responsive .xenOverlay .section,

.Responsive .xenOverlay .sectionMain

.Responsive .xenOverlay a.close

}

Thay template form.css bằng code sau

Mã:

Code:

/** Forms **/

.xenForm

.xenOverlay .xenForm

.xenForm .ctrlUnit > dd

.xenForm .ctrlUnit > dd .textCtrl

.xenForm .ctrlUnit > dd .textCtrl[size],

.xenForm .ctrlUnit > dd .textCtrl.autoSize

.xenForm .ctrlUnit > dd .textCtrl.number

.xenForm > .sectionHeader:first-child,

.xenForm > fieldset > .sectionHeader:first-child

/** Sections **/

.xenForm fieldset,

.xenForm .formGroup

.xenForm > fieldset:first-child,

.xenForm > .formGroup:first-child

.xenForm .PreviewContainer + fieldset,

.xenForm .PreviewContainer + .formGroup

.xenForm fieldset + .ctrlUnit,

.xenForm .formGroup + .ctrlUnit,

.xenForm fieldset + .ctrlUnit,

.xenForm .formGroup + .ctrlUnit

.xenForm .primaryContent + .submitUnit,

.xenForm .secondaryContent + .submitUnit

.xenForm .ctrlUnit.submitUnit dd

.ctrlUnit.submitUnit dd .explain,

.ctrlUnit.submitUnit dd .text,

.ctrlUnit.submitUnit dd label

/* now undo that */

.xenOverlay .ctrlUnit.submitUnit dd,

.Menu .ctrlUnit.submitUnit dd,

#QuickSearch .ctrlUnit.submitUnit dd

.xenForm .ctrlUnit

.xenForm .ctrlUnit.limited

/** Sections Immediately Following Headers **/

.xenForm .sectionHeader + fieldset,

.xenForm .heading + fieldset,

.xenForm .subHeading + fieldset,

.xenForm .sectionHeader + .formGroup,

.xenForm .heading + .formGroup,

.xenForm .subHeading + .formGroup

.xenForm .formHiderHeader

/** *********************** **/

/** TEXT INPUTS **/

/** *********************** **/

.textCtrl

select.textCtrl

select[multiple].textCtrl,

select[size].textCtrl

select.textCtrl,

select.textCtrl

textarea.textCtrl

.textCtrl:focus,

.textCtrl.Focus

textarea.textCtrl:focus

input.textCtrl.disabled,

textarea.textCtrl.disabled,

.disabled .textCtrl

.textCtrl.prompt

.textCtrl:-moz-placeholder

.textCtrl::-moz-placeholder

.textCtrl::-webkit-input-placeholder

.textCtrl:-ms-input-placeholder

.textCtrl.autoSize

.textCtrl.number,

.textCtrl.number input

.textCtrl.fillSpace

.textCtrl.code,

.textCtrl.code input

input.textCtrl[type="password"]

input[type="email"],

input[type="url"]

.textCtrl.titleCtrl,

.textCtrl.titleCtrl input

textarea.textCtrl.Elastic

/* for use with wrapped inputs */

.textCtrlWrap

.textCtrlWrap input.textCtrl

.textCtrlWrap.blockInput input.textCtrl

/** *********************** **/

/** BUTTONS  **/

/** *********************** **/

.button

.button.smallButton

.button.primary

input.button.disabled,

a.button.disabled,

input.button.primary.disabled,

a.button.primary.disabled,

html .buttonProxy .button.disabled

.button::-moz-focus-inner

a.button

.button:hover,

.button[href]:hover,

.buttonProxy:hover .button

.button:focus

.button:active,

.button[href]:active,

.button.ToggleButton.checked,

.buttonProxy:active .button

.button.ToggleButton

.button.ToggleButton.checked

.button.inputSupplementary

.button.inputSupplementary.add

.button.inputSupplementary.delete

.submitUnit .button

/** Control Units **/

.xenForm .ctrlUnit

/* clearfix */ .xenForm .ctrlUnit .xenForm .ctrlUnit:after

.xenForm .ctrlUnit.fullWidth

/** Control Unit Labels **/

.xenForm .ctrlUnit > dt

/* special long-text label */

.xenForm .ctrlUnit > dt.explain

.xenForm .ctrlUnit.fullWidth dt,

.xenForm .ctrlUnit.submitUnit.fullWidth dt

.xenForm .ctrlUnit.fullWidth dt

.xenForm .ctrlUnit > dt label

/** Hidden Labels **/

.xenForm .ctrlUnit.surplusLabel dt label

/** Section Links **/

.ctrlUnit.sectionLink dt

.ctrlUnit.sectionLink dt a

/** Hints **/

.ctrlUnit > dt dfn

.ctrlUnit.fullWidth dt dfn

.ctrlUnit > dt dfn b,

.ctrlUnit > dt dfn strong

/** Inline Errors **/

.ctrlUnit > dt .error

.ctrlUnit > dt dfn,

.ctrlUnit > dt .error,

.ctrlUnit > dt a

.xenForm .ctrlUnit.submitUnit dt

.ctrlUnit.submitUnit dt.InProgress

/** Control Holders **/

.xenForm .ctrlUnit > dd

.xenForm .ctrlUnit.fullWidth > dd

/** Explanatory paragraph **/

.ctrlUnit > dd .explain

.ctrlUnit > dd .explain b,

.ctrlUnit > dd .explain strong

/** List items inside controls **/

.ctrlUnit > dd > * > li

.ctrlUnit > dd > * > li:first-child > .textCtrl:first-child

.ctrlUnit > dd .break

.ctrlUnit > dd .rule

.ctrlUnit > dd .ddText

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

.ctrlUnit > dd > * > li .hint

/** DISABLERS **/

.ctrlUnit > dd > * > li > ul,

.ctrlUnit .disablerList,

.ctrlUnit .indented

.ctrlUnit > dd > * > li > ul > li:first-child

.ctrlUnit > dd .disablerList > li,

.ctrlUnit > dd .checkboxColumns > li,

.ctrlUnit > dd .choiceList > li

/** Other stuff... **/

.ctrlUnit > dd .helpLink

.ctrlUnit.textValue dt

.button.spinBoxButton

.unitPairsJustified li

.unitPairsJustified li .label

.unitPairsJustified li .value

#calroot

#calhead

#caltitle

#calnext, #calprev

#calnext

#calprev.caldisabled, #calnext.caldisabled

#caldays

#caldays span

#calweeks

.calweek

.calweek a

.calweek a:hover, .calfocus

a.caloff

a.caloff:hover

a.caldisabled

#caltoday

#calcurrent

ul.autoCompleteList

ul.autoCompleteList li

ul.autoCompleteList li:hover,

ul.autoCompleteList li.selected

ul.autoCompleteList img.autoCompleteAvatar

ul.autoCompleteList li strong

/** status editor **/

.statusEditorCounter

.statusEditorCounter.warning

.statusEditorCounter.error

.explain .statusHeader

.explain .CurrentStatus

/* BB code-based editor styling */

.xenForm .ctrlUnit.fullWidth dd .bbCodeEditorContainer textarea

.bbCodeEditorContainer a

/*

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

*/

.xenForm .ctrlUnit > dd

.xenForm .ctrlUnit.fullWidth > dd

.xenForm .ctrlUnit > dd > input,

.xenForm .ctrlUnit > dd > select,

.xenForm .ctrlUnit > dd > textarea,

.xenForm .ctrlUnit > dd > ul

.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

/*

* Multi-column checkboxes

*/

.xenForm .checkboxColumns > dd > ul,

ul.checkboxColumns

.xenForm .checkboxColumns > dd > ul li,

ul.checkboxColumns li

.xenForm .checkboxColumns.blockLinksList > dd > ul li,

ul.checkboxColumns.blockLinksList li

.xenForm .checkboxColumns.multiple > dd > ul

.xenForm .checkboxColumns.multiple > dd

.xenForm .checkboxColumns.multiple > dd > ul

#recaptcha_image

#recaptcha_image img

#helper_birthday

#helper_birthday > li

html[dir=rtl] #helper_birthday input,

html[dir=rtl] #helper_birthday select

@media (max-width:480px)

.Responsive .xenForm .ctrlUnit > dt label

.Responsive .xenForm .ctrlUnit.submitUnit dt

.Responsive .xenForm .ctrlUnit > dd,

.Responsive .xenForm .ctrlUnit.fullWidth dd

.Responsive .xenForm .checkboxColumns > dd > ul,

.Responsive ul.checkboxColumns

.Responsive #ctrl_upload

.Responsive .xenForm .ctrlUnit > dd .textCtrl[size],

.Responsive .xenForm .ctrlUnit > dd .textCtrl.autoSize

.Responsive .xenForm .ctrlUnit > dd > input,

.Responsive .xenForm .ctrlUnit > dd > select,

.Responsive .xenForm .ctrlUnit > dd > textarea,

.Responsive .xenForm .ctrlUnit > dd > ul

}

@media (max-width:610px)

.Responsive .insideSidebar .xenForm .ctrlUnit > dt label

.Responsive .insideSidebar .xenForm .ctrlUnit.submitUnit dt

.Responsive .insideSidebar .xenForm .ctrlUnit > dd,

.Responsive .insideSidebar .xenForm .ctrlUnit.fullWidth dd

.Responsive .insideSidebar .xenForm .ctrlUnit > dd .textCtrl[size],

.Responsive .insideSidebar .xenForm .ctrlUnit > dd .textCtrl.autoSize

.Responsive .insideSidebar .xenForm .ctrlUnit > dd > input,

.Responsive .insideSidebar .xenForm .ctrlUnit > dd > select,

.Responsive .insideSidebar .xenForm .ctrlUnit > dd > textarea,

.Responsive .insideSidebar .xenForm .ctrlUnit > dd > ul

}

@media (max-device-width:568px)

}



Thay template helper_login_form bằng code sau

Mã:

<xen:if is="!">

<xen:container var="$hideLoginBar">1</xen:container>

<form action="" method="post" class="xenForm" id="pageLogin">

<xen:if hascontent="true">

<div class="errorPanel"><span class="errors">

<xen:contentcheck></xen:contentcheck>

</span></div>

</xen:if>

<dl class="ctrlUnit">

<dd><input type="text" placeholder="" name="login" value="" id="ctrl_pageLogin_login" class="textCtrl" tabindex="1" /></dd>

</dl>

<dl class="ctrlUnit">

<dd>

<input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" placeholder="" tabindex="2">

<div style="margin-top: 10px;">

<a href="" class="OverlayTrigger OverlayCloser" tabindex="6"></a>

<a href="" class="" tabindex="5" style="float:right;"></a>

</div>

</dd>

</dl>

<xen:if is="">

<dl class="ctrlUnit">

<dt>:</dt>

<dd></dd>

</dl>

</xen:if>

<dl class="ctrlUnit submitUnit">

<dt></dt>

<dd>

<input type="submit" class="button primary" value="" data-loginPhrase="" data-signupPhrase="" tabindex="4" />

<label class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_pageLogin_remember" tabindex="3" /> </label>

</dd>

</dl>

<xen:if is="">

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

<dl class="ctrlUnit">

<dt></dt>

<dd><a href="" class="fbLogin" tabindex="10"><span></span></a></dd>

</dl>

</xen:if>

<xen:if is="">

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

<dl class="ctrlUnit">

<dt></dt>

<dd><a href="" class="twitterLogin" tabindex="10"><span></span></a></dd>

</dl>

</xen:if>

<xen:if is="">

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

<dl class="ctrlUnit">

<dt></dt>

<dd><span class="googleLogin GoogleLogin JsOnly" tabindex="10" data-client-id="" data-redirect-url="'}"><span></span></span></dd>

</dl>

</xen:if>

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

<input type="hidden" name="_xfToken" value="" />

<input type="hidden" name="redirect" value="" />

<xen:if is="">

<input type="hidden" name="postData" value="}" />

</xen:if>

</form>

<script>

$(function()

);

});

</script> </xen:if>

Thay template facebook.css

Mã:

a.fbLogin,

#loginBar a.fbLogin

a.fbLogin:active,

#loginBar a.fbLogin:active

a.fbLogin:hover,

#loginBar a.fbLogin:hover

a.fbLogin span

a.fbLogin:active span

[/FONT][/COLOR]

Thay template google.css

Mã:

.googleLogin,

#loginBar .googleLogin

.googleLogin span

.googleLogin:hover,

#loginBar .googleLogin:hover

.googleLogin:active span,

#loginBar .googleLogin:active span

[/FONT][/COLOR]

Save lại là xong.

Nguồn: VNXF.VN​