HTML/CSS tutorial for non-designers to design headers

In this article, I’ll show you how to create a beautiful header when you use the custom HTML mode in Serenytics. This mode gives you full control over what appears in your header. This tutorial will explain you the required HTML/CSS basics to create your own dashboard headers. It is mostly intended to data engineers, data scientists or business intelligence experts.

The most efficient way to follow this tutorial is to copy/paste the given snippets into a Serenytics dashboard. You’ll be able to quickly modify the code to better understand how it works.

A very simple first example

We’ll start with a first example showing a centered title with a border on a simple background. Here is the html code to copy/paste in the custom HTML input field in Serenytics:

The output is:

The only tricky line is margin: 0 auto. It is used to center the child div in its parent div.

Using a gradient background

In many cases, you will change the background color to be white. One issue with pure white is that the dashboards tabs are often also white. This leads to a poor design. A easy trick is to use a vertical gradient from white to a light grey as background:

The output is:

Of course, you are not limited to such simple gradient. As creating your own gradients is not so easy, you can pick good ones on websites such as https://webgradients.com/.

Here is an example using:
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);

Using a photo as background

Using photos is always complicated as you need to find one that you are allowed to use, it should fit with your content (e.g. be blurred at the position of the title) and it should fit with the design of your dashboard.

I usually use pictures from www.pexels.com corresponding to the keyword texture. Here is an example:

This gives this output:

Using a pattern as background

An alternative to a photo is to repeat a SVG pattern in the background. The easiest option is to pick a pattern from http://www.heropatterns.com/. For your favourite pattern, copy the provided CSS and paste it in a class in the Serenytics CSS editor of your dashboard (in Advanced Styles Editor). And then apply this class to your header background.

Here is an example of a CSS we selected from http://www.heropatterns.com/:

And the custom HTML code we use:

The only changes compared to a simple title header are:

• we applied the class levels-pattern to the parent div.
• we changed background color and color of the child div to create a contrast with the white background.

The result is:

A 3-column layout

So far, the layout we used is composed of a single centered div. But in many cases, we want 3 columns, vertically aligned and we want the middle one to be centered. This is not so easy to achieve. In this example, we’ll do it with the flex approach (the easiest one, but it may not work on old browsers). If you want to know more about flex, here is a good tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The html we use is:

This gives the following output:

What’s important here is that the “main title” block is well centered. This is achieved by the following lines:

In the parent div:

• display: flex. Use flex for this div.
• align-items: center. Center child divs along the vertical direction.

In the middle child div:

• width: 50%. This div will occupy 50% of the parent div.
• flex: 0 0 auto. This div will use the specified width (i.e. 50% of the parent div).

In the first and last child div:

• flex:1. This div will adapt its width to fit the parent div and both divs using it will have the same width.

One issue with this code is that the left and right div backgrounds span the full div. Said another way: there is no empty space between the middle div and the right/left div. To be able to tune these two divs precisely, we have to add another level of divs inside them:

This leads to a middle div which is still centered, and two side divs which span only the required width:

In this version, the left/right children have another div level, with the option display: inline-block. This is used to specify that the div size adapts to the content and don’t span the parent full width.

Here is an example using this layout and a SVG pattern as background:

The output is:

Conclusion

In this article, we’ve explained the HTML/CSS code for a few header examples. You can use them as a starting point for your first projects. And they are simple enough to be modified to create your own custom headers.