Custom Styles

You can customize the Interface of Secure Login with User CSS.
This includes using another icon set instead of the default Secure Login Artwork.

You need to edit a file called userChrome.css. Follow the explanations on the linked article on how to do this.

According to which icons you want to replace you need the following set:

Put these icons in the same folder as the file userChrome.css.

Now inside the file userChrome.css add the following CSS code to override the default Secure Login icon Artwork:


/*The toolbar button icon*/
#secureLoginButton,
.secureLoginButton {
list-style-image: url('custom-icon.png') !important;
}
/*The disabled toolbar button icon*/
#secureLoginButton.secureLoginButtonDisabled,
.secureLoginButtonDisabled {
list-style-image: url('custom-icon-disabled.png') !important;
}
/*The small toolbar button icon and the statusbar and menu icon*/
toolbariconsize="small" #secureLoginButton,
toolbariconsize="small" .secureLoginButton,
.secureLoginIcon {
list-style-image: url("custom-icon-small.png") !important;
}
/*The disabled small toolbar button and disabled statusbar icon*/
toolbariconsize="small" #secureLoginButton.secureLoginButtonDisabled,
toolbariconsize="small" .secureLoginButtonDisabled,
.secureLoginIconDisabled {
list-style-image: url("custom-icon-small-disabled.png") !important;
}
/*The settings menuitem icon*/
.secureLoginSettingsIcon {
list-style-image: url("custom-icon-settings-small.png") !important;
}
/*The help menuitem icon*/
.secureLoginHelpIcon {
list-style-image: url("custom-icon-help-small.png") !important;
}
/*The user icon for the user selection*/
.secureLoginUserIcon {
list-style-image: url("custom-icon-user-small.png") !important;
}


/*The toolbar button icon for the default Mac theme*/
toolbariconsize="small" #secureLoginButton,
toolbariconsize="small" .secureLoginButton,
#secureLoginButton,
.secureLoginButton {
list-style-image: url('custom-icon-mac.png') !important;
}

/*The active toolbar button icon for the default Mac theme*/
toolbariconsize="small" #secureLoginButton:hover:active,
toolbariconsize="small" .secureLoginButton:hover:active,
#secureLoginButton:hover:active,
.secureLoginButton:hover:active {
list-style-image: url('custom-icon-active-mac.png') !important;
}

/*The disabled toolbar button icon for the default Mac theme*/
toolbariconsize="small" #secureLoginButton.secureLoginButtonDisabled,
toolbariconsize="small" .secureLoginButtonDisabled,
#secureLoginButton.secureLoginButtonDisabled,
.secureLoginButtonDisabled {
list-style-image: url('custom-icon-disabled-mac.png') !important;
}

/*The disabled active toolbar button icon for the default Mac theme*/
toolbariconsize="small" #secureLoginButton.secureLoginButtonDisabled:hover:active,
toolbariconsize="small" .secureLoginButtonDisabled:hover:active,
#secureLoginButton.secureLoginButtonDisabled:hover:active,
.secureLoginButtonDisabled:hover:active {
list-style-image: url('custom-icon-disabled-active-mac.png') !important;
}

Remove the CSS declarations for the icons you don't want to replace.