Skeleton CSS For Customizing The User Web Interface

KB Home   |   Skeleton CSS For Customizing The User Web Interface

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)

If you wish to create your own CSS, you can create your own skeleton CSS by downloading the existing PaperCut CSS as described here: MakeYourOwnSkeletonCSS


/**
 * 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:


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.

Article last modified on October 06, 2014, at 04:00 AM
Printable View   |   Article History   |   Edit Article