This documentation corresponds to a historical version of Yellowfin

Icon

Access the latest release, or view a list of available versions of the documentation.

Skip to end of metadata
Go to start of metadata

Overview

Before you make any changes, remember to create a backup of the entire ROOT directory. Creating a zip of the ROOT directory will mean you can always restore your styling back to Yellowfin's default state. This is especially important if you are new to CSS. Do not skip this step.

It is also important to remember to clear your browser cache before attempting to view any changes you've made. This will ensure you don't get a combination of old and new styles and images on your page, only the current correct version.

Images

The images used by Yellowfin can be found in the Images directory (Yellowfin\appserver\webapps\ROOT\images). There are a wide number of images used throughout Yellowfin to control the look and feel of various menus and results. In order to customise these images you will need to use image editing software. If you do not have image editing software there is a wide range of free tools available online including GIMP and Paint.NET.

Once you have a tool to use, you need to:

  1. Make the required changes to the image file
  2. Save your changes, ensuring the file maintains the same name and type
  3. Clear your browser cache
  4. Reload the page that's affected by the updates and review

CSS

The CSS files used by Yellowfin can be found in the CSS directory (Yellowfin\appserver\webapps\ROOT\css). There are a range of stylesheets used by Yellowfin to control the look and feel of various aspects of the product. The main file used when restyling Yellowfin content is ie.css, as this is used for the widest range of styles throughout the system, with smaller files used for specific functions or pages.

Browser Developer Tools

Generally, when heavily restyling Yellowfin, including styles, the use of a browser's developer tools is recommended. This allows you to investigate elements on a page - viewing the styles being used and testing out possible changes before any stylesheets are changed. Most browsers have built in developer tools, as well as some well designed plugins. The following describes how to access developer tools in some common browsers, although it's not an exhaustive list.

Browser

Page Instructions

Menu Instructions

Chrome

Right-click anywhere on the page and select Inspect Element from the menu

Navigate to Settings > Tools > Developer tools

Firefox

Right-click anywhere on the page and select Inspect Element from the menu

Navigate to Firefox Menu > Web Developer > Inspect

IE

Press the F12 key

Click on the Tools menu and select developer tools

Opera

Right-click anywhere on the page and select Inspect Element from the menu

Navigate to Opera > Page > Developer Tools > Opera Dragonfly

Safari

Right-click anywhere on the page and select Inspect Element from the menu

Navigate to Display > Develop > Show Web Inspector
Note: this must first be enabled in Settings > Preferences > Advanced > Show Develop menu in menu bar

Note: these instructions were correct for the latest version of each browser when written, if they don't work for you please reference the help of the particular browser you are using.

Editing & Updating CSS

Once you have tried out your changes using a set of developer tools listed above, you will need to make your changes to Yellowfin's CSS files. In order to do this we recommend you make use of a text editor that has syntax highlighting. If you don't have something already, a free tool we like to use is Notepad++.

All you need to do now is:

  1. Make the required changes to the CSS file(s)
  2. Save the file(s)
  3. Clear your browser cache
  4. Reload the page that's affected by the updates and review