- Tham gia
- 2/2/17
- Bài viết
- 5,766
- Được thích
- 7,748
8405
#1
Ở những bài trước, mình đã hướng dẫn các bạn một số thủ thuật khá hay để tùy biến giao diện Facebook cũng như Google trên máy tính. Và hôm nay, mình giới thiệu và hướng dẫn cách tùy biến giao diện đăng nhập, bạn có thể kết hợp với các bài trước để Facebook trở nên đẹp hơn.
Bước 1: Cài đặt tiện ích mở rộng J2Team Security: J2TeaM Security.
Bước 2: Click phải vào icon J phía bên phải thanh nhập địa chỉ. Tiếp tục click Tools > Dark Theme Editor.
Code:
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/ODelI1aHBYDBqgeIAH2zlNOAHFN6BivSraYkjhveRHY.woff2) format('woff2');
}
body.fbIndex {
background: url('http://www.techrum.vn/chevereto/images/2016/06/24/Urhyu.jpg')left center fixed !important;
-webkit-background-size: cover;
-moz-background-size: 100% !important;
background-repeat: no-repeat !important;
background-size: cover !important;
overflow-y: hidden
}
.loggedout_menubar_container {
background: none !important;
}
.fbIndex #globalContainer #dropmenu_container,
.fbIndex #globalContainer #content,
.fbIndex #globalContainer #pageFooter {
display: none !important
}
.fbIndex .loggedout_menubar_container {
position: fixed !important;
width: 420px !important;
height: 82px !important;
min-width: 0 !important;
top: 35% !important;
left: 35% !important;
margin-top: -17px !important;
margin-left: auto !important;
z-index: -1 !important;
}
.fbIndex .loggedout_menubar {
width: 500px !important;
height: 215px;
background-color: rgba(44, 44, 44, 0.36)!important;
margin-top: 150px;
padding-top: 20px;
padding-left: 30px;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.53);
transition: all .3s ease-out;
border-radius: 12px;
}
.fbIndex .loggedout_menubar:hover {
background-color: rgba(90, 90, 90, 0.26)!important;
box-shadow: 0px 10px 30px 0px rgba(17, 17, 17, 0.49);
}
.fbIndex .loggedout_menubar_container .lfloat,
.fbIndex .loggedout_menubar_container .rfloat {
float: none !important
}
.fbIndex .loggedout_menubar_container .lfloat img,
.fbIndex .loggedout_menubar_container .rfloat #login_form table {
display: block !important;
margin: 50px auto 0 !important
}
.fbIndex .loggedout_menubar_container .lfloat img {
display: block;
margin: -60px auto 20px !important;
}
._5a-- {
display: none !important
}
#SetAsHomepage_Callout {
display: none;
}
/*INPUT*/
td .inputtext, td .inputpassword {
background-color: transparent;
height:25px;
border-top-color: transparent!important;
border-right-color: transparent!important;
border-left-color: transparent!important;
border-bottom-color: #fff!important;
transition: all .3s ease-out;
font-family: Montserrat,roboto, tahoma, arial, sans-serif!important;
color: #fff;
font-weight: normal;
}
td .inputtext {
font-family:Montserrat;
text-transform: uppercase;
}
td .inputpassword {
font-family:Montserrat;
font-size: 20px;
}
.inputtext:hover {
outline: none;
}
.inputtext:focus {
outline: none;
}
/*SUBMIT*/
.uiButtonConfirm {
background-image: none!important;
background-color: transparent;
border-top-color: transparent!important;
border-right-color: transparent!important;
border-left-color: transparent!important;
border-bottom-color: #fff!important;
width: 82px;
height: 28px;
transition: all .3s ease-out;
}
.uiButtonConfirm:hover {
background-color: transparent;
}
.uiButtonConfirm:focus {
background-image: none!important;
}
.uiButton:focus, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover {
background-image:none!important;
}
.uiButtonText, .uiButton
input {
border: 0;
color: #fff;
cursor: normal;
display: inline-block;
font-size: 11px;
font-weight: normal;
line-height: 35px;
transition: all .3s ease-out;
font-family: roboto, tahoma, arial, sans-serif!important
}
.uiButtonText, .uiButton
input:hover {
color: #888;
}
.uiButtonText, .uiButton
input:focus {
background-image: none;
background-color: transparent!important;
outline: none;
}
/*LOGO*/
.sp_7XMX65Pq0E7.sx_ccd1d2 {
margin: 10px;
}
/*LABEL'S*/
.menu_login_container .html7magic label {
margin-top: 30px;
text-transform: uppercase;
color: #fff;
font-size: 10px;
font-weight: normal;
font-family: Source Sans Pro,roboto, tahoma, arial, sans-serif!important
}
#login_form{
margin-top: 50px;
}
/*OPCIONES ABAJO*/
.menu_login_container .login_form_label_field label, .menu_login_container .login_form_label_field a {
color: #FFFFFF;
font-weight: normal;
font-family: roboto, tahoma, arial, sans-serif!important
}
._53jh {
background-color: #3b5998;
background-image: linear-gradient(#4e69a2, #3b5998 50%);
border-bottom:none;
min-height: 0px;
}
.sp_WQkjDN-lT6A_1_5x {
margin-left: 150px;
background-image: url(/rsrc.php/v3/yw/r/d0QgfwH16VF.png);
background-size: 170px 128px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
width: 14px;
}
/* button login */
.uiButtonText, .uiButton input {
text-transform: uppercase;
border: 0;
color: #fff;
cursor: normal;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 35px;
transition: all .3s ease-out;
font-family: Source Sans Pro, sans-serif!important;
}
.uiButtonConfirm:active, .uiButtonConfirm.uiButtonDepressed {
background-color: rgba(192, 192, 192, 0.61);
border-color: rgba(192, 192, 192, 0.61);
}
.uiButtonConfirm:hover {
background-color: rgba(192, 192, 192, 0.61);
border-color: rgba(192, 192, 192, 0.61);
}
.uiButtonText, .uiButton input:hover {
color: #fff;
}
/* */
body{
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
- Background: url('http://www.techrum.vn/chevereto/images/2016/06/24/Urhyu.jpg'): Thay đổi ảnh nền theo ý muốn của bạn (phần mũi tên đỏ thứ hai).
- Việc tùy chỉnh font chữ yêu cầu bạn có kiến thức nhất định về web. Bạn có thể liên hệ với mình để được hướng dẫn cụ thể hơn.
Ngô Viết Hùng - Via J2team
Xem thêm:
Last edited by a moderator:
sửa code mới là vấn đề. Mình sửa rồi, nhưng chả viết vào được 
