Assalamualaikum to All,
Good evening guyz. Today I am going to share a custom designed Facebook Login Page. If You know some basic CSS then you can easily edit this custom theme as your own taste and choice.
So let's start having fun. To do this customization we need a tool for our web-browser to bypass the original CSS and run the one we provided.
We will use Stylish for this purpose. Stylish is originally created and developed by UserStyles. This tiny tool helps us to use our own CSS code to customize any website we want.
Main Process:
1. First install stylish for your preferred web-browser. Link is Below:
[] Google Chrome
[] Mozilla Firefox
2. Now restart your browser after finishing the installation of Stylish.
3. Now Click on the icon of Stylish in the right sight of your web-browser and do as below:
[] For Google Chrome:
==> Right click and select Manage All Installed Styles.
==> Now click on Write New Style from the left menu
==> Copy and paste this code in the code writing box.
Code: /* Login PageBackground */
/* Background */
body.fbIndex {
background: url('http://wallpaperswide.com/download/batman_arkham_origins_12-wallpaper-1366x768.jpg');
}
/* Hide all div except logoutmenubar */
.loggedout_menubar_container { background:none !important; }
.fbIndex #globalContainer #dropmenu_container,
.fbIndex #globalContainer #content,
.fbIndex #globalContainer #pageFooter { display: none !important } /* Facebook Logo Hide */
.fb_logo.img.sp_FbRIIaK1AuN.sx_acfc91{
display:none !important;
}
/* No Logout_menu_container */
.loggedout_menubar_container {
height: 0px;
min-width: 0px;
}
/* Menu_Login_Bar Center Position */
.menu_login_container.rfloat._ohf{
position:absolute;
top:100px;
left:400px;
}
.html7magic{
display:none;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(124, 125, 189);
background-image: none;
color: rgb(0, 0, 0);
}
input#pass.inputtext{
position: absolute;
top: 500px;
left: 20px;
}
input#email.inputtext{
position: absolute;
top: 500px;
left: -170px;
}
/* Login Button in Eye */
.uiButton, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover {
background-image:none;
background-color:rgba(25, 25, 25, 0);
border-radius:40px;
width: 20px;
height: 26px;
top:151px;
left:354px;
color:rgba(255, 255, 255, 0);
}
.uiButtonConfirm {
background-color:rgba(255, 255, 255, 0);
color:rgba(255, 255, 255, 0);
}
.uiButtonSuppressed:active{
color:rgba(255, 255, 255, 0);
}
.uiButton{
position:absolute;
}
.uiButton, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover {
border:none;
}
input[type="submit"][id="u_0_l"]{
color:rgba(255, 255, 255, 0);
display:none;
}
input[type="submit"][id="u_0_n"]{
color:rgba(255, 255, 255, 0);
display:none;
}
.login_form_label_field{
display:none;
}==> Now copy the add these links in the specify option and click on add:
1. https://www.facebook.com/ [URL, URLs Starts With, URLs on the domain]
==> Tick mark enable and click on save. [Done !]
[] For Mozilla FireFox:
==> Right click and select Write New Style --> Blank Style.
==> Copy and paste this code in the code writing box.
Code:@-moz-document url("https://www.facebook.com/"), url-prefix("https://www.facebook.com/"), domain("https://www.facebook.com/"), regexp("https://www.facebook.com/") {
/* Login PageBackground */
/* Background */
body.fbIndex {
background: url('http://wallpaperswide.com/download/batman_arkham_origins_12-wallpaper-1366x768.jpg');
}
/* Hide all div except logoutmenubar */
.loggedout_menubar_container { background:none !important; }
.fbIndex #globalContainer #dropmenu_container,
.fbIndex #globalContainer #content,
.fbIndex #globalContainer #pageFooter { display: none !important } /* Facebook Logo Hide */
.fb_logo.img.sp_FbRIIaK1AuN.sx_acfc91{
display:none !important;
}
/* No Logout_menu_container */
.loggedout_menubar_container {
height: 0px;
min-width: 0px;
}
/* Menu_Login_Bar Center Position */
.menu_login_container.rfloat._ohf{
position:absolute;
top:100px;
left:400px;
}
.html7magic{
display:none;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(124, 125, 189);
background-image: none;
color: rgb(0, 0, 0);
}
input#pass.inputtext{
position: absolute;
top: 500px;
left: 20px;
}
input#email.inputtext{
position: absolute;
top: 500px;
left: -170px;
}
/* Login Button in Eye */
.uiButton, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover {
background-image:none;
background-color:rgba(25, 25, 25, 0);
border-radius:40px;
width: 20px;
height: 26px;
top:151px;
left:354px;
color:rgba(255, 255, 255, 0);
}
.uiButtonConfirm {
background-color:rgba(255, 255, 255, 0);
color:rgba(255, 255, 255, 0);
}
.uiButtonSuppressed:active{
color:rgba(255, 255, 255, 0);
}
.uiButton{
position:absolute;
}
.uiButton, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover {
border:none;
}
input[type="submit"][id="u_0_l"]{
color:rgba(255, 255, 255, 0);
display:none;
}
input[type="submit"][id="u_0_n"]{
color:rgba(255, 255, 255, 0);
display:none;
}
.login_form_label_field{
display:none;
}
}
==> Give a name and Click Save.
Codes in Notepad file:
[] Google Chrome
[] Mozilla FireFox
N.B.: In this Custom Login Page the login button is removed and the right eye of joker is in stead the Login Button.
Pictures:
------------ Hyp3rAc7iv3
Post a Comment