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
custom.css
root@OpenIAM:/usr/local/openaim/static_data#

2. 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 
docker-compose.уaml
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

3. After changing .yaml file, restart UI docker service.

• docker stack rm ui
• docker ps |grep ui (make sure that container is stopped)
• sudo ./startup.sh

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 ./startup.sh 
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 
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. Add the respective URL for the Stylesheet required to use.

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.