Child pages
  • Styling with the Network Dashboard
Skip to end of metadata
Go to start of metadata

In order to keep the style of network applications consistent, there is a stylesheet as part of the Dashboard that should be used in other projects as far as possible.

The basics

You can include this with the following in the head of your HTML:

You should, at a minimum, also include the following for a consistent mobile experience:

Anatomy of a page

  • div id:dashboardContainer
    This should be included as a container around all content within a page, and is used to position the header and footer appropriately
  • div id:headerDesktopBanner
    Everything within this Div will be displayed only on non-mobile devices, and should contain only the University logo, and perhaps a back to dashboard link
        <div id="headerDesktopBanner">
            <img src="http://nw.bath.ac.uk/dashboard-icons/uob-logo-grey-transparent.png" />
            <div>
                <!-- Everything inside this div will be on the right-hand side of the banner header -->
                <a href="http://nw.bath.ac.uk/">Back to Dashboard</a>
            </div>
        </div>
    
  • div id:dashboardHeader
    This is the actual header, the title of the application/page and will be styled accordingly for a device.
    We wrap the new HTML header tags inside a div for backward compatibility.
  • div id:dashboardContent
    All page content (except header and footer) should be wrapped inside a div with id of dashboardContent
  • div class:contentBox
    Any content boxes on a page should be within a 'contentBox' styled div.
    • h2 will be applied as a header to the content box, and style accordingly
    • A two-column layout can be achieved using div class:columnContainer twice inside the contentBox
  • div id:dashboardFooter
    The footer will be styled according to device, as with the header:

Colouring the page

The page header and footer can have a colour scheme applied, all of which are inline with the University visual identity colour pallette.
These can be specified using a class on the header and footer with the name dashboardColour followed by one of:

  • Slate
  • Blue
  • Orange
  • Green
  • Red

Example:

If there is no colour class supplied, the default 'slate' (internal websites, by web service standards) will be applied.

  • No labels