Knowledge Base

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.

/**
 * 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;
    }

Also see:

• Customizing the User Web Tools interface
• Example JavaScript For Customization of the User Web Tools Interface

Categories: User Web Interface User Interface Customization

Comments

Share your findings and experience with other PaperCut users. Feel free to add comments and suggestions about this Knowledge Base article. Please don't use this for support requests.