Creating custom CSS

Steps to follow:

  1. Create a folder on server and add all permissions to it:
  • cd usr/local/openiam/
  • sudo mkdir static_data
  • sudo chmod -R 777 static_data/
root@OpenIAM:/# cd /usr/local/openiam/
root@OpenIAM:/usr/local/openaim# sudo mkdir static_data
root@OpenIAM:/usr/local/openaim# sudo chmod -R 777 static_data/
  • And add CSS file in the specified folder. Some examples of CSS files' structure can be found here.
  • cd static_data/
  • ls
root@OpenIAM:/usr/local/openaim# cd static_data
root@OpenIAM:/usr/local/openaim/static_data# ls
  1. Navigate to docker-compose.yaml in UI
  • cd openiam-docker-compose/3.2/ui/
  • sudo nano docker-compose.yaml
root@openIAM:/usr/local/openian/static_data# cd ..
root@openIAM:/usr/local/opcniam# cd openiam-docker-compose/3.2/ui
root@openIAM/usr/local/openian/openiam-docker-compose/3.2/ui# Is
root@openIAM:/usr/local/openiam/openiam-docker-compose/3.2/ui# sudo nano docker-compose.yaml

Add the line below:

  • /usr/local/openiam/static_data/custom.css:/usr/local/tomcat/webapps/static/custom.css

Added line

  1. After changing .yaml file, restart UI docker service.
  • docker stack rm ui
  • docker ps |grep ui (make sure that container is stopped)
  • sudo ./
root@OpenIAM:/usr/local/openiam/openiam-docker-compose# docker stack rm ui
Removing service ui_ui
root@OpenIAM:/usr/local/openiam/openiam-docker-compose# docker ps |grep ui
root@OpenlAM:/usr/local/openiam/openiam-docker-compose# sudo ./
SQL Files exist
Using MariaDB as the database type...
Nothing found in stack: flyway
etcd storage

Note: Check If your CSS file is in UI container.

  • docker exec -it [ui_container_id] bash
  • cd /usr/local/tomcat/webapps/static/
  • ls
root@openIAM:/usr/local/openiam/openiam-docker-compose# docker exec -it dffe7a02ddad bash bash-5.1$ ls
bin dev hone licenses tant proc run srv tap var
data etc lib media opt root sbin sys usr
bash-5.1$ cd /usr/loeal/tancat/vebapps/static
bash-5.1$ cd /usr/local/tancat/vebapps/static/
bash-5.1$ Is
  1. Once UI container is up and running go to Access Control -> Content Provider in Application and select the content provider in use.

  2. Go to URI patterns. URI Patterns

  3. Click Create and create a new pattern in similar way as depicted below. New pattern Authentication rule

  4. Save and check if the pattern was added. Pattern added

  5. Go to Administration -> UI Themes and click edit. Add the respective URL for the Stylesheet required to use. Edit theme

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

  7. Hit Ctrl + F5 to reload cache. The CSS applied, as shown below. Customized webconsole