Clarity

Hi All,

Using the information in
97504278

i have been able to include the company logo on the login screen.

Has anyone changed the logo in the header section? If so, can you please share where the required change needs to be made.
(The names of the tags in the clarity.min.css file or other css files in the same folder dont give it away).

Thanks,
Akhil

Since V13.0 we can change that part of the application within the GUI - it is just one of the values that you can amend in the UI themes CSS settings.

"#ppm_header_logo" is the tag.

This is all documented in the manuals from V13.0 onwards - no "hacking" involved. cool)

You need to convert the image to base64 and include it in the UI Theme CSS:

This is what we have:

#ppm_header_logo_small {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAE40lEQVRIDQXBT49dZR0A4Of3nj/3zp2Zduy0gB0KWDQ1SosuiIFEEklMDOB30IUL134BPoXxG6BxYYwL3aiJSxNjQtAEqRQCSGkLnc5M595zzznvz+eJxeGNBAAAmUwbMW/plkRDHRm3slvS9ESAHFNuEsROgNymHCnLEH0QAABACwAgk2lgsSufumW68nV2LhBBrawfae++xxd3GDa0C/1Ra/GNTvlKo/RBkBPzWTXe2Rpuj3JLLAIAQCwObySAWqmj+txLphdel3uX6RZkIolCEuOae59Y3v29S6/8T3v9grIMmmBOoASoQzV+NDr5w2PbjyfRBQCIxeGNBFmZR/XWj40vvsk8MW/JRFAaciaTKFgqO2uXr71td++/6rggiCbknCQgKHvF9GDyxS+Pjfer0geAAhDToD7/ivHWG4wbpg2ZND1NJ4bHaGh7ciYfqydLD26/aXt+UbMzgfl0piG6IJHUk6p7orV6eUfMCQBaMG/l7iXzt39EJnVG0C6Ue7c1//qTOL3HzkXzzR+bn7rBtKFdq8NTHp/dNP/nz07/Osshlf3iwhu7+uu93CSo29Qftcp+UQeiAVoRTFv12nfVC08yPgZKy+ZM94/fcv827YqHn2qHc/WHv5A7+0wje62zT67Z/G5tPk7aVv1wklM6/PmB0hU5JokuRItNIkCrznRL9cp1olATaBeaT9/l5C6LfaLQXmD9UPe3X7HYpVaZhZNT9Sw0h42ybCiN9kKRW/QASCQA0Kozi5W6c0AdCSSaVqyPGdf0e4AgiQcfyKESLK42Fi/taK9e1BwUzX4jlqGsipxSjgkAAABaOdOtWB1QZwQSyEomAgkg5057pdh/fdfyhaVYEiWoZBBB1mQCAAAAoAWSTAAAAABQt6l7snHppxd1R616VuUGPfVxtf1ga/vBSLD3g11lVeSYAAAAWtEyblifsH+FeQtk0iwoLRJIIqr913Z11zr1eKYhSjj/+9rZX85N96scUnu52P3+Lg1GAAAAilIYzpX1I5qWRGAazIfPsrrIvAU5Vc1B0T6zkuuZIBbF5r3B8W/OjJ9X0YfoQ9krNEkCAAAARWmY1sr922QSBcE0yEvPmJ/7nqgT41rMW/XoRXXvkHkCEWn6bJLbVLqQM3VTLb7Vaw4auU0AAADQyqRdKp++I05ek3uHjBtg2phuviGvPK88/FjdO1KfvS6nt5W+mpETy5sL63cG48ez6Nh9eWnv1RUTAAAAAC1oOnF6T/vuH40v/4TSUkeyIsxP3zI/8x1qZegMJ09b7X6IXg6pvdI6/NmB7UejshP6Z3vRhTpUAAA5p3kza3dbgqZdXX4LlEY8uKPUSf3qN2k6shKoE/NEVhTb4ar+4BP9zrHMhonSF91Rp73UijaMd0d5npr9hiDaMB/PfJYObuwbvhzVKTXt6vJbIILSiM/f0zy4o+4eim5F09GvaHsyhK28f2L+5/v6vQfKfq+sQvQhp2RIw/uDR78+1ewX3bVWDslMBsvsHb16xZf/PjU8nMTi8EYCgEymgdJwcFU9OFL3Dokizh9pzu7z5Yecb1l2+mda/dc62pCns/Gz2XBnZKZ9otFcKNQECvWYpi+2Dyd1rmJxeCMBAADMW6atqBOJ0simo+2JQpLbVDdJpmhC9CEWAXLCnABAS9ZU2kLwf2dpZf05P+LyAAAAAElFTkSuQmCCXXXX);
margin: 0px 0px 0px 15px;
width: 35px;
height: 35px;

You need to convert the image to base64 and include it in the UI Theme CSS:

This is what we have:

#ppm_header_logo_small {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAE40lEQVRIDQXBT49dZR0A4Of3nj/3zp2Zduy0gB0KWDQ1SosuiIFEEklMDOB30IUL134BPoXxG6BxYYwL3aiJSxNjQtAEqRQCSGkLnc5M595zzznvz+eJxeGNBAAAmUwbMW/plkRDHRm3slvS9ESAHFNuEsROgNymHCnLEH0QAABACwAgk2lgsSufumW68nV2LhBBrawfae++xxd3GDa0C/1Ra/GNTvlKo/RBkBPzWTXe2Rpuj3JLLAIAQCwObySAWqmj+txLphdel3uX6RZkIolCEuOae59Y3v29S6/8T3v9grIMmmBOoASoQzV+NDr5w2PbjyfRBQCIxeGNBFmZR/XWj40vvsk8MW/JRFAaciaTKFgqO2uXr71td++/6rggiCbknCQgKHvF9GDyxS+Pjfer0geAAhDToD7/ivHWG4wbpg2ZND1NJ4bHaGh7ciYfqydLD26/aXt+UbMzgfl0piG6IJHUk6p7orV6eUfMCQBaMG/l7iXzt39EJnVG0C6Ue7c1//qTOL3HzkXzzR+bn7rBtKFdq8NTHp/dNP/nz07/Osshlf3iwhu7+uu93CSo29Qftcp+UQeiAVoRTFv12nfVC08yPgZKy+ZM94/fcv827YqHn2qHc/WHv5A7+0wje62zT67Z/G5tPk7aVv1wklM6/PmB0hU5JokuRItNIkCrznRL9cp1olATaBeaT9/l5C6LfaLQXmD9UPe3X7HYpVaZhZNT9Sw0h42ybCiN9kKRW/QASCQA0Kozi5W6c0AdCSSaVqyPGdf0e4AgiQcfyKESLK42Fi/taK9e1BwUzX4jlqGsipxSjgkAAABaOdOtWB1QZwQSyEomAgkg5057pdh/fdfyhaVYEiWoZBBB1mQCAAAAoAWSTAAAAABQt6l7snHppxd1R616VuUGPfVxtf1ga/vBSLD3g11lVeSYAAAAWtEyblifsH+FeQtk0iwoLRJIIqr913Z11zr1eKYhSjj/+9rZX85N96scUnu52P3+Lg1GAAAAilIYzpX1I5qWRGAazIfPsrrIvAU5Vc1B0T6zkuuZIBbF5r3B8W/OjJ9X0YfoQ9krNEkCAAAARWmY1sr922QSBcE0yEvPmJ/7nqgT41rMW/XoRXXvkHkCEWn6bJLbVLqQM3VTLb7Vaw4auU0AAADQyqRdKp++I05ek3uHjBtg2phuviGvPK88/FjdO1KfvS6nt5W+mpETy5sL63cG48ez6Nh9eWnv1RUTAAAAAC1oOnF6T/vuH40v/4TSUkeyIsxP3zI/8x1qZegMJ09b7X6IXg6pvdI6/NmB7UejshP6Z3vRhTpUAAA5p3kza3dbgqZdXX4LlEY8uKPUSf3qN2k6shKoE/NEVhTb4ar+4BP9zrHMhonSF91Rp73UijaMd0d5npr9hiDaMB/PfJYObuwbvhzVKTXt6vJbIILSiM/f0zy4o+4eim5F09GvaHsyhK28f2L+5/v6vQfKfq+sQvQhp2RIw/uDR78+1ewX3bVWDslMBsvsHb16xZf/PjU8nMTi8EYCgEymgdJwcFU9OFL3Dokizh9pzu7z5Yecb1l2+mda/dc62pCns/Gz2XBnZKZ9otFcKNQECvWYpi+2Dyd1rmJxeCMBAADMW6atqBOJ0simo+2JQpLbVDdJpmhC9CEWAXLCnABAS9ZU2kLwf2dpZf05P+LyAAAAAElFTkSuQmCCXXXX);
margin: 0px 0px 0px 15px;
width: 35px;
height: 35px;

This is all documented in the manuals from V13.0 onwards - no "hacking" involved.

That would be CA Clarity PPM_Studio_Developer Guide under Application Page Header Examples

If you look at the example above to change the logo still takes some work.

Martti K.

another_martink wrote:

That would be CA Clarity PPM_Studio_Developer Guide under Application Page Header Examples

If you look at the example above to change the logo still takes some work.

Yes thats the worked example section (under UI Themes › Custom UI Themes), but it really is not very hard to change the logo ; create a new theme (as a copy of an old theme), change the info against #ppm_header_logo - and you are done!

(encoding your image as a base64 string might seem complex, but as the manual says ; "Free tools are available on the Internet that let you convert an image into a base64 string." (eg here)

(encoding your image as a base64 string might seem complex, but as the manual says ; "Free tools are available on the Internet that let you convert an image into a base64 string." (eg here)

Well sort of, don't you call the thread where nobody could do the base64 encoding?

Martti K.

^ not that I recall.

There is this thread where Rob has some problem with the image size ; V13 UI Themes - Main Menu Bar location

I was thinking more of these
100049804
97504787

but as you know I am not a teche.

Martti K.

OK yeah - but those two threads (and all the complicated "hacking around" stuff) are concerned with the login page - which we still do not have a simple way of customising. :sad

The Q in this thread was specifically about the image in the page header (i.e. on every full screen in the v13 application) and that IS a fully supported (and easy :grin:) thing to change - the OP had obviously missed this as they were discussing a "hack" solution for this when one is just not required.

Thanks everyone for your inputs. You guys pointed me to an area in v13 that I have never delved into before :)

I followed the below steps, but did not get the expected results (i.e. the logo did not change)

1) Created a new theme.
2) Copied the css of the Default theme into this new theme.
3) Changed the image coded for #ppm_header_logo
4) Made this new theme as the default theme of Clarity.

However, the image in the top left corner did not change though. It still showed the CA logo. I tried clearing out the cache and then restarted the apps, but nothing helped.

I also tried changing other things (like product name #product_header_name, .ppm_workspace_bg etc.) but none of these changes were reflected.

Am I missing something?

Rgds,
Akhil

Would you like to to share the bas64 encoded logo image file you tried to display.

Martti K.

Hi Martti,

Attached is the CSS for the new theme i created.

I have changed the following in the file:
1) .ppm_workspace_title
2) .ppm_page_bg
3) #ppm_header_product
4) #ppm_header_logo
5) #ppm_header_logo_small

None of these changes are getting reflected.

Rgds,
Akhil

None of these changes are getting reflected.

Well I just pasted your CSS details into a new UI theme, set that as my default and things changed. :unsure:

Has any of your "hacking" of the server files (which you mention in your first message) "broken" your installation do you think - can you try this on a "clean" install? :wacko:

--

But I don't think your image encoding is right - I just get a empty box as the page logo when I use your CSS - I do get the "My Clarity" text OK but not any images.

Try going back to the default CSS, and changing one value at a time until it works?

.

So you established that it works. Thanks, Now I don't have to test that. Which Clarity version?

Martti K.

another_martink wrote:

Which Clarity version?

That was in vanilla v13.0. Unless there is a bug (that we don't know about) in later versions it all should "just work"? I suspect any "server file hacking" that has happened might have broken stuff though; hence my suggestion about a "clean install".

(testing that css file took me about 30seconds though; so don't let that put you off! :tongue )

Tired that in 13.1.0.0248.
Took me considerably longer, maybe the next time ti will go under one minute.

The same results as you got.

Martti K.

Thanks for testing it out Dave/Martti. And sorry for the delay in my reply.

Yes, i could not publish the company logo on this forum, so i used a blank blue color jpg :)

While testing, I noticed that the changes that i make to the CSS are getting reflected for a set of users, but not all. Is it anything to do with Partitions?

I have been told that our organisation had partition models when Clarity was initially implemented, but they were later deactivated. I tried changing the UI theme of the 3 inactive partition models as well to this new one, but nothing changed.
The changes still appear for only a limited set of users.

Rgds,
Akhil

Thanks for testing it out Dave/Martti. And sorry for the delay in my reply.

Yes, i could not publish the company logo on this forum, so i used a blank blue color jpg :)

While testing, I noticed that the changes that i make to the CSS are getting reflected for a set of users, but not all. Is it anything to do with Partitions?

I have been told that our organisation had partition models when Clarity was initially implemented, but they were later deactivated. I tried changing the UI theme of the 3 inactive partition models as well to this new one, but nothing changed.
The changes still appear for only a limited set of users.

Rgds,
Akhil

If the themes have been changed for all the partitions, caches cleared, then it could be the browser caches.
Is it single server with not load balancer?
My understanding is that a user cannot choose a personal theme like they can do personal configuration of views.


Martti K.

It is good for you to ask a designer to create an image in a smaller size with the logo you want. Then you create the image and change de code in UI as people said above.