Using a custom Header and Footer in Yellowfin

by | Oct 8, 2014

We use Yellowfin as the reporting layer for our MagnumBI platform for many reasons, one of them is customisation. Yellowfin have designed their product so you can change it to match your own style and brand it.
Before you get started there’s a few things to consider:

  1. You shouldn’t experiment with a production environment. If you want to continue be prepared to restart services and potentially break it (and hopefully fix it again) – it took some experimentation to get to the look and feel we wanted and the web service had to be restarted several times.
  2. You should have a good understanding of HTML and CSS.
  3. You need administrator access to the server where your Yellowfin instance is hosted. You will need to be able to access the web hosted files and edit them.
  4. You should understand how to stop/start services on the server and know which web hosting service you’re using for Yellowfin (Tomcat is the default).
  5. My guide is based on Linux running Tomcat, it’s a similar process on other hosted solutions but commands and paths will be different. You should understand your environment, specifically how to restart services and where your Yellowfin install path is – for our environment the path is /opt/Yellowfin on the server.

If you’re going to make changes to any system, back it up first. Ideally back up everything and make a copy of all files you’re changing.
Yellowfin has a folder for custom CSS. If you’ve referenced new classes then you can drop a css file into this folder and it will be included in your custom files. Yellowfin have set it up to detect the files in this folder and automatically include them, regardless of name.
If you put a file in this folder with the same name as an existing one then this new file will override the original. Yellowfin uses the file ie.css for most of it’s design, creating a copy of this file, tweaking it and putting it into this folder will override the default.
Any files added or removed from this folder will require a restart of Tomcat (or the web services you’re using).
In our instance the path is /opt/Yellowfin/appserver/webapps/ROOT/customcss
You can override the default images without affecting the originals. Just put the replacement files in the customimages folder and they will be used instead. To keep things simple, try and make the replacement images the same dimensions as the original.
In our instance the path is /opt/Yellowfin/appserver/webapps/ROOT/customimages
The Yellowfin wiki page can be found here:
Yellowfin’s guide for customising Header and Footer can be found here:
For our instance we removed the footer and created a custom header. Creating a custom header is straight forward, you create the code you need for it and to ensure you keep your logoff button somewhere there should be a link that looks something like this:
<a href=”javascript:on_submit(‘topNavLogoff’);”>Logout</a>
The header HTML should only include the bits you need for the toolbar, develop it on the idea that it will be copy and pasted into an existing HTML page, so no body or header tags. Our code started with <DIV>
It’s the same approach for the footer file too.
These newly created files should be uploaded to your Yellowfin ROOT folder.
Last part is to log into Yellowfin > Click Administration at the Top > Configuration > Click the Integration Tab (looks like two links) > Page Header > Change display to Custom > Type in the file name you uploaded to the ROOT folder in the URL box. E.g. customheader.jsp > Save
To customise the footer, you can choose Page Footer from this same menu and specify the file name. Once you’re finished, click Save and that’s it.
For our customisation we kept it simple and only changed images. I believe you can customise the toolbar further by tweaking the files directly or changing the CSS but you have to start changing in built Yellowfin files which we didn’t want to do.
Once again, we replaced the images used by the toolbar by putting them into the customimages folder and restarting the web hosting service.
The files we changed were:
– dash_background.png (Background Image)
– dash_options_open.png (Dropdown icon next to username)
– menu_on.png (Triangle above the current Yellowfin page, that sits below the blue line at the top of the toolbar)
I hope that helps you with your customisation. If there’s any questions or any hints you can offer, please leave a comment.
Keep exploring!

Submit a Comment

Your email address will not be published. Required fields are marked *