Custom Images and CSS

Overview

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.

Custom Directories

Within the ROOT directory in your Yellowfin installation, there are two custom directories used for restyling:

1. customcss (Yellowfin\appserver\webapps\ROOT\customcss)
2. customimages (Yellowfin\appserver\webapps\ROOT\customimages)

These directories should contain any customised versions of images and css that are to be used in the place of Yellowfin original images. These files are stored in custom directories so that the original files can remain intact. It also means that when Yellowfin is updated they are not touched, as the custom directories are not modified during the update.

Images

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

1. Make the required changes to the image file
2. Save your changes to the custom images directory (Yellowfin\appserver\webapps\ROOT\customimages), 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

Default color styles

In Yellowfin 9.6, we consolidated color name usage within our core CSS files to make it easier to change colors globally.

To customize your color scheme, open your custom file in your \customcss folder and at the top of the file, add:

:root {

<variable-overrides-go-here>

}

Make sure you replace <variable-overrides-go-here> with your own styles.

For example,

:root {

-primary-color: red;

--loader-color: green;

}

The table below provides a current list of all style names related to color usage. If you're using an older version of Yellowfin, some of these might not work.

--primary-color

#009EEC

--loader-color: #009EEC 

#009EEC

--leftnav-hover-color

#008CD7

--primary-button-color 

#009EEC

--primary-button-hover-color 

#008ED4

--grey

#CCCCCC

--background-grey

var(--grey)

--border-grey

var(--grey) 

--signal-positive-color 

#009EEC

--signal-negative-color

#FF8F00

--dark-grey

#666

--black 

#000

--background-black

var(--black)

--white

#fff

--background-white

var(--white)

--primary-text-color

#333740

--light-grey

#F8F6F4

--light-grey-background

var(--light-grey)

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.

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) to the custom css directory (Yellowfin\appserver\webapps\ROOT\customcss)
3. Clear your browser cache
4. Reload the page that's affected by the updates and review

Note: your replacement files, stored in the customcss directory do not have to be files of the same names as the original, as long as they have the correct class names Yellowfin will use them. This means that you can condense all your custom styling into one css file if you wish, which only contains items you've customised.