Self Service Password Reset includes a flexible theme mechanism that allows for maximum customization of the look and feel of Self Service Password Reset for your users. Through customization you can change the look and feel by:
Use one of the provided themes instead of the default theme
Embed a cascading style sheet
Embed a mobile cascading style sheet
Embed JavaScript
Upload a custom bundle (include graphics)
To make the customization you must be a web developer and have a good understanding of the following topics:
Cascading style sheets: You must know how to create and use cascading style sheets. For more information, see What is CSS? on the www.w3schools.com website.
JavaScript: You must understand and know how to write JavaScript. For more information, see JavaScript Tutorial on the www.w3schools.com website.
NOTE:The Self Service Password Reset JavaScript environment is not documented and might change from version to version. Using this feature should be done only in an environment where development resources are available to maintain the custom JavaScript over time. If you do need help writing JavaScirpt, please contact consulting services. For more information, see NetIQ Consulting.
Use the following information to create and implement a custom theme.
The custom resource bundle is a ZIP file that contains a specific directory structure, style sheets for desktops and laptops, and any graphics you want to use in the theme. You must create the directory structure with specific folder names for the custom resource bundle to work.
The custom resource bundle must always be themes.zip. It must contain one or more subdirectory that is the name of your custom theme. In this example, it is pony. Each theme sub-folder contains a minimum of two files:
style.css: The style sheet that defines the custom theme for desktop and laptop computers.
mobileStyle.css: The style sheet that defines the custom theme for mobile devices.
The custom theme subdirectory might contain additional files if the style sheets require these files. For example, if you want to add a graphic to the theme, you must include that file in the custom theme subdirectory.
For detailed instructions, watch How to Create a Custom Theme in Self Service Password Reset. For an example of the contents of the style sheet, see Reference for Self Service Password Reset CSS Syntax.
After you have created the custom theme subdirectory and all supporting files, you must zip up the themes directory so you can import the custom themes in the Configuration Editor.
After you have created the custom resource bundle and have the themes.zip file created, you must upload the file in the Configuration Editor and set a value for the custom theme to become global.
To implement the custom resource bundle:
Log in to Self Service Password Reset at https://dns-name/sspr as an administrator.
In the toolbar, click your name.
Click Configuration Editor.
Click Settings > User Interface > Look & Feel.
Under Custom Resource Bundle, click Upload File.
Under Interface Theme, click Set Value.
Specify the name of the custom theme subdirectory.
In the toolbar, click Save changes.
Self Service Password Reset takes you to the applications page and you can see the new custom theme.
If you have more than one custom theme, you can specify the URL parameter theme. For example, https://www.example.com:@PwmContextPath@?theme=pony
You can also embed style sheets or a JavaScript to customize the theme. Follow the help for details on how to customize those options.
The following is an example of the default style.css file. We provide this for reference so you can understand the style.css file.
#header-company-logo {
background: url("banner-220x60.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
background-position: center center;
width: 220x;
height: 60px;
margin: 0 auto;
}
Here is the explanation for the different ID selectors for the CSS file.
#header
Common Style Attributes:
background
Example:
#header {
background: #6666BB; /* Light purple header. */
}
#header-company-logo
Common Style Attributes:
background
Example: background: url("picture.ipg") no-repeat scroll 0 0 rgba(0,0,0,0):
background-position
Example: background-position: center center;
width
Example: width 220px;
height
Example: height: 60px;
margin
Example margin:0 auto;