Tailored Web Tools Skeleton CSS
Here is an example CSS file that can be used to begin customization of the user web tools interface. For more information see the article Customizing the User Web Tools interface. Also see Example JavaScript For Customization of the User Web Tools Interface. .
/**
* 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;
}
Categories: User Web Tools Interface, UserInterfaceCustomization?