IdentityIQ 8.4
Currently have this use case where we need to edit the SailPoint icon to reflect a custom icon, would like to check if there are any existing solutions for this?
We would like to customise to replace the SailPoint icon highlighted in yellow in above screenshot.
@shijingg Please use this document
Branding IdentityIQ - Compass (sailpoint.com)
Refer this section : Image-based Branding Components
File you need to change : ui-custom.css
You can also create a new image and paste under this location : \web\ui\images\TopLogo1.png
Hi Kumar,
We have checked and we see that in our /ui/images directory, the file is already replaced before. However, it is still not showing up. Are there any other next steps required?
Do we need to made any edits in File you need to change : ui-custom.css? If yes, please advice.
HI @shijingg , have you tried to check it in the incognito mode.
Try to access the sailpoint from the incognito window. If its updated, then clear the cache from the browser.
some time due to browser cache it might not reflect even after renaming .pnd in directory, try opening in incog browser you will have clear picture.
Hi @Rakesh007, yes we tested in incognito as well. FYI, we are using Microsoft Edge.
And make sure your custom logo name should be same as TopLogo1.png when you replace it.
I am attaching screenshot below for your reference:
Hi @vedeepak would like to check where can we find this menu.xhtml? Currently in our repo we do not have this file.
could you please share you screen shot where you changed your logo name to TopLogo1.png
“menu.xhtml” will be present in the ROOT folder. I am not sure about your repository folder structure may be you can check in “web” folder in your Repo
Or make a search using Notepad++ into your Repo. I make a search like below
Make sure update directory path with Repo.
Or If you have a server access to your project you can directly check into ROOT folder
this will be on your webapps/IdentityIq/menu.xhtml
Try to complete logout and login again. pls make sure it’s properly deployed.
You don’t need to change any file if you are replacing with same name,
Here what document said.
“These images are specified in core product .xhtml files. The recommended approach for changing these images in the UI is to replace the image files in the ui/images directory with custom images for the installation, using the same image file names. This avoids having to change the .xhtml files to point to different image files, simplifying the upgrade process by minimizing the need to edit those files each time.”
Update loginInclude.xhtml file with the updated images path:
<div class="navbar-header">
<div class="nav-brand">
<img src="#{base.requestContextPath}/ui/images/<<img.png>>" alt="#{msgs.ui_sailpoint_logo}"/>
</div>
check below blog
@shijingg are you able to solve it?
If we are to deploy the same code to different environment, is it possible to use different .png file?
@fionali I think you have requirement like to change the logo based on environment.
One option i can think, in build folder ( ssd ) /scripts/build.filelayout.xml
We have some code like
<!-- Added 2012-02-14 for automating branded IIQ splash screens. -->
<!-- Copy in the appropriate branding screen based TARGET environment or -->
<!-- copy in the appropriate branding screen based on what host we run on. -->
<!-- If you want to setup IIQ from this build w/ correct branding add your -->
<!-- login.gif.TARGETNAME to the web/images directory or -->
<!-- login.gif.HOSTNAME to the web/images directory. -->
<if>
<available file="web/images/login-${target}.gif"/>
<then>
<copy file="web/images/login-${target}.gif" tofile="${build.iiqBinaryExtract}/images/login.gif"
overwrite="true" failonerror="false"/>
</then>
</if>
<if>
<available file="web/images/headerSPLogo-${target}.jpg"/>
<then>
<copy file="web/images/headerSPLogo-${target}.jpg"
tofile="${build.iiqBinaryExtract}/images/headerSPLogo.jpg" overwrite="true" failonerror="false"/>
</then>
</if>
<if>
<available file="web/images/login-${env.HOSTNAME}.gif"/>
<then>
<copy file="web/images/login-${env.HOSTNAME}.gif" tofile="${build.iiqBinaryExtract}/images/login.gif"
overwrite="true" failonerror="false"/>
</then>
</if>
<if>
<available file="web/images/headerSPLogo-${env.HOSTNAME}.jpg"/>
<then>
<copy file="web/images/headerSPLogo-${env.HOSTNAME}.jpg"
tofile="${build.iiqBinaryExtract}/images/headerSPLogo.jpg" overwrite="true" failonerror="false"/>
</then>
</if>
<!-- end support for automated branding images. -->
You can create image in your build folder under (web/ui/images) name like
TopLogon1-dev.png
TopLogon1-qa.png
TopLogon1-pd.png
and add one more entry in build.filelayout.xml around same location.
entry should be like below,
<if>
<available file="web/ui/images/TopLogo1-${target}.png"/>
<then>
<copy file="web/ui/images/TopLogo1-${target}.png" tofile="${build.iiqBinaryExtract}/ui/images/TopLogo1.png"
overwrite="true" failonerror="false"/>
</then>
</if>
just try and let us know if that works Or not ?
In my lab i tested and it worked.
Thanks,
Pravin
@fionali pls let us know if you are good here