...
| Anchor | ||||
|---|---|---|---|---|
|
| Table of Contents | ||
|---|---|---|
|
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.
Custom Directories
Within the ROOT directory in your Yellowfin installation, there are two custom directories used for restyling:
- customcss (
Yellowfin\appserver\webapps\ROOT\customcss
...
- )
- 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
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
...
...
and
...
...
.
Once you have a tool to use, you need to:
- Make the required changes to the image file
- Save your changes to the custom images directory (
Yellowfin\appserver\webapps\ROOT\customimages
...
- ),
...
- ensuring
...
- the
...
- file
...
- maintains
...
- the
...
- same
...
- name
...
- and
...
- type
...
- Clear
...
- your
...
- browser
...
- cache
...
- 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 |
|---|---|---|
Right-click anywhere on the page and select Inspect Element from the menu | Navigate to Settings > Tools > Developer tools | |
Right-click anywhere on the page and select Inspect Element from the menu | Navigate to Firefox Menu > Web Developer > Inspect | |
Press the F12 key | Click on the Tools menu and select developer tools | |
Right-click anywhere on the page and select Inspect Element from the menu | Navigate to Opera > Page > Developer Tools > Opera Dragonfly | |
Right-click anywhere on the page and select Inspect Element from the menu | Navigate to Display > Develop > Show Web Inspector |
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:
- Make the required changes to the CSS file(s)
- Save the file(s) to the custom css directory (
Yellowfin\appserver\webapps\ROOT\customcss
...
- )
- Clear your browser cache
- 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.