Knowledgebase
Skeleton CSS For Customizing The User Web Interface
Last modified on 24 October 2012 09:57 AM

Here is an example CSS file that can be used to begin customization of the User Web Interface.

For more information about customizing the user web interface see the Customizing the User web pages section of the user manual, or the other links below.

Please note: This skeleton CSS file is for versions of PaperCut prior to version 12.0 (Build 16338)


/**
 * Palette:
 * #006AB7 - blue
 * #928F90 - grey
 * #EEE - light grey
 * #FFF - white
 */
body, div#content {
  background-color: #FFF;
  font-family: arial,verdana,tahoma,sans-serif;
  }

div#header {
  color: #FFF;
  background-color: #FFF;
  }
  div#header .heading {
    padding: 20px;
    }
  div#header #logged-in-as {
    position: absolute;
    top: 0;
    right: 0;
    margin: 4px;
    color: #928F90;
    font-size: 0.9em;
    font-weight: bold;
    }

div#main {
  padding-top: 4px;
  }

a:link,
a:visited {
  color: #006AB7;
  text-decoration: none;
  }

a:hover {
  color: #ED1A3B;
  text-decoration: underline;
  }

h1, h2 {
  padding-left: 26px;
  color: #000;
  font-size: 1.4em;
  font-weight: bold;
  }

table.userDataTable th,
table.results th,
table.results th a:link,
table.results th a:visited {
  background-color: #006AB7;
  color: #FFF;
  }

table.userDataTable tr.oddRow,
table.results tr.odd {
  background-color: #EEE;
  }

div#footer {
  font-family: arial,verdana,tahoma,sans-serif;
  color: #928F90;
  background-color: #FFF;
  }

/* navigation menu */
div#nav {
  top: 110px;
  height: auto;
  width: 165px;
  border-right: solid 1px #928F90;
  background-color: #FFF;
  }
  div#nav .top {
    border-bottom: solid 1px #928F90;
    padding: 6px 10px;
    color: #FFF;
    background-color: #006AB7;
    font-size: 1.4em;
    font-weight: bold;
    }
  div#nav ul {
    text-align: right;
    }
    div#nav li {
      border-bottom: solid 1px #928F90;
      }
      div#nav li strong {
        background: none;
        }
  /* nav tabs */
  div#nav a,
  div#nav a:link,
  div#nav a:active,
  div#nav a:visited,
  div#nav a:hover {
    color: #006AB7;
    background-color: #FFF;
    }
  /* current page nav tab */
  div#nav strong a,
  div#nav strong a:link,
  div#nav strong a:active,
  div#nav strong a:visited,
  div#nav strong a:hover {
    color: #FFF;
    background-color: #006AB7;
    font-weight: bold;
    text-decoration: none;
    }
  /* mouseover nav tabs*/
  div#nav a:hover,
  div#nav strong a:hover {
    color: #FFF;
    background-color: #006AB7;
    font-weight: bold;
    text-decoration: underline;
    }