here is an rxample to create your cutsom page like crm page.
The final page:
how to do it?
1. create new css file name: crmcs.css
paste start:
formButton
{
background-color: #6699cc;
padding: 2px 4px 3px 4px;
color: #000000;
font-size: 8pt;
font-family: tahoma;
height: 17px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B4C5DF, EndColorStr=#91A9D0);
border-width: 0px;
}
TEXTAREA
{
font-size: 8pt;
font-family: tahoma;
width: 100%;
height: 100%;
border: 1px solid #6699CC;
}
.inputfields
{
font-size: 8pt;
font-family: tahoma;
width: 100%;
height: 19px;
border: 1px solid #6699CC;
}
INPUT.rad
{
width: 15px;
border: 0px;
cursor: hand;
}
DIV.tab
{
overflow-y: auto;
padding: 10px;
}
TD.sec
{
width: 100%;
color: #000000;
font-weight: bold;
padding-left: 0px;
padding-bottom: 2px;
text-overflow: ellipsis;
overflow: hidden;
}
TD
{
font-size: 11pt;
font-family: tahoma;
}
TD.bar
{
border-bottom: 1px solid #96B3DD;
}
SPAN.req
{
font-weight: bold;
color: #FF0000;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 5px;
}
TD.statusBar
{
background-color: #80ABD4;
color: #000000;
background-image: url(images/statusbar_back.gif);
background-repeat: repeat-x;
padding-left: 5px;
height: 24px;
border-bottom: 1px solid #485673;
font-weight: bold;
}
LABEL
{
cursor: hand;
}
TD.radioLabel
{
padding-left: 2px;
padding-right: 10px;
}
TABLE.layout
{
table-layout: fixed;
width: 100%;
height: 100%;
}
div.tab
{
width: 100%;
height: 100%;
border: 1px solid #898C95;
background-color: #EAF3FF;
display: none;
}
body
{
font-size: 11px;
margin: 0px;
border: 0px;
background-image: url(images/form_back.gif);
background-repeat: repeat-x;
background-color: #acc0e9;
cursor: default;
}
td
{
font-size: 11px;
}
table
{
cursor: default;
}
a
{
color: #0000ff;
font-weight: bold;
}
.menubar
{
height: 44px;
}
.formtitle
{
padding-left: 10px;
}
TD.entitytype
{
font-weight: bold;
font-size: 11px;
padding-top: 2px;
}
TD.navtitle
{
font-weight: bold;
font-size: 18px;
padding-top: 1px;
color: #6699CC;
}
span.menu
{
height: 100%;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #7288AC;
}
table.mnuBar
{
color: #000000;
height: 44px;
width: 100%;
background-image: url(images/form_toolbar_back.gif);
background-repeat: repeat-x;
}
paste end
Create new page ExamplePage.htm
paste start:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; CHARSET=UTF-8" />
<link rel="stylesheet" type="text/css" href="crmcs.css">
<title>Rami example</title>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr class="menubar">
<td>
<table class="mnuBar" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td />
</tr>
</tbody>
</table>
<table class="formtitle" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="entitytype" nowrap="nowrap">
Contact: Rami Heleg
</td>
</tr>
<tr>
<td class="navtitle">
Update contact
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 10px;">
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tbody>
<tr>
<td>
<div style="display: inline" class="tab">
<table style="table-layout: fixed" cellspacing="0" cellpadding="3" width="100%" height="100%">
<colgroup>
<col width="90">
<col>
<col width="10">
<col width="90">
<col>
</colgroup>
<tbody>
<tr>
<td>
Full Name
<span class="req">*</span>
</td>
<td colspan="2">
<input id="fullname" class="inputfields" tabindex="1" maxlength="200" name="fullname"
req="1">
</td>
</tr>
<tr>
<td class="sec bar" colspan="5">
Section 1
</td>
</tr>
<tr height="5">
<td>
</td>
</tr>
<tr>
<td>
First Name
</td>
<td>
<input id="firstname" class="inputfields" tabindex="8" maxlength="250" name="category">
</td>
<td>
</td>
<td>
Last Name
</td>
<td>
<input id="lastnane" class="inputfields" tabindex="9" maxlength="250" name="subcategory">
</td>
</tr>
<tr>
<td class="sec bar" colspan="5">
Section 2
</td>
</tr>
<tr height="5">
<td colspan="5">
</td>
</tr>
<tr>
<td>
Sex
</td>
<td colspan="4">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<input id="crmFormdonotemail0" class="rad" tabindex="200" value="0" type="radio"
name="crmFormdonotemail">
</td>
<td class="radioLabel">
<label for="crmFormdonotemail0">
Male</label>
</td>
<td>
<input id="crmFormdonotemail1" class="rad" tabindex="201" value="1" type="radio"
name="crmFormdonotemail">
</td>
<td class="radioLabel">
<label for="crmFormdonotemail1">
Female
</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<select style="width: 100%; font-family: tahoma,
Arial; font-size: 11px" class="selectBox">
<option selected>Isreal</option>
<option>USA</option>
</select>
</td>
<td>
</td>
<td>
Status
</td>
<td>
<select style="width: 100%; font-family: tahoma,
Arial; font-size: 11px" class="selectBox">
<option selected>Married</option>
<option>Single</option>
<option>Divorced</option>
</select>
</td>
</tr>
<tr>
<td>
Description
</td>
<td height="100%" colspan="4">
<textarea id="description" tabindex="2" name="description" maxlength="2000"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height="23">
<td class="statusbar" colspan="2">
<b>Status:</b> Vip Contact
</td>
</tr>
</tbody>
</table>
</body>
</html>
paste End:
Enjoy,
Rami Heleg
