Creating custom CSS

Creating a custom CSS file allows you to tailor the appearance and behavior of an application beyond the default styling provided out of the box by OpenIAM. This can help align the user interface with your corporate branding requirements, improve usability and accessibility, or adapt the layout to your specific business needs and workflows.

In case this is what you need, OpenIAM provides a possibility to customize the look and field of your application using CSS file, as described below.

Docker environment

1. Create a folder on server and add all permissions to it.

root@OpenIAM:/# cd /usr/local/openiam/
root@OpenIAM:/usr/local/openiam# sudo mkdir static_data
root@OpenIAM:/usr/local/openiam# sudo chmod -R 777 static_data/

And add CSS file in the specified folder. Some examples of CSS files' structure can be found here.

root@OpenIAM:/usr/local/openiam# cd static_data
root@OpenIAM:/usr/local/openiam/static_data# ls
custom.css
root@OpenIAM:/usr/local/openiam/static_data#

2. Navigate to the UI service compose file.

root@OpenIAM:/usr/local/openiam/static_data# cd ..
root@OpenIAM:/usr/local/openiam# cd conf/starter/services
root@OpenIAM:/usr/local/openiam/conf/starter/services# ls
ui.yaml
root@OpenIAM:/usr/local/openiam/conf/starter/services# sudo nano ui.yaml

Add the following line: /usr/local/openiam/static_data/custom.css:/usr/local/tomcat/webapps/static/custom.css

3. After changing the .yaml file, redeploy the UI stack.

root@OpenIAM:/usr/local/openiam/conf/starter# docker stack deploy --compose-file services/ui.yaml openiam

root@OpenIAM:/usr/local/openiam/conf/starter# docker ps | grep ui
dffe7a02ddad   openiam/ui:latest ...
root@OpenIAM:/usr/local/openiam/conf/starter# docker exec -it dffe7a02ddad bash
bash-5.1$ cd /usr/local/tomcat/webapps/static/
bash-5.1$ ls
custom.css
bash-5.1$

4. Once UI container is up and running go to Access Control > Content Provider in Application and select the content provider in use.

5. Go to URI patterns.

6. Click Create and create a new pattern in similar way as depicted below.

7. Save and check if the pattern was added.

8. Go to Administration > UI Themes and click edit. In the Stylesheet URL field, enter the web-accessible path to your CSS file, e.g. /openiam-ui-static/bootstrap-ui/css/custom.css.

9. Go to Content provider and find the UI theme line. Add the theme edited at the step above.

10. Hit Ctrl + F5 to reload cache. The CSS applied, as shown below.

RPM environment

1. Create the directory structure.

sudo mkdir -p /data/openiam/conf/ui/static/custom/bootstrap-ui/css
sudo mkdir -p /data/openiam/conf/ui/static/custom/images
sudo chown -R openiam:openiam /data/openiam

2. Add your CSS file.

Place your stylesheet at:

/data/openiam/conf/ui/static/custom/bootstrap-ui/css/custom.css

The file must be named custom.css. Custom images can be placed under the images/ directory at the same level.

3. Restart the UI static service

sudo systemctl restart openiam-ui-static

4. Configure UI theme and Content provider

Follow Steps 4–9 from the Docker section above — the UI Theme, Content Provider, and URI Pattern configuration is the same for RPM.

Tip: If the CSS does not apply after restarting, verify directory ownership (sudo chown -R openiam:openiam /data/openiam), restart the service again, and test in a browser incognito window or with a hard reload (Ctrl+F5).