Customizing the login button

SwissID requires integrators to style the "Login with SwissID" button correctly. The below mentioned files can be obtained from SwissID. The following steps shows an example on how this requirement could be accomplished.

1. Add "Login with SwissID" for the login page to the string resources. (Refer to Changing text elements for information about how to update the language files)

strings_lang.properties



# Login Page
loginpage.provider-login.swissId.provider-name = Login with SwissID

2. Add the following SwissID fonts to the fonts folder (Refer to Customizing UI (look and feel) of the JSP-Loginapp  for information about how to add fonts).
• SwissSignCircularWeb-Bold.eot
• SwissSignCircularWeb-Bold.woff
• SwissSignCircularWeb-Bold.woff2
3. Add the SwissID Logo connect.svg to the images folder (Refer to Customizing UI (look and feel) of the JSP-Loginapp  for information about how to add images)
4. Add the following custom css_custom-instance.scss


@font-face {
    font-family: "SwissSignCircularWeb";
    src:url("../fonts/SwissSignCircularWeb-Bold.eot");
    src:url("../fonts/SwissSignCircularWeb-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/SwissSignCircularWeb-Bold.woff2") format("woff2"),
    url("../fonts/SwissSignCircularWeb-Bold.woff") format("woff");
    font-weight: bold;
}

// fixed sized (non responsive) SwissID button 
#swissIdLoginButton {
	display: inline-block;
	margin: 0;
	overflow: visible;
	font-family: 'SwissSignCircularWeb', sans-serif;
	font-size: 18px;
	border: none;
	border-radius: 2px;
	padding: 15px 25px;
	padding-bottom: 11px;
	text-decoration: none;
	outline: none !important;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	padding-left: 55px;
	padding-right: 15px;
	height: 50px;
	background: #eb0000 url('../images/connect.svg') 0 0 no-repeat;
	width: unset;
	&:focus {
		outline:0 !important;
	}
}

5. Refer to Customizing Loginapp Look & Fee for more information on how to deploy the above changes.

Be aware that the most current requirements of SwissID should be followed.