- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,687
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
