The header.css style sheet specifies the colors and font sizes and locations of the user interface elements of the header for all Axeda® Connected Product Management Applications, including the color of the tabs, both when selected and not selected, and the size and color of the font used on the tabs. If you know or have a list of the RGB codes (in hexadecimal format) for the colors you want to use and you know the names and sizes of fonts you want to use, you can copy the example below, paste it into a text editor such as Notepad, and make the changes you require.
This style sheet uses a color key so that you can change colors in the key and have them reflected throughout the style sheet.
/* Color key
personal links, highlights gold #F6D500
logo, background lt blue #003399
menu bar dark blue #294F6D
dark blue #003366
grey backgrounds #F2F2F2
#184053
Gradient 25 and 70px 1C7EAB->0D5E8D #1E80AF->#145E8B
*/
/* the upper right links for this user ******************************/
#personal
{
position: absolute;
right: 0px;
font-size: 11px;
}
#personal li
{
display: inline;
}
#personal li a
{
text-decoration: none;
color: #ffffff;
padding: 2px 10px;
border-right: 1px solid #FFFFFF;
}
#personal li a:hover
{
text-decoration: underline;
color: #99cc33;
}
/* Change this to fit the size of new logo **************************/
#logo
{
width: 160px;
height: 70px;
background: url(/admin/images/deloitte_logo.gif) no-repeat;
background-position: 10px 10px;
}
/* Used by header.jsp, noheader_template.jsp, functions.js? */
#topBar
{
height: 60px;
width: 100%;
background: #000066 url(/images/skin_banner.jpg) repeat-x;
background: #000066;
}
.smallHeader
{
height: 60px;
width: 100%;
top: 0px;
left: 0px;
background: white;
}
#footer
{
clear: both;
height: 31px;
bottom: 0px;
font-size: 11px;
color: #999999;
background: #F2F2F2 url(/images/footer_bar.gif) repeat-x;
}
#footer span.left
{
padding: 7px, 5px, 0px, 10px;
}
#footer span.right
{
padding: 0px, 10px, 0px, 0px;
}
/* Application tabs *************************************************/
#applications
{
font-size: 13px;
font-weight: bold;
float: right;
height: 23px;
}
#applications li
{
display: inline;
}
#applications li a
{
color: white;
text-decoration: none;
padding: 2px 15px;
height: 23px;
}
#applications li a:hover
{
text-decoration: underline;
background: #99cc33;
}
#applications li.selected a
{ /*selected main tab style */
color: #000066;
background: #ffffff;
}
#applications li.selected a:hover
{
text-decoration: none;
color: #000066;
}
/* Menu bar (dhtml) */
#menubar
{
/*height: 19px;*/
height: auto;
padding-left: 7px;
vertical-align: middle;
background: #FFFFFF;
}
#menubar A
{
font-size: 11px;
color: #000066;
text-decoration: none;
padding: 5px 9px 5px 9px;
margin-left: 6px;
margin-right: 6px;
/*line-height: 24px;*/
line-height: normal;
}
#menubar A:hover
{
text-decoration: none;
background: #ffffff
}
/* Header (title) below menu bar ****************************** */
#header
{
padding: 8px 7px 8px 10px;
background: #E5E5CC;
border-top: 2px solid #003366;
border-bottom: 1px solid #ffffff;
}
#header table
{
border: 0;
padding: 0 0 0 0;
}
.hdrtitle
{
font-size: 18px;
color: #000066;
}
.hdrdetail
{
font-size: 12px;
font-weight: bold;
color: #003399;
}
.hdrdetail .hdrdata /* used by remote access window */
{
color: #cc9900;
}
/* Modules and forms ****************************** */
.module,
.form
{ /* the div for each module, or table for each form */
font-family: Tahoma;
border: 1px solid #CCCCCC;
background: #FFFFFF;
margin: 0;
}
.form tr,
.form td {
padding: 5px 0px 10px 0px;
vertical-align: top;
}
.form .invisible {
height: 0px;
}
.formClass
{
font-family: Tahoma;
border: 1px solid #CCCCCC;
background: #E6EAEC;
margin: 0;
width: 100%;
}
.formClass tr,
.formClass td
{
padding: 1px 0px 1px 0px;
vertical-align: top;
white-space: nowrap;
}
.formClass .invisible
{
height: 0px;
}
.tableClass
{
font-family: Tahoma;
border: 0px solid #ffffff;
background: #ffffff;
margin: 0;
width: 100%;
}
.tableClass tr,
.tableClass td
{
padding: 1px 0px 1px 0px;
vertical-align: top;
white-space: nowrap;
}
.tableClass .invisible
{
height: 0px;
}
.moduleHeader
{
height: 25px;
background: #FFFFFF;
}
.moduleHeader td{ /* the top bar of each module */
color: #000066;
font: bold 12px Tahoma;
border: 0px;
padding: 1px 4px 1px 1px;
}
/* module links */
.moduleHeader a, .moduleHeader a:visited, .moduleHeader a:active
{
color: #99cc33;
font: 11px Tahoma;
text-decoration: none;
text-align: right;
}
.moduleHeader a:hover
{
text-decoration: underline;
}
.filterSectionHeader
{
height: 25px;
background: #003399;
}
.filterSectionHeader td{ /* the top of each section */
color: white;
font: bold 12px Tahoma;
border: 0px;
padding: 1px 4px 1px 1px;
}
/* the body of each module */
.moduleContent
{
min-height: 8px;
}
.moduleContent a, .moduleContent a:visited, .moduleContent a:active
{
color: #003399;
text-decoration: none;
line-height: 150%;
}
.moduleContent .date a,
.moduleContent .date a:visited,
.moduleContent .date a:active
{
white-space: nowrap;
color: green;
}
.moduleContent a.action,
.moduleContent a.action:visited,
.moduleContent a.action:active
{
font-size: 8pt;
white-space: nowrap;
text-decoration: none;
}
.moduleContent a:hover
{
text-decoration: underline;
}
/* info modules have no box, just user,usergroup,device summary */
.infoModule td.label { /* Static label text */
color: gray;
}
.infoModule .deviceName,
.infoModule .deviceName a
{
color: #003399;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
}
/* Usage sub tabs *************************************************/
#usagetabs {
font-size: 13px;
font-weight: bold;
height: 23px;
}
#usagetabs li {
display: inline;
}
#usagetabs li a {
color: #003399;
text-decoration: none;
padding: 2px 15px;
height: 23px;
background: #E5E5E5;
border-color: #003399;
border-style: solid;
border-width: 1px 1px 0px 1px;
}
#usagetabs li a:hover {
text-decoration: underline;
}
#usagetabs li.selected a { /*selected main tab style */
background: #9dc0d0
}
#usagetabs li.selected a:hover {
text-decoration: none;
}
/*****************************************************************/
.highlight { /* any text */
color: #F6D500;
text-align: justify;
}
.left {
float: left;
}
.right {
float: right;
}
.unused { /* just for testing */
background: red;
}
/* Service home page */
#hide {
cursor: pointer;
color: #003399;
font-size: 12px;
font-weight: bold;
width: 100px;
}
#hide td:hover {
text-decoration: underline;
}
, ../