Summary

If you like to change the background in a disabled form in Identity Manager and have it kept when you upgrading to a later version of IM, this PSD will explain how.

System Requirements

• PhenixID Identity Manager 5.1.0 or later installed

I will use a scenario to show how to implement this. The scenario is to change the default background of a disabled control in an edit form. See screenshot below. I like to have it darker.

1. Create an css file to store your custom configuration

1. Open folder drive:\Program Files\PhenixID\IM\customer\extension\web
2. Create a file called forms.css (you can call what you like)
3. Save and close
4. Open folder drive:\Program Files\PhenixID\IM\customer\config
5. Open file DSEditor.properties
6. Add a policy called PERSONAL_FORM_CSS_FILE=forms.css
7. Save and close
8. Restart Identity Manger for the policy to apply

2. Copy css data from the control you like to change

Use Inspect in Google Chrome on a form and copy the css configuration

1. Open Google Chrome and login to Identity Manager
2. Click on a user to open an Edit Form
3. Right click the Edit Form and select in Google Chrome Inspect
4. In Inspect, verify that you are on Elements tab. Click the square with an arrow inside. See A in screenshot below.
5. Click in a control, see below like I do with Display Name control. See A in screenshot below.
6. In Styles tab, find the section that holds the css for the backgrund. See B in screenshot below.
7. Copy everything in this section. See B in screenshot below.

3. Add css data to forms.css

1. Open folder drive:\Program Files\PhenixID\IM\customer\extension\web
2. Open forms.css
3. Paste the css data from previous step (below is an example how it looks for me)

   .tundra .dijitReadOnly *, .tundra .dijitDisabled *, .tundra .dijitReadOnly, .tundra .dijitDisabled, .tundra .dijitDisabledClickableRegion {
   cursor: not-allowed !important;
   border-color: #f5f5f6;
   border: 1px solid rgba(0,0,0,0.3);
   k: ;
   color: #555555;
   background: #e9e9e9 !important;
   }

4. Remove any data not needed and change background color to something different, I choose 999

   .tundra .dijitReadOnly *, .tundra .dijitDisabled *, .tundra .dijitReadOnly, .tundra .dijitDisabled, .tundra .dijitDisabledClickableRegion {
   background: #999 !important}

5. Save and close
6. Hard refresh your browser so the css used will be applied
7. Verify that the color is changed. See screenshot below.