967 | | |
| 967 | == Customization and Branding == |
| 968 | The default install of the IdP login screen will display the Shibbolethlogo, a default prompt for username and password, and text saying that this screen should be customized. It is recommand to customize this page to have the proper institution logo and name. To give a consistent professional look, institution may customize the graphics to match the style of their, |
| 969 | |
| 970 | * login pages |
| 971 | * onsent pages |
| 972 | * logout pages |
| 973 | * error pages |
| 974 | |
| 975 | Those pages are created as Velocity template under `/opt/shibboleth-idp/views` |
| 976 | |
| 977 | Therefore, it is recommended to customize the Velocity pages, adding supplementary images and CSS files as needed |
| 978 | |
| 979 | Also the Velocity templates can be configured through message properties defined in message property files on `/opt/shibboleth-idp/system/messages/messages.properties` '''which should NOT be modified''' because of that, any customizations should be inserted into `/opt/shibboleth-idp/messages/messages.properties` |
| 980 | |
| 981 | least configurations: |
| 982 | |
| 983 | `idp.title` - HTML TITLE to use across all of the IdP page templates. We recommend settings this to something like University of Example Login Service |
| 984 | |
| 985 | `idp.logo` - relative path to the logo to render on the templates. E.g., /images/logo.jpg. The logo image has to be installed into /opt/shibboleth-idp/edit-webapp/images and the web application WAR file has to be rebuilt with /opt/shibboleth-idp/bin/build.sh |
| 986 | |
| 987 | `idp.logo.alt-text` - the ALT text for your logo. Should be changed from the default value (where the text asks for the logo to be replaced). |
| 988 | |
| 989 | `idp.footer` - footer that displays on (almost) all pages. |
| 990 | |
| 991 | `root.footer` - footer that displays on some error pages. |
| 992 | |
| 993 | Eg: |
| 994 | {{{ |
| 995 | idp.title = University of Example Login Service |
| 996 | idp.logo = /images/logo.jpg |
| 997 | idp.logo.alt-text = University of Example logo |
| 998 | idp.footer = Copyright University of Example |
| 999 | root.footer = Copyright University of Example |
| 1000 | }}} |
| 1001 | |
| 1002 | Depending on branding requirements, it may be sufficient to edit the CSS files in /opt/shibboleth-idp/edit-webapp/css, or it may be necessary to start editing the template pages. |
| 1003 | |
| 1004 | Please note that the login page and most other pages use /opt/shibboleth-idp/edit-webapp/css/main.css, the consent module uses /opt/shibboleth-idp/edit-webapp/css/consent.css with different element names. |
| 1005 | |
| 1006 | Besides the logo, the login page (and several other pages) display a toolbox on the right with placeholders for links to password-reset and help-desk pages, these can be customized by adding following to the `/opt/shibboleth-idp/messages/messages.properties` |
| 1007 | {{{ |
| 1008 | idp.url.password.reset = http://helpdesk.YOUR-DOMAIN/ChangePassword/ |
| 1009 | idp.url.helpdesk = http://help.YOUR-DOMAIN/ |
| 1010 | }}} |
| 1011 | Alternatively, it is also possible to hide the whole toolbox (the whole element) from all of the relevant pages (essentially, login.vm and all (three) logout pages: logout.vm, logout-complete.vm and logout.propagate). This can be easily done by adding the following CSS snippet into /opt/shibboleth-idp/edit-webapp/css/main.css: |
| 1012 | {{{ |
| 1013 | .column.two { |
| 1014 | display: none; |
| 1015 | } |
| 1016 | }}} |
| 1017 | For your simplisity in developing, temporary add the following to Apache idp.conf file ( /etc/apache2/sites-available/idp.conf ) to server the requests directly by Apache (avoiding going through Tomcat and thus avoiding having to rebuild the WAR file after every change):insert the following right above the '''ProxyPass /idp''' directive: |
| 1018 | {{{ |
| 1019 | ProxyPass /idp/images ! |
| 1020 | ProxyPass /idp/css ! |
| 1021 | Alias /idp/images /opt/shibboleth-idp/edit-webapp/images |
| 1022 | Alias /idp/css /opt/shibboleth-idp/edit-webapp/css |
| 1023 | }}} |
| 1024 | |
| 1025 | And, as default permissions on Apache 2.4 are more restrictive, grant also explicitly access to the /opt/shibboleth-idp/edit-webapp directory: insert this at the very top of /etc/httpd/conf.d/idp.conf: |
| 1026 | {{{ |
| 1027 | <Directory /opt/shibboleth-idp/edit-webapp> |
| 1028 | Require all granted |
| 1029 | </Directory> |
| 1030 | }}} |
| 1031 | When done with changes to the images and css directories, remember to rebuild the WAR file and restart Tomcat: |
| 1032 | {{{ |
| 1033 | /opt/shibboleth-idp/bin/build.sh |
| 1034 | service tomcat restart |
| 1035 | }}} |
| 1036 | Then remove the temporary additions on idp.conf and restart the apache service. |