Page History
...
| Table of Contents | ||
|---|---|---|
|
Overview
| Styleclass | ||
|---|---|---|
| ||
Custom Header & FooterFooter#top |
Yellowfin can be integrated into existing or new applications by removing or replacing the Header and Footer panels. This also allows you to build in your own navigation into customised panels.
...
- Simple - this involves the replacement of images, and changes to the CSS files used by the header and/or footer, without having to write a panel. Generally this option is used for quick 'mock ups' but not the final restyled product.
- Complete - this involves writing a custom file to replace the header and/or footer panel. This method requires more technical knowledge, and more time.
Header
The Yellowfin header sits at the top of each page in the system: 
Footer
The footer is located at the bottom of the page, and is centred on the Dashboard if the dashboard position is set to Centre:
Simple Styling
| Styleclass | ||
|---|---|---|
| ||
Custom Header & FooterFooter#top |
If you wish to create a quick, temporary custom header & footer, simply replace the following images in the Yellowfin ROOT customimages directory (Yellowfin\appserver\webapps\ROOT\customimages) with your customised versions:
...
Note: the images you wish to use as replacements will need to have the same name and extension as the files listed above in order for the page to pick them up. You no longer have to overwrite the originals, simply place your new images in the custom directory. This will mean that they will not be overwritten during the upgrade process.
Example
Component | Standard | Custom |
|---|---|---|
Full Header |
|
|
Full Footer* |
|
|
logo.svg |
|
|
logoFooter.svg |
|
|
* You will notice that the text in the footer references Yellowfin; if you wish to remove or customise this, you must use Complete Styling.
Complete Styling
| Styleclass | ||
|---|---|---|
| ||
Custom Header & FooterFooter#top |
Instructions
The included HTML should be a fragment, suitable for including inline within another HTML page, rather than it being a full HTML document itself. That is, it should NOT contain <HTML>, <HEAD>, or <BODY> tags. Remember that any links inside the HTML will be relative to the Yellowfin page. It is recommended to use absolute HTML links.
...
Note: Instead of using the existing Yellowfin directories, you may wish to create a new folder in Yellowfin\appserver\webapps\ROOT to contain your custom files, to make locating them easier.
Example
Component | Standard | Custom |
|---|---|---|
Full Page |
|
|
...
| horizontalrule |
|---|
| Styleclass | ||
|---|---|---|
| ||
Custom Header & FooterFooter#top |