In this post we will see how to customize pentaho 5.4 CE BA server login only page.
I thank you to the Java+Web developer for helping me in how to play around styles of Login Page using firebug and then in PUCLogin.jsp page
I had not involved in full time web development therefore you will find the tips not so awkward but hoping that this small write up would help someone somewhere who want to learn and apply for your quick business needs.
Software Requirement :
1) Pentaho BA 5.4 CE Server
2) Images (Your company logo, Your company favicon logo).
3) Any web-browser (I preferred Mozilla firefox as Inspcet / Inspect with firebug options are handy to play around).
IMP NOTE :
I have tested all the changes explained below on laptop and desktop web browsers where I didn't find greater difference in UI.
I have also tested the changes made in iPhone and found there are some known alignment issues hence this post will work only for desktop/laptop browsers.
(Yes, I have a one by this time - thanks to my small customers/consultants. In few of my earlier posts I used to test the mobile comparability of dashboards by minimizing the web browsers - Now, no more that method I will use :-)
).
Let us start with ,
1) Remove background Image
Problem :
Solution : Remove "login-crystal-bg.jpeg" image
E:\1_Softwares\Business Intelligence\Pentaho BI Tools\BI Servers\biserver-ce-5.4.0.1-130\
biserver-ce\pentaho-solutions\system\common-ui\resources\themes\crystal\images
from above location remove "login-crystal-bg.jpeg" image.
Login Page view after removing image
Points to note down :
1) Restart of server is required.
(Why ? Web applications usually doesn't pick up updated or removed images ).
2) Delete the cache in browser (clean the browser).
2) Remove default login elevators
Problem
Solution :
1) Disable/Comment few lines of code in
PUCLogin.jsp file (This login page code is written in this file).
2) How to find ? Using webpage "Inspect Element"
Right click on Login as an Elavator and click "Inspect Element" as shown in below image
- Note down the ID of the DIV element and search it in "PUCLogin.jsp" ( I used notepad++ to view the code and search)
- ID = eval-users-toggle-container (near by 186 line in the .jsp file)
- Comment the code start with <div id="eval-users-toggle-container"> and end with it's </div>
- Server restarting is not required b'z we are not editing css or image but html
Sample view of BA server after this change :
3) Change Credential Look and feel
Stage 1 : Change <label> tags to <span> and add <br> tags as shown below
Stage 2 : Adjust login form - Horizontal center and vertically middel
a) Inspect the id="login-form-container" and adjust left and top pixels i.e., as shown in above image add them to the element class. As a result style tag will be added to the container.
b) The above is on fly experiment, do the same in PUCLogin.jsp file
add style="top: 150px; left: 440px; border-radius: 25px; border: 2px solid rgb(178, 196, 212); width: 380px; height: 220px;"
c) After adding the code in PUCLogin.jsp should look like below (Line number near 167)
<div id="login-form-container" class="lang_<%=cleanedLang%>" style="top: 150px; left: 440px; border-radius: 25px; border: 2px solid rgb(178, 196, 212); width: 380px; height: 220px;">
d) Server restart is not required -> To see the affect reload the server by clicking F5 or refresh.
e) Change the left and top pixel(s) till you get it middle of Login Page.
Stage 3 : Inner elements adjustments inside form
1) Add styles to the <span> and input elements explained in Stage 1
<span style="margin-left: 35px;"><%=Messages.getInstance().getString("UI.PUC.LOGIN.USERNAME")%></span>
<input id="j_username" name="j_username" type="text" placeholder="" autocomplete="off"
style="margin-left: 20px; margin-top: 10px;">
and
<span style="margin-left: 35px;"><%=Messages.getInstance().getString("UI.PUC.LOGIN.PASSWORD")%></span>
<input id="j_password" name="j_password" type="password" placeholder="" autocomplete="off"
style="margin-left: 30px; margin-top: 5px;">
2) Add styles to "Login" button
<button type="submit" id="loginbtn" class="btn" style="margin-left: 199px; margin-top: -18px;">
3) Login form header (User Console) styling
<h1 style="margin-left: 110px; margin-top: 20px;font-size: 25px;margin-bottom: 5px;">
4) Remove vertical scroll - add height style to below
<div id="login-wrapper" style="height:200px;">
<div id="login-background" style="top:-82px;height:600px">
and comment below code
<!--
<div id="login-footer-wrapper">
<div id="login-footer" class="beforeSlide"><%=Messages.getInstance().getString("UI.PUC.LOGIN.COPYRIGHT", String.valueOf(year))%></div>
</div>
-->
After changing all the pentaho login page look as below
5) Change favicon image .
File Name : PUCLogin.jsp
Find below code and change logo name to your logo name.
<link rel="shortcut icon" href="/pentaho-style/favicon.png"/>
Location to find favicon image or place a new logo of your choice is
E:\1_Softwares\Business Intelligence\Pentaho BI Tools\BI Servers\biserver-ce-5.4.0.1-130\biserver-ce\tomcat\webapps\pentaho-style
Keep a new logo of your company with favicon.png and save the file.
Refresh the PUC login page and find the change.
6) Change button colors
Login Button color change :
<button type="submit" id="loginbtn" class="btn-warning " style="margin-left: 199px; margin-top: -18px;"><%=Messages.getInstance().getString("UI.PUC.LOGIN.LOGIN")%></button>
Error button "OK" color change
<div class="button-panel">
<button class="
btn-warning pull-right" onclick="document.getElementById('loginError').style.display='none'"><%=Messages.getInstance().getString("UI.PUC.LOGIN.OK")%></button>
</div>
7) Change puc-login-logo.png
Image name : puc-login-logo.png
Location : <directory>\biserver-ce-5.4.0.1-130\biserver-ce\pentaho-solutions\system\common-ui\resources\themes\images
How to : Take your company or client logo , rename it with same name (take a backup copy of original).
Adjustments :
File to edit : PUCLogin.jsp
Find below code :
<div id="login-logo"></div>
Change code to add styles :
<div id="login-logo" Style="left:440px;margin-top:80px;"></div
Download this PUCLogin_ModifiedCopy.jsp and check how the styles are added.
A sample final output of the pentaho login page