Chapter 9. Adding a Dashboard Header and Footer
You can add a fixed dashboard header and footer that does not scroll. This is perfect for adding items that need to be visible at all times - alerts, status messages, menus and login details for example.
To add a dashboard header and footer:
- Open the Ambience Designer. From the folder tree, right click the Resources entry and click Add > Folder. Name the new folder as
CSS
. This is shown in Figure 9.1, “Add CSS Folder”.
- Right click the CSS folder, and select Add > CSS. Enter a name for the CSS file. For example,
DashboardHeaderAndFooter.css
. This is shown in Figure 9.2, “Add CSS File”.
- In the text editor workspace, add in the CSS code. For example:
#dashboard-header
{ background: red; color: white; height: 40px; }
#dashboard-footer
{ background: grey; color: black; height: 30px; }
This is shown in This is shown in Figure 9.3, “Add CSS Code”.
- Save your CSS file.
- Open your browser and navigate to your dashboard.
- Click the dashboard includes icon ().
- Click the CSS tab, and click Add.
- Click Repository and select your CSS code file as shown in Figure 9.4, “Select CSS File”.
- Click OK.
- From the Dashboard Includes screen, click OK.
- Refresh your browser and you will see your dashboard header and footer as shown in Figure 9.5, “Dashboard Header and Footer”.