How to customizing login page in Servicenow

[suryanarayana_p]

Hi Team
How to customizing login page in Servicenow ,OOB Snow Login page is right said  But  We need to Change login section to center of the page

like

[Akhil Vinay Ma1]

Go through below links

how to edit the login page for an instance

I need to customize Service now App login page as my intance has Multi SSO Authentication activated....

[nayanawadhiya1]

Hello,

Can you can create custom login page through CMS (Content Management)

Please refer below video -

Custom Login Page

Goto - 

Content Management-> Configuration Page

Put LoginPage as Clean Login

[Sagar Patro · Accepted solution]

Hi Surya,

I am guessing you are trying to modify the default login page instead of CMS pages. If CMS is the requirement, then above answers might help you. If you are trying to edit the default one then there is no direct way to do it. 

I played around with the instance looking into UI pages and UI macros for modifying the login page form but ended up nowhere. 

There is just one way to do it and that is a workaround and would not recommend unless really needed.

The approach needs a simple UI script:

Name it anything like "loginLoad"

//Check if you are on the login page, on then run it
if(window.location.href.toString().indexOf("welcome.do") > -1) 

{
	
	setTimeout(function() {
		var login_div = document.querySelectorAll("div.login");
		//alert(login_div.length);
		login_div[0].style.margin = "0px auto";
		login_div[0].style.marginTop = "30px";
	}, 150); //Set 150 to a bigger or smaller number based on the needs. 150 is the number of milli seconds after which the script runs.
	
}

RESULT

Good Luck!

Mark the answer Correct and Helpful if it was.

[Davie]

@sagar_patro, this is really helpful.  What I can't seem to find though is to manipulate the sso link: 

<a href="login_locate_sso.do">Single Sign On login (Company Users Only)</a>

Here is a bunch of my attempts:

setTimeout(function() {
var login_div = document.querySelectorAll("div.login");
//alert(login_div.length);
login_div[0].style.margin = "0px 30px";
login_div[0].style.marginTop = "30px";
login_div[0].style.fontSize = "115%";
login_div[A].style.fontSize = "215%";
// login_div.a.style.fontSize = "215%";
// login_div.A.style.fontSize = "215%";
// login_div.href.style.fontSize = "215%";
// login_div[href].style.fontSize = "215%";

// var login_a = document.querySelectorAll("div.login.a");
// //alert(login_div.length);
// login_a.style.fontSize = "255%";
}, 150);

Any ideas?