Changing the company logo
To change the company logo on all user facing pages, perform the following steps. The logo displayed in the Administration Console is not changed.
To change the company logo on user facing pages
-
From the Cloud Access Manager Administration Console, click Settings | Customize Appearance and upload your company logo.
NOTE: The logo should be at least 160x160px in size to ensure there is no loss of image quality.
-
If you have selected Enable advanced customization mode you need to complete steps 3 to 6 to update your customized theme.css file with the size of the logo.
-
Click Download Current Customization CSS to download the current theme.css file.
-
To update the logo size used on the login page, locate the following rule in the theme.css file and update the width declarations to the required width for your logo.
loginLogo {
background-image: url("/_WTStatic/public/customization/companylogo.png");
background-repeat: no-repeat;
height: 160px;
width: 160px;
margin: 60px auto 50px auto;
}
NOTE: The logo is automatically resized to a height of 160 pixels when uploaded.
-
To update the logo size used in the header bar on the portal pages, locate the following rule in the theme.css file and update the width declaration to the required width for your logo.
#custom .cui-application-frame .oi-logo {
width: 30px;
background-image:url("/_WTStatic/public/customization/companylogo.png");
height: 30px;
background-size: auto 30px;
background-repeat: no-repeat;
}
- Finally upload the modified theme.css file and clock Save.
Using an alternative cascading style sheet for a single authenticator
By default all users will see the same colors and styling regardless of which authenticator they have used to authenticate. These steps describe how to configure an authenticator to use an alternative cascading style sheet.
To change the CSS for a single authenticator
- From the Cloud Access Manager Administration Console, click Settings | Customize Appearance.
- Select Enable advanced customization mode and click Save.
- Click Authenticators and then click Edit on the authenticator that will use the alternative CSS.
- Click the Customization tab and select Customize this authenticator.
- Click Download Current Customization CSS to download the current theme.css file.
- Amend the CSS file with your changes and then upload it.
- Click Finish to save your changes.
Using an alternative company logo for a single authenticator
By default all users will see the same company logo regardless of which authenticator they have used to authenticate. These steps describe how to configure an authenticator to use an alternative company logo.
To change the company logo for a single authenticator
-
From the Cloud Access Manager Administration Console, click Settings | Customize Appearance.
-
Select Enable advanced customization mode and click Save.
-
Click Authenticators and then click Edit on the authenticator that will use the alternative company logo.
-
Click the Customization tab and select Customize this authenticator.
-
Click Download Current Customization CSS to download the current theme.css file.
-
Upload the logo to use for this authenticator.
NOTE: The logo should be at least 160x160px in size to ensure there is no loss of image quality.
-
In the CSS, locate the following rule used to display the logo on the login page:
loginLogo {
background-image: url("/_WTStatic/public/customization/companylogo.png");
background-repeat: no-repeat;
height: 160px;
width: 160px;
margin: 60px auto 50px auto;
}
-
Update the background-image declaration to reference the logo path for the authenticator. The logo path can be found in the help text on the Customize Authenticator page and is in the following format where <id> is the Authenticator ID:
/_WTStatic/public/customization/auth-<id>/companylogo.png
-
Update the width declaration to the required width for your logo on the login page.
-
Locate the following rule used to display the logo in the Header bar on the portal pages:
#custom .cui-application-frame .oi-logo {
width: 30px;
background-image:url("/_WTStatic/public/customization/companylogo.png");
height: 30px;
background-size: auto 30px;
background-repeat: no-repeat;
}
-
Update the background-image declaration to reference the logo path for the authenticator. The logo path can be found in the help text on the Customize Authenticator page and is in the following format where <id> is the Authenticator ID:
/_WTStatic/public/customization/auth-<id>/companylogo.png
-
Update the width declaration to the required width for your logo in the header bar.
-
To support users of Internet Explorer 8, locate the following rule and update the logo path in the filter declaration to reference the logo path for the authenticator.
#custom .cui-application-frame .oi-logo {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_WTStatic/public/customization/companylogo.png', sizingMethod='scale');
background-image: none;
}
-
Finally upload the modified theme.css file and click Finish.
Using an alternative company name for a single authenticator
By default all users will see the same company name regardless of which authenticator they have used to authenticate. These steps describe how to configure an authenticator to use an alternative company name.
To change the company name for a single authenticator
- From the Cloud Access Manager Administration Console, click Settings | Customize Appearance.
-
Select Enable advanced customization mode and click Save.
-
Click Authenticators and then click Edit on the authenticator that will use the alternative company name.
-
Click the Customization tab and verify that Customize this authenticator is selected.
-
Click Download Current Customization CSS to download the current theme.css file.
-
Locate the following two rules in the theme.css file to change the name displayed in the Header bar and on the login page:
#custom .cui-application-title:before {
content: "One Identity Cloud Access Manager";
}
.loginTitle:before {
content: "One Identity Cloud Access Manager";
}
-
Update both content declarations to contain the required company name.
-
Finally upload the modified theme.css file and click Finish.