Page History

...

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. However, this file is a core Yellowfin file and should not be edited. Instead, use your dedicated customcss folder (Yellowfin\appserver\webapps\ROOT\customcss) to overwrite the default style details. 

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.

...