Customizing the Login Page
If you want to replace the TIBCO Jaspersoft branding, the login page requires extensive changes. To completely customize the login page, you may need to edit a number of files that define the content of the page. The following example shows how to do the following:
| • | Customize CSS rules using a theme. |
| • | Edit JSP files for the login page and login messages. |
| • | Modify a string on the login page using properties files. |
Change the logo to a welcome message:
| 1. | Edit a theme or create a new one. |
| 2. | Edit or create the overrides_custom.css file in the main folder of your theme and add the following CSS rules: |
The first CSS statement hides the logo. The second statement sets the welcome background behind the logo to white.
| 3. | You can insert text where the logo used to be. To enable the text, edit the file <js‑webapp>/WEB-INF/jsp/modules/login/login.jsp and locate the welcome div. Then uncomment the line for the spring message: |
<div id="welcome" class="row"> <h1> <span class="logo">TIBCO Jaspersoft</span> <spring:message code='LOGIN_WELCOME_OS'/> </h1></div>[/code] |
| 4. | The text for messages is kept in the properties files. Edit <js-webapp>/WEB-INF/bundles/jasperserver_messages.properties and change the following string to customize the welcome text: |
#Welcome Login PageLOGIN_WELCOME_OS=Welcome to My Company[/code] |
If you support multiple locales, modify the same message key in the other language bundles. See the JasperReports Server Administrator Guidefor more information about localization.
| 5. | You can style the welcome text using CSS styles in your custom theme. To do this, return to your overrides_custom.css file and add the following rules: |
#loginPage #welcome .text { color: #1388d8; font-size: 28px; font-weight: normal; display: line-block; }[/code] |
To optionally see the effect of the changes up to this point, save the files you modified, upload your theme and set it as the active theme, and then restart your app server.
Effect of Changes to Welcome Area on Login Page |
|
| In commercial editions with the organizations architecture, you must log in as system admin (superuser) to set the theme on the login page. |
Remove the Getting Started and What's New text:
| 1. | In your overrides_custom.css file, add the following CSS statements to remove the html code for the Getting Started and What's New text and to set the background behind them to white: |
#loginPage #rotating > .primary,#loginPage #rotating > .secondary { display: none;}[/code] #loginPage #copy,#loginPage .info > .content { background-color: #ffffff;}[/code] |
| The html for the What's New and Getting Started lists is located in the following files: <js-webapp>/WEB-INF/jsp/modules/login/rotating/login_rotating_community_0.jsp (community edition) or <js-webapp>/WEB-INF/jsp/modules/login/rotating/login_rotating_pro_0.jsp (commercial editions). |
| 2. | To place an image or logo in the area that had the lists, upload the image as part of your custom theme and set it as the background to the rotating div: |
#loginPage #rotating { background-image: url("images/mycompany_logo.png"); background-position: center center; background-repeat: no-repeat; height: 400px;}[/code] |
To optionally see the effect of the changes up to this point, save the files you modified, upload your theme and set it as the active theme, and then restart your app server. The figure below shows the standard image replaced by an image of a fictional MyCompany logo.
Adding a Logo on the Login Page |
|
| In commercial editions with the organizations architecture, you must log in as system admin (superuser) to set the theme on the login page. |
Remove image of devices and reposition login form:
| 1. | To hide the image of digital devices above the login form, add the following CSS to your overrides_custom.css file: |
#loginForm .devices { display: none;}[/code] |
| 2. | Reposition the login form by setting a top margin in the overrides_custom.css: |
#loginForm > .dialog > .content > .body { margin-top: 120px; padding-bottom: 12px;}[/code] |
| 3. | Save your files and upload your overrides_custom.css and your logo image file to your theme. |
| 4. | Set your new theme as the active theme. In commercial editions with the organizations architecture, you must log in as system admin (superuser) to upload and activate the theme at the root level. The theme at the root level applies to the login page for all users, regardless of organization. |
These customizations give the login page a new appearance with all TIBCO Jaspersoft branding removed:
Custom Layout and Rebranding of Login Page |
|
Recommended Comments
There are no comments to display.