Tip:
Highlight text to annotate it
X
Welcome to this week’s video tutorial.
Today I would like to show you, how you can create a gradient for your report background
and activate drop shadows for your components. These are just two small examples of the vast
possibilities you have when designing InstantAtlas reports.
I will show you how this works using this example report that you can see on the screen
in front of you. I already changed the design slightly from the default by using a different
colour palette for my legend and applying a dark blue border to my components and buttons.
To give the report a little bit of a 3D-feel, I will now add a drop shadow to my components.
To do this I need to open the default.css file in the Style Editor. On the left hand
side I see the list of all the available style classes. The class called ‘Panel’ defines
the styles for all panels in the report. In here I have the option to set the property
called ‘dropShadowEnabled’ to true. I can also select a different shadow colour,
for example a dark blue. The shadow will always be a lighter version of this colour. The property
‘shadowDirection’ allows me to define from where the light comes. I quite like the
light to come from the top left which means that I need to set my shadow direction to
‘right’. If I now save my changes and refresh my report. I can see the shadows on
the panels.
As a second step I would like to generate a gradient in the report background. I can
define a gradient in the style class ‘Application’ under the property ‘backgroundGradientColors’.
I will choose a very light blue as my first colour and a dark blue as my second colour.
If I save these changes now and refresh my report you can see that the gradient only shows at
the very edge of the report and the big rectangle, where all the components sit in, overlays
it. To fix this I can make the rectangle filling transparent. I do this in the style class
‘backgroundRect’ using the property ‘backgroundAlpha’ which needs to be set to 0 to be fully transparent.
I will also let the border of the rectangle disappear by changing the ‘borderThickness’
to 0.
I save my changes again, refresh my report and I can now see the gradient background
fully behind my components. As you can see, it is fairly easy to change the design of
your report drastically by adding a gradient or to make your components stand out with
drop shadows.
Try it yourself. If you have any questions please contact support@geowise.co.uk.