Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy
click để tìm bản mới hơn
Tạo giao diện Login đẹp giống Mầm Công Nghệ
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
Đầu tiên thay template xenforo_overlay.css bằng code sau
Thay template form.css bằng code sau
Thay template helper_login_form bằng code sau
Thay template facebook.css
Thay template google.css
Save lại là xong.
Chúc các bạn thành công.
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
Mã:
/* All overlays must have this */
.xenOverlay
{
display: none;
z-index: 10000;
width: 90%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
max-width: 690px; /*calc: 90=overlay padding+borders*/
}
.xenOverlay .overlayScroll
{
max-height: 400px;
overflow: auto;
}
.xenOverlay .overlayScroll.ltr
{
direction: ltr;
}
.xenOverlay .overlayScroll .sortable-placeholder
{
background-color: rgb(76, 175, 80);
}
.overlayOnly /* needs a bit more specificity over regular buttons */
{
display: none !important;
}
.xenOverlay .overlayOnly
{
display: block !important;
}
.xenOverlay input.overlayOnly,
.xenOverlay button.overlayOnly,
.xenOverlay a.overlayOnly
{
display: inline !important;
}
.xenOverlay a.close
{
font-size: 28px;
color: rgb(76, 175, 80);
position: absolute;
right: 4px;
top: 4px;
cursor: pointer;
width: 35px;
height: 35px;
}
.xenOverlay .nonOverlayOnly
{
display: none !important;
}
/* Generic form overlays */
.xenOverlay .formOverlay
{
color: rgb(136, 136, 136);
background-color: #ffffff;
padding: 15px 25px;
-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);
_zoom: 1;
margin: 0;
}
.Touch .xenOverlay .formOverlay
{
background: #ffffff;
-webkit-box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; box-shadow: none;
}
.xenOverlay .formOverlay a.muted,
.xenOverlay .formOverlay .muted a
{
color: rgb(182, 182, 182);
}
.xenOverlay .formOverlay .heading
{
font-size: 12pt;
color: rgb(76, 175, 80);
background-color: #ffffff;
padding: 5px 10px;
margin-bottom: 10px;
font-weight: normal;
}
.xenOverlay .formOverlay .subHeading
{
font-weight: bold;
font-size: 11px;
color: rgb(238, 238, 238);
background-color: rgb(76, 175, 80);
padding: 5px 10px;
margin-bottom: 10px;
border: 1px solid rgb(76, 175, 80);
-webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
}
.xenOverlay .formOverlay .textHeading
{
color: rgb(238, 238, 238);
}
.xenOverlay .formOverlay > p
{
padding-left: 10px;
padding-right: 10px;
}
.xenOverlay .formOverlay .textCtrl
{
color: rgb(238, 238, 238);
background-color: #ffffff;
border-bottom: 1px solid rgb(114, 114, 114);
}
.xenOverlay .formOverlay .textCtrl option
{
background-color: #ffffff;
}
.xenOverlay .formOverlay .textCtrl:focus,
.xenOverlay .formOverlay .textCtrl.Focus
{
background: #ffffff none;
border-bottom: 2px solid rgb(76, 175, 80);
}
.xenOverlay .formOverlay .textCtrl:focus option
{
background: #ffffff none;
}
.xenOverlay .formOverlay .textCtrl.disabled
{
background: url(rgba.php?r=0&g=0&b=0&a=63); background: rgba(0,0,0, 0.25); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3F000000,endColorstr=#3F000000);
}
.xenOverlay .formOverlay .textCtrl.disabled option
{
background: url(rgba.php?r=0&g=0&b=0&a=63); background: rgba(0,0,0, 0.25); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3F000000,endColorstr=#3F000000);
}
.xenOverlay .formOverlay .textCtrl.prompt
{
color: rgb(255, 255, 255);
}
.xenOverlay .formOverlay .ctrlUnit > dt dfn,
.xenOverlay .formOverlay .ctrlUnit > dd li .hint,
.xenOverlay .formOverlay .ctrlUnit > dd .explain
{
color: #bbb;
}
.xenOverlay .formOverlay a
{
color: rgb(114, 114, 114);
}
.xenOverlay .formOverlay a.button
{
color: black;
}
.xenOverlay .formOverlay .avatar img,
.xenOverlay .formOverlay .avatar .img,
.xenOverlay .formOverlay .avatarCropper
{
background-color: transparent;
}
/* tabs in form overlay */
.xenOverlay .formOverlay .tabs /* the actual tabs */
{
background: transparent none;
border-color: rgb(76, 175, 80);
}
.xenOverlay .formOverlay .tabs a
{
background: transparent none;
border-color: rgb(76, 175, 80);
}
.xenOverlay .formOverlay .tabs a:hover
{
background: url(rgba.php?r=255&g=255&b=255&a=63); background: rgba(255,255,255, 0.25); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3FFFFFFF,endColorstr=#3FFFFFFF);
}
.xenOverlay .formOverlay .tabs .active a
{
background-color: black;
}
.xenOverlay .formOverlay .tabPanel /* panels switched with the tab controls */
{
background: transparent url('styles/materialxen/xenforo/color-picker/panel.png') repeat-x top;
border: 1px solid rgb(76, 175, 80);
}
/* Generic overlays */
.xenOverlay .section,
.xenOverlay .sectionMain
{
padding: 0px;
}
-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
{
border-color: ;
-webkit-box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; box-shadow: none;
}
.xenOverlay > .section,
.xenOverlay > .sectionMain
{
background: none;
margin: 0;
}
.xenOverlay .section .heading,
.xenOverlay .sectionMain .heading
{
-webkit-border-radius: 0; -moz-border-radius: 0; -khtml-border-radius: 0; border-radius: 0;
margin-bottom: 0;
}
.xenOverlay .section .subHeading,
.xenOverlay .sectionMain .subHeading
{
margin-top: 0;
}
.xenOverlay .section .sectionFooter,
.xenOverlay .sectionMain .sectionFooter
{
overflow: hidden; zoom: 1;
}
.xenOverlay .sectionFooter .buttonContainer
{
line-height: 28px;
}
.xenOverlay .sectionFooter .button,
.xenOverlay .sectionFooter .buttonContainer
{
min-width: 75px;
*min-width: 0;
float: right;
margin-left: 5px;
line-height: 27px;
}
.xenOverlay .sectionFooter .buttonContainer .button
{
float: none;
margin-left: 0;
}
/* The AJAX progress indicator overlay */
#AjaxProgress.xenOverlay
{
width: 100%;
max-width: none;
overflow: hidden; zoom: 1;
}
#AjaxProgress.xenOverlay .content
{
background: #ffffff url('styles/materialxen/xenforo/widgets/ajaxload.info_FFFFFF_facebook.gif') no-repeat center center;
margin: 0 auto;
-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -khtml-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
text-align: center;
width: 85px;
height: 40px;
}
.Touch #AjaxProgress.xenOverlay .content
{
background-color: #ffffff;
}
/* Timed message for redirects */
.xenOverlay.timedMessage
{
color: black;
background: transparent url('styles/materialxen/xenforo/overlay/timed-message.png') repeat-x;
border-bottom: 1px solid black;
max-width: none;
width: 100%;
}
.xenOverlay.timedMessage .content
{
font-size: 18pt;
padding: 30px;
text-align: center;
}
/* Growl-style message */
#StackAlerts
{
position: fixed;
bottom: 70px;
left: 35px;
z-index: 9999; /* in front of the expose mask */
}
#StackAlerts .stackAlert
{
position: relative;
width: 270px;
border: 1px solid rgb(76, 175, 80);
-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0, 0.4); -moz-box-shadow: 2px 2px 5px 0 rgba(0,0,0, 0.4); -khtml-box-shadow: 2px 2px 5px 0 rgba(0,0,0, 0.4); box-shadow: 2px 2px 5px 0 rgba(0,0,0, 0.4);
margin-top: 5px;
}
#StackAlerts .stackAlertContent
{
padding: 10px;
padding-right: 30px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
border: solid 2px rgb(219, 219, 219);
background: url(rgba.php?r=238&g=238&b=238&a=229); background: rgba(238, 238, 238, 0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5EEEEEE,endColorstr=#E5EEEEEE);
font-size: 11px;
font-weight: bold;
}
/* Inline Editor */
.xenOverlay .section .messageContainer
{
padding: 0;
}
.xenOverlay .section .messageContainer .mceLayout
{
border: none;
}
.xenOverlay .section .messageContainer tr.mceFirst td.mceFirst
{
border-top: none;
}
.xenOverlay .section .messageContainer tr.mceLast td.mceLast,
.xenOverlay .section .messageContaner tr.mceLast td.mceIframeContainer
{
border-bottom: none;
}
.xenOverlay .section .textCtrl.MessageEditor,
.xenOverlay .section .mceLayout,
.xenOverlay .section .bbCodeEditorContainer textarea
{
width: 100% !important;
min-height: 260px;
_height: 260px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}
@media (max-width:610px)
{
.Responsive .xenOverlay
{
width: 100%;
}
.Responsive .xenOverlay .formOverlay,
.Responsive .xenOverlay .section,
.Responsive .xenOverlay .sectionMain
{
-webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
border-width: 10px;
}
.Responsive .xenOverlay a.close
{
top: 0;
right: 0;
width: 28px;
height: 28px;
background-size: 100% 100%;
}
}Thay template form.css bằng code sau
Mã:
/** Forms **/
.xenForm
{
margin: 10px auto;
max-width: 800px;
}
.xenOverlay .xenForm
{
max-width: 600px;
}
.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;
}
.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 rgb(219, 219, 219);
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,
{
border-top: 1px solid rgb(219, 219, 219);
}
.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
{
}
.xenForm .ctrlUnit.limited
{
display: none;
}
/** 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;
}
.xenForm .formHiderHeader
{
margin: 10px;
font-size: 15px;
font-weight: bold;
}
/** *********************** **/
/** TEXT INPUTS **/
/** *********************** **/
.textCtrl
{
font-size: 13px;
font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
color: rgb(76, 175, 80);
background-color: transparent;
padding: 3px;
margin-bottom: 2px;
border: 1px none black;
border-bottom: 1px solid rgb(114, 114, 114);
outline: 0;
}
select.textCtrl
{
word-wrap: normal;
-webkit-appearance: menulist;
border: none;
}
select[multiple].textCtrl,
select[size].textCtrl
{
-webkit-appearance: listbox;
}
select.textCtrl,
select.textCtrl
{
-webkit-appearance: menulist;
}
textarea.textCtrl
{
word-wrap: break-word;
}
.textCtrl:focus,
.textCtrl.Focus
{
border-bottom: 2px solid rgb(76, 175, 80);
}
textarea.textCtrl:focus
{
background-image: url('styles/materialxen/xenforo/gradients/form-element-focus-100.png');
}
input.textCtrl.disabled,
textarea.textCtrl.disabled,
.disabled .textCtrl
{
font-style: italic;
color: rgb(100,100,100);
background-color: rgb(245,245,245);
}
.textCtrl.prompt
{
color: rgb(114, 114, 114);
}
.textCtrl:-moz-placeholder
{
/* needs to be in its own rule due to weird selector */
color: rgb(114, 114, 114);
}
.textCtrl::-moz-placeholder
{
/* needs to be in its own rule due to weird selector */
color: rgb(114, 114, 114);
}
.textCtrl::-webkit-input-placeholder
{
/* needs to be in its own rule due to weird selector */
color: rgb(114, 114, 114);
}
.textCtrl:-ms-input-placeholder
{
/* needs to be in its own rule due to weird selector */
color: rgb(114, 114, 114);
}
.textCtrl.autoSize
{
width: auto !important;
}
.textCtrl.number,
.textCtrl.number input
{
text-align: right;
width: 150px;
}
.textCtrl.fillSpace
{
width: 100%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
_width: 95%;
}
.textCtrl.code,
.textCtrl.code input
{
font-family: Consolas, "Courier New", Courier, monospace;
white-space: pre;
word-wrap: normal;
direction: ltr;
}
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;
-webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -khtml-border-radius: 0 !important; border-radius: 0 !important;
}
.textCtrlWrap.blockInput input.textCtrl
{
border-top: 1px none black !important;
margin-top: 4px !important;
}
/** *********************** **/
/** BUTTONS **/
/** *********************** **/
.button
{
font-style: normal;
font-size: 12px;
font-family: 'Roboto', sans-serif;
color: #ffffff;
background-color: rgb(76, 175, 80);
padding: 0 6px;
margin-left: 25px;
border: 1px solid rgb(76, 175, 80);
-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
text-align: center;
-webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12); -khtml-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
outline: none;
line-height: 21px;
display: inline-block;
cursor: pointer;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
font-weight: 500;
position: relative;
overflow: hidden;
height: 30px;
}
.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(76, 175, 80);
}
input.button.disabled,
a.button.disabled,
input.button.primary.disabled,
a.button.primary.disabled,
html .buttonProxy .button.disabled
{
color: #999;
background-color: #EEE;
border-color: #CCC;
-webkit-box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; -khtml-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent;
}
.button::-moz-focus-inner
{
border: none;
}
a.button
{
display: inline-block;
color: #ffffff;
}
.button:hover,
.button[href]:hover,
.buttonProxy:hover .button
{
text-decoration: none;
background-color: rgb(76, 175, 80);
}
.button:focus
{
border-color: rgb(76, 175, 80);
}
.button:active,
.button[href]:active,
.button.ToggleButton.checked,
.buttonProxy:active .button
{
color: #ffffff;
background-color: rgb(76, 175, 80);
border-color: rgb(76, 175, 80);
border-top-color: rgb(76, 175, 80);
-webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.23), 0px 10px 30px rgba(0, 0, 0, 0.19); -moz-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.23), 0px 10px 30px rgba(0, 0, 0, 0.19); -khtml-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.23), 0px 10px 30px rgba(0, 0, 0, 0.19); box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.23), 0px 10px 30px rgba(0, 0, 0, 0.19);
outline: 0;
}
.button.ToggleButton
{
cursor: default;
width: auto;
color: rgb(76, 175, 80);
}
.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;
}
/* clearfix */ .xenForm .ctrlUnit { zoom: 1; } .xenForm .ctrlUnit:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; }
.xenForm .ctrlUnit.fullWidth
{
overflow: visible;
}
/** 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;
}
/* 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: 30px;
}
/** 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: 11px; /*TODO: sectionHeader padding + border*/
}
/** Hints **/
.ctrlUnit > dt dfn
{
font-style: italic;
font-size: 10px;
color: rgb(182, 182, 182);
margin-left: 30px;
display: block;
}
.ctrlUnit.fullWidth dt dfn
{
display: inline;
margin: 0;
}
.ctrlUnit > dt dfn b,
.ctrlUnit > dt dfn strong
{
color: rgb(114, 114, 114);
}
/** Inline Errors **/
.ctrlUnit > dt .error
{
font-size: 10px;
color: red;
display: block;
}
.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('styles/materialxen/xenforo/widgets/ajaxload.info_B4B4DC_facebook.gif') no-repeat center center;
}
/** Control Holders **/
.xenForm .ctrlUnit > dd
{
/*todo: kill property */
float: left;
}
.xenForm .ctrlUnit.fullWidth > dd
{
float: none;
width: auto;
padding-left: 30px;
}
/** Explanatory paragraph **/
.ctrlUnit > dd .explain
{
font-size: 11px;
color: rgb(182, 182, 182);
margin-top: 2px;
/*TODO:max-width: auto;*/
}
.ctrlUnit > dd .explain b,
.ctrlUnit > dd .explain strong
{
color: rgb(114, 114, 114);
}
/** 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 rgb(219, 219, 219);
}
.ctrlUnit > dd .ddText
{
margin-bottom: 2px;
}
/** Hints underneath checkbox / radio controls **/
.ctrlUnit > dd > * > li .hint
{
font-size: 11px;
color: rgb(182, 182, 182);
margin-left: 16px;
margin-top: 2px;
}
/** DISABLERS **/
.ctrlUnit > dd > * > li > ul,
.ctrlUnit .disablerList,
.ctrlUnit .indented
{
margin-left: 16px;
}
.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: 'Roboto', sans-serif;
font-size: 11pt;
}
.unitPairsJustified li
{
overflow: hidden;
}
.unitPairsJustified li .label
{
float: left;
}
.unitPairsJustified li .value
{
float: right;
}
#calroot
{
margin-top: -1px;
width: 198px;
padding: 2px;
background-color: #ffffff;
font-size: 11px;
-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);
z-index: 7500;
}
#calhead
{
padding: 2px 0;
height: 22px;
}
#caltitle {
font-size: 11pt;
color: rgb(76, 175, 80);
float: left;
text-align: center;
width: 155px;
line-height: 20px;
}
#calnext, #calprev {
display: block;
width: 20px;
height: 20px;
font-size: 11pt;
line-height: 20px;
text-align: center;
float: left;
cursor: pointer;
}
#calnext {
float: right;
}
#calprev.caldisabled, #calnext.caldisabled {
visibility: hidden;
}
#caldays {
height: 14px;
border-bottom: 1px solid rgb(76, 175, 80);
}
#caldays span {
display: block;
float: left;
width: 28px;
text-align: center;
color: rgb(76, 175, 80);
}
#calweeks {
margin-top: 4px;
}
.calweek {
clear: left;
height: 22px;
}
.calweek a {
display: block;
float: left;
width: 27px;
height: 20px;
text-decoration: none;
font-size: 11px;
margin-left: 1px;
text-align: center;
line-height: 20px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
}
.calweek a:hover, .calfocus {
background-color: rgb(238, 238, 238);
}
a.caloff {
color: rgb(182, 182, 182);
}
a.caloff:hover {
background-color: rgb(238, 238, 238);
}
a.caldisabled {
background-color: #efefef !important;
color: #ccc !important;
cursor: default;
}
#caltoday {
font-weight: bold;
}
#calcurrent {
background-color: rgb(76, 175, 80);
color: rgb(238, 238, 238);
}
ul.autoCompleteList
{
background-color: #ffffff;
border: 1px solid rgb(76, 175, 80);
padding: 2px;
font-size: 11px;
min-width: 180px;
_width: 180px;
z-index: 1000;
}
ul.autoCompleteList li
{
padding: 3px 3px;
height: 24px;
line-height: 24px;
}
ul.autoCompleteList li:hover,
ul.autoCompleteList li.selected
{
background-color: rgb(219, 219, 219);
-webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
}
ul.autoCompleteList img.autoCompleteAvatar
{
float: left;
margin-right: 3px;
width: 24px;
height: 24px;
}
ul.autoCompleteList li strong
{
font-weight: bold;
}
/** 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: rgb(76, 175, 80);
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
{
-webkit-column-count : 2; -moz-column-count : 2;column-count: 2;
-webkit-column-gap : 8px; -moz-column-gap : 8px;column-gap: 8px;
}
.xenForm .checkboxColumns > dd > ul li,
ul.checkboxColumns li
{
-webkit-column-break-inside : avoid; -moz-column-break-inside : avoid;column-break-inside: avoid;
break-inside: avoid-column;
margin-bottom: 4px;
padding-left: 1px;
display: inline-block;
width: 100%;
}
.xenForm .checkboxColumns.blockLinksList > dd > ul li,
ul.checkboxColumns.blockLinksList li
{
display: block;
}
.xenForm .checkboxColumns.multiple > dd > ul
{
-webkit-column-count : 1; -moz-column-count : 1;column-count: 1;
-webkit-column-gap : 0; -moz-column-gap : 0;column-gap: 0;
}
.xenForm .checkboxColumns.multiple > dd
{
-webkit-column-count : 2; -moz-column-count : 2;column-count: 2;
-webkit-column-gap : 8px; -moz-column-gap : 8px;column-gap: 8px;
}
.xenForm .checkboxColumns.multiple > dd > ul
{
margin-bottom: 18px;
}
#recaptcha_image
{
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box;
max-width: 100%;
}
#recaptcha_image img
{
max-width: 100%;
}
#helper_birthday { display: inline-block; }
#helper_birthday > li
{
display: inline;
}
html[dir=rtl] #helper_birthday input,
html[dir=rtl] #helper_birthday select
{
direction: rtl;
}
@media (max-width:480px)
{
.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: 30px;
overflow: hidden;
}
.Responsive .xenForm .checkboxColumns > dd > ul,
.Responsive ul.checkboxColumns
{
-webkit-column-count : 1; -moz-column-count : 1;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:610px)
{
.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: 30px;
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;
}
}Thay template helper_login_form bằng code sau
Mã:
<xen:if is="!{$visitor.user_id}">
<xen:container var="$hideLoginBar">1</xen:container>
<form action="{xen:link 'login/login'}" method="post" class="xenForm" id="pageLogin">
<xen:if hascontent="true">
<div class="errorPanel"><span class="errors">
<xen:contentcheck>{xen:raw $text}</xen:contentcheck>
</span></div>
</xen:if>
<dl class="ctrlUnit">
<dd><input type="text" placeholder="{xen:phrase your_name_or_email_address}" name="login" value="{$defaultLogin}" 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="{xen:phrase password}" tabindex="2">
<div style="margin-top: 10px;">
<a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="6">{xen:phrase forgot_your_password}</a>
<a href="{xen:link register}" class="" tabindex="5" style="float:right;">{xen:phrase register}</a>
</div>
</dd>
</dl>
<xen:if is="{$captcha}">
<dl class="ctrlUnit">
<dt>{xen:phrase verification}:</dt>
<dd>{xen:raw $captcha}</dd>
</dl>
</xen:if>
<dl class="ctrlUnit submitUnit">
<dt></dt>
<dd>
<input type="submit" class="button primary" value="{xen:phrase log_in}" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" tabindex="4" />
<label class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_pageLogin_remember" tabindex="3" /> {xen:phrase stay_logged_in}</label>
</dd>
</dl>
<xen:if is="{$xenOptions.facebookAppId}">
<xen:require css="facebook.css" />
<dl class="ctrlUnit">
<dt></dt>
<dd><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin" tabindex="10"><span>{xen:phrase login_with_facebook}</span></a></dd>
</dl>
</xen:if>
<xen:if is="{$xenOptions.twitterAppKey}">
<xen:require css="twitter.css" />
<dl class="ctrlUnit">
<dt></dt>
<dd><a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin" tabindex="10"><span>{xen:phrase login_with_twitter}</span></a></dd>
</dl>
</xen:if>
<xen:if is="{$xenOptions.googleClientId}">
<xen:require css="google.css" />
<dl class="ctrlUnit">
<dt></dt>
<dd><span class="googleLogin GoogleLogin JsOnly" tabindex="10" data-client-id="{$xenOptions.googleClientId}" data-redirect-url="{xen:link register/google, '', 'code=__CODE__', 'csrf={$session.sessionCsrf}'}"><span>{xen:phrase login_with_google}</span></span></dd>
</dl>
</xen:if>
<input type="hidden" name="cookie_check" value="1" />
<input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
<input type="hidden" name="redirect" value="{xen:if $redirect, $redirect, $requestPaths.requestUri}" />
<xen:if is="{$postData}">
<input type="hidden" name="postData" value="{xen:escape {xen:helper json, $postData}}" />
</xen:if>
</form>
<script>
$(function()
{
var $button = $('#pageLogin input.button.primary');
$('#pageLogin input[name="register"]').click(function()
{
$button.val(
$('#pageLogin input[name="register"]:checked').val() == '1'
? $button.data('signupphrase')
: $button.data('loginphrase')
);
});
});
</script>
</xen:if>Thay template facebook.css
Mã:
a.fbLogin,
#loginBar a.fbLogin
{
display: inline-block;
width: 300px;
height: 30px;
cursor: pointer;
background: #5F78AB;
background-repeat: no-repeat;
border-radius: 3px;
padding: 10px 0px 0px 0px;
outline: none;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 11px;
line-height: 20px;
text-align: center;
display: block;
margin: 0 auto;
}
a.fbLogin:active,
#loginBar a.fbLogin:active
{
}
a.fbLogin:hover,
#loginBar a.fbLogin:hover
{
text-decoration: none;
background-color: #586C93;
}
a.fbLogin span
{
display: block;
text-shadow: none;
white-space: nowrap;
overflow: hidden;
}
a.fbLogin:active span
{
background: #4f6aa3;
margin-top: 5px;
}Thay template google.css
Mã:
.googleLogin,
#loginBar .googleLogin
{
display: inline-block;
width: 300px;
height: 30px;
cursor: pointer;
background-color: #dd4b39;
border-radius: 3px;
padding: 10px 0 0 0;
color: white;
font-weight: bold;
font-size: 11px;
line-height: 20px;
text-align: center;
margin: 0 auto;
display: block;
}
.googleLogin span
{
display: block;
background-position: left 0;
white-space: nowrap;
overflow: hidden;
}
.googleLogin:hover,
#loginBar .googleLogin:hover
{
background-color: #be3e2e;
}
.googleLogin:active span,
#loginBar .googleLogin:active span
{
margin-top:10px;
}Save lại là xong.
Chúc các bạn thành công.
Nguồn: mamcongnghe.com
Bài viết liên quan
Bài viết mới
Silzedt
![[VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1](https://cdn.vnxf.vn/data/assets/logo_alternate/vnxf-2x-best-statistics-pro-m.webp){kind=logo}
