CAS Web UI Changes

[Jeremiah Garmatter]

Hello all,

I've been working on an upgrade to CAS 6.2 and I am ready for some UI changes.

I created a src/main/resources directory, with a static/css and static/images directory within it. I copied the messages.properties file as well as cas.css and successfully modified them as I wished.

Now I wish to change the favicon.ico and the cas-logo to be my organization's logo. I tried dropping the logo into the static/images folder with the name "cas-logo.png" hoping gradle would place my new one over the cas-logo. I tried the same with favicon.ico under the static folder to no avail.

How should I go about adding my organization's logo and icon?

[Jeremiah Garmatter]

Interestingly, on firefox the favicon.ico is used on the site but on chrome the default cas favicon is used.

Another note: I decided to try the header.html fragment to change the logo. I took out the cas svg paths and placed an <img> tag referencing my logo but it isn't loading into either chrome or firefox.

[Jeremiah Garmatter]

I tried loading a different image from another server and the picture loaded in immediately. After checking in Chrome's "Network" panel (ctrl + shift + i), I found I was getting a 404 error when trying to load the image, CAS was attempting to find the image at XXXXX/static/images/logo.png, which isn't a real page (hence the 404). I ended up adding a docBase to tomcat that points to a directory outside of tomcat and stored my images there. Then i told the header.html fragment where the images are now being stored and it loaded up perfectly after a rebuild.

[Hal Deadman]

I have logo.png in src/main/resources/static/images/logo.png and my customized header.html in src/main/resources/templates/fragments/header.html contains:

<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-center">
        <span class="cas-brand mx-auto">
            <span class="sr-only">CAS</span>
            <a th:href="#{logo.link}"><img th:src="@{/images/logo.png}" title="Company Name" height="55" /></a>
        </span>
</section>

and that works.