In this article we will learn how to do panel level customization like, adding the shadows.
After logging into Helical Insight, navigate to “Dashboard Designers”
Open any of the existing report then click on CSS to add the code.
CSS Code:
.grid-stack-wrapper {
box-shadow: 2px 2px 2px red;
}
Here is the Output:
We can also add the borders in different styles and formats like:
- dotted – Defines a dotted border
- dashed – Defines a dashed border
- solid – Defines a solid border
- double – Defines a double border
- groove – Defines a 3D grooved border. The effect depends on the border-color value.
- ridge – Defines a 3D ridged border. The effect depends on the border-color value.
- inset – Defines a 3D inset border. The effect depends on the border-color value.
- outset – Defines a 3D outset border. The effect depends on the border-color value.
Example:-
- {border-style: dotted;}
- {border-style: dashed;}
- {border-style: solid;}
- {border-style: double;}
- {border-style: groove;}
- {border-style: ridge;}
- {border-style: inset;}
- {border-style: outset;}
- {border-style: none;}
- {border-style: hidden;}
- {border-style: dotted dashed solid double;}
CSS Code:
.grid-stack-wrapper {
box-shadow: 2px 2px 2px red;
border: 12px solid black !important;
}
Here is the Output:
We can also do more customization in the Panel like, customization of Header with a background image using CSS code.
CSS code:
.component-title {
color: red;
font-size: 18px;
background: yellow;
font-weight:bold;
background-image: url(https://i.stack.imgur.com/08Nj1.jpg);
background-size: 800px 30px;
background-repeat: no-repeat;
}
Here is the Output:
For More Info, Contact us at demo@helicalinsight.com