Devon County Council’s Economy Service was set up to support and strengthen the Devon economy by developing the right conditions for economic growth. The Economy Service facilitates and delivers a variety of programmes and initiatives. It works alongside a range of partners from the business and community sectors and other public organisations to improve business performance and job opportunities.
One of the projects the Economy Service has successfully developed is the Devonomics website (www.devonomics.info). The website allows users to view data on key aspects of the Devon economy. It is split into three categories (People, Place and Prosperity) each with their own sub categories displaying a range of data.
Do you have an InstantAtlas story to tell? – If so let us know firstname.lastname@example.org
Watch the latest InstantAtlas Essentials Video
# 18 – ‘How to create a gradient for your report background’ by Andrea Kirk of the InstantAtlas Support Team
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 email@example.com.