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:

  1. 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”.

    Figure 9.1. Add CSS Folder

    Add CSS Folder
  2. 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”.

    Figure 9.2. Add CSS File

    Add CSS File
  3. 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”.

    Figure 9.3. Add CSS Code

    Add CSS Code
  4. Save your CSS file.
  5. Open your browser and navigate to your dashboard.
  6. Click the dashboard includes icon ().
  7. Click the CSS tab, and click Add.
  8. Click Repository and select your CSS code file as shown in Figure 9.4, “Select CSS File”.

    Figure 9.4. Select CSS File

    Select CSS File
  9. Click OK.
  10. From the Dashboard Includes screen, click OK.
  11. Refresh your browser and you will see your dashboard header and footer as shown in Figure 9.5, “Dashboard Header and Footer”.

    Figure 9.5. Dashboard Header and Footer

    Dashboard Header and Footer