Each CSS file installed with the Self Service Portal is commented so that a description of each section is available for reference before attempting to create your own template.
An example CSS file based on the default Blue template is shown below. Note how each of the images referenced in the file are mapped to a specific image folder within the Self Service Portals directory structure:
/*
Richmond Systems SupportDesk CWI Default Style Sheet : Blue.css
Last Modified : 25/02/2008
*/
/*
CSS File Information
This file is structured in two main parts.
The first part is for settings which make the biggest changes to the CWI (logos, button images, background images, toolbar buttons)
The second part can still be custmomised, but the changes that are made are not as explicit as the ones in the first part
*/
/*
Customisation of CSS
It is recommended that you do not alter the standard templates, instead make a copy of the CSS file in the Stylesheets directory.
You can give the new stylesheet any name, in the setup console you can specify the new name for each Customer Settings Group
*/
/*
Company Logo
This is used to source the picture that is shown in the navigation panel at the top of each page.
*/
#CompanyLogo
{
background-image : url("../Images/CompanyLogos/richmond-logo2.gif");
width: 250px;
height: 60px;
background-repeat: no-repeat;
background-position: bottom;
}
/*
Buttons
This is used to change the picture that appears behind each of the buttons, such as the Login button on the login page.
*/
.submit
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
background-image: url("../Images/Buttons/submit.jpg");
background-repeat: no-repeat;
width: 117px;
height: 35px;
border-color: #ffffff;
border-width: 0px;
border-style: none;
cursor: pointer; cursor:hand;
}
/*
Toolbar Images
*/
.Home a { background-image: url("../Images/Icons/Classic/Home_off.gif"); background-repeat:no-repeat; width:56px; height:65px; display:block; cursor:pointer}
.Home a:hover { background-image: url("../Images/Icons/Classic/Home_on.gif"); background-repeat:no-repeat;width:56px; height:65px; display:block; cursor:pointer}
.AddInc a { background-image: url("../Images/Icons/Classic/AddIncident_off.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.AddInc a:hover { background-image: url("../Images/Icons/Classic/AddIncident_on.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.IncList a { background-image: url("../Images/Icons/Classic/IncidentList_off.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.IncList a:hover { background-image: url("../Images/Icons/Classic/IncidentList_on.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.MyAccount a { background-image: url("../Images/Icons/Classic/MyAccount_off.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.MyAccount a:hover { background-image: url("../Images/Icons/Classic/MyAccount_on.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.RaiseRFC a { background-image: url("../Images/Icons/Classic/RaiseRFC_off.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.RaiseRFC a:hover { background-image: url("../Images/Icons/Classic/RaiseRFC_on.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.RFCList a { background-image: url("../Images/Icons/Classic/RFCList_off.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.RFCList a:hover { background-image: url("../Images/Icons/Classic/RFCList_on.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.KnowBase a { background-image: url("../Images/Icons/Classic/Knowledgebase_off.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.KnowBase a:hover { background-image: url("../Images/Icons/Classic/Knowledgebase_on.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.Contact a { background-image: url("../Images/Icons/Classic/Contactus_off.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.Contact a:hover { background-image: url("../Images/Icons/Classic/Contactus_on.gif"); background-repeat:no-repeat; width:56px; height:65px; cursor:pointer; display:block;}
.Logout a { background-image: url("../Images/Icons/Classic/Logout_off.gif"); background-repeat:no-repeat; width:56px; height:65px; display:block; cursor:pointer}
.Logout a:hover { background-image: url("../Images/Icons/Classic/Logout_on.gif"); background-repeat:no-repeat; width:56px; height:65px; display:block; cursor:pointer}
/*
Core
*/
body
{
background-image : url("../Images/backgrounds/bsqu.jpg");
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #555555;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h1
{
font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:16px;
color:#3d5bb1;
line-height:16px;
text-align:left;
}
h2
{
font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
color:#555555;
line-height:14px;
text-align:left;
}
h3
{
font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
color:#9fa0a3;
line-height:12px;
text-align:left;
}
img
{
border-width :0px;
}
a
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #3d5bb1;
text-decoration: underline;
}
a:hover
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #cccccc;
text-decoration: underline;
}
p
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
/*
-------------------------------------------------------------------------
Advanced CSS.
-------------------------------------------------------------------------
*/
/* Css Styles */
.aHome
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #3d5bb1;
text-decoration: none;
text-indent: 10px;
}
.aHome:hover
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: underline;
color: #3d5bb1;
text-indent: 10px;
}
.HomeDIVBody
{
border-bottom-color: #cccccc;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #cccccc;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #cccccc;
border-right-style: solid;
border-right-width: 1px;
width:445px;
background-color: #F5F5F5;
}
.HomeDIVHeader
{
border-style:none;
display:block;
background-image: url("../Images/HomePage/tab-blue.jpg");
background-repeat: no-repeat;
font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
height: 30px;
width: 445px;
font-size:14px;
font-weight:bold;
color: #ffffff;
text-indent:10px;
text-align: left;
vertical-align:middle;
}
.smallfont
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
/* Table Styles */
#MainTable
{
background-color :#FFFFFF;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-left:auto;
margin-right:auto;
width: 950px;
}
#TableAttach
{
background-color :#FFFFFF;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-left: auto;
margin-right: auto;
margin-top:20px;
width: 90%;
}
#Table_Login
{
background-color :#FFFFFF;
border-style:solid;
border-width: 1px;
border-color: #000000;
width:600px;
margin-left:auto;
margin-right:auto;
}
#Table_Login2
{
margin-left:auto;
margin-right:auto;
}
#Table_PWReminder
{
width:600px;
background-color:White;
border-style:solid;
border-width:1px;
border-color:#000000;
color: #000000;
}
#Table_Register
{
width: 700px;
background-color :#FFFFFF;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-left: auto;
margin-right: auto;
}
.Table_AddIncident_Outer
{
background-color:#ffffff;
margin-left: auto;
margin-right: auto;
width: 600px;
border-color:#cccccc;
border-width:1px;
border-style:solid;
}
.Table_AddIncident
{
margin-left: auto;
margin-right: auto;
width: 600px;
}
/* Form Styles */
.myaccounttable
{
background-color:White;
border-bottom-style: dotted;
border-bottom-width: 2px;
border-bottom-color: #b3b3b3;
text-align:left;
color: #555555;
margin-left:10px;
margin-right:10px;
margin-top:10px;
}
.label
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: Black;
background-color: #E7EFFF;
border-color: #949AAD;
border-style:solid;
border-width: 1px;
}
.textbox
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: Black;
background-color: #FFFBDE;
border-color: #949AAD;
border-style:solid;
border-width: 1px;
}
.textboxKBD
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: Black;
background-color: #FFFBDE;
border-color: #949AAD;
border-style:solid;
border-width: 1px;
}
.textboxRQD
{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: Black;
background-color: #E7EFFF;
border-color: #949AAD;
border-style:solid;
border-width: 1px;
}