---

Omer wrote:
Hi,

I am using a cusotm s-control. In this control I am implementing a DHTML component ( a data entry table ). What I want to do is to make this HTML page of mine same as AppExchange's UI? Basically I want to copy the UI Look & Feel of AppExchange to my s-control. How can I do this? Are there any CSS exposed that I can plug into my s-control's HTML body? Any help and/or samples will be appreciated.

Thanks

---

Hi Omer, You can spend a lot of time mucking around using the Salesforce .css classes depending on what look you want. I don't know if this sample will help (some of the fields are my custom fields), but take a look. There are several different layouts that you could choose. Hope this helps.

Steve.

P.S. Salesforce staff, I found the style below to be a helpful addition to the .css file. Perhaps it could be "officially" added to the common.css file. Thx.

<br> .bPageBlock .pbSubheader .pbSubExtraLeft {<br> float: left;<br> margin-left: 2em;<br> }<br> .bPageBlock .pbSubheader .pbSubExtraLeft a{<br> color: #FFFFFF;<br> }<br>

--------------- sample -------------------------

Ok, this sucks. I can't figure out how to post html code without it being eaten. So, I'm editing all open angle brackets into "OPENANGLE ". Copy it and fix it up. Sorry, there's gotta be some obvious way to do this, but it's late and time to sleep. :-) Steve.
-----------------------------------------------------


Hi Omer, You can spend a lot of time mucking around using the Salesforce .css classes depending on what look you want. I don't know if this sample will help (some of the fields are my custom fields), but take a look. There are several different layouts that you could choose. Hope this helps.

Steve.

P.S. Salesforce staff, I found the style below to be a helpful addition to the .css file. Perhaps it could be "officially" added to the common.css file. Thx.


OPENANGLE style type="text/css">
.bPageBlock .pbSubheader .pbSubExtraLeft {
float: left;
margin-left: 2em;
}
.bPageBlock .pbSubheader .pbSubExtraLeft a{
color: #FFFFFF;
}
OPENANGLE /style>




There are many variations to explore, try "contact" instead of "account" in the body tag for a different color patter. Try not using editPage's, etc.


OPENANGLE body class="account editPage" style="POSITION: absolute" onLoad="init();">


OPENANGLE div class="bPageBlock bEditBlock secondaryPalette">
OPENANGLE div class="pbHeader">
OPENANGLE div class="pbSubheader first tertiaryPalette">
OPENANGLE h3> Lookup: OPENANGLE /h3>
OPENANGLE /div>
Enter your Lookup information. Matches are exact unless you use "%" (which is automatically added to the First name).
OPENANGLE /div>
OPENANGLE div class="pbBody">
OPENANGLE div class="pbSubsection" id="queryFormHeader">
OPENANGLE table class="detailList" cellpadding="0" cellspacing="0" border="0">
OPENANGLE tr>
OPENANGLE td>
Account Name: OPENANGLE input id="queryAccountName" type="text" size="60" >
OPENANGLE /td>
OPENANGLE td>
Record #: OPENANGLE input id="queryRecordNumber" type="text" size="4">
(If you use a Record #, the other fields must be empty.)
OPENANGLE /td>
OPENANGLE /tr>
OPENANGLE tr>
OPENANGLE td> OPENANGLE /td>
OPENANGLE td>
OPENANGLE h2 class="mainTitle">Lookup Status:OPENANGLE /h2>
OPENANGLE /td>
OPENANGLE /tr>
OPENANGLE tr>
OPENANGLE td>
Last Name: OPENANGLE input id="queryLastName" type="text" size="30">
OPENANGLE /td>
OPENANGLE td rowspan="2" class="pbTitle">
OPENANGLE textarea disabled="true" id="queryStatus" name="queryStatus" rows="2" cols="80"
class="statusNormal">
OPENANGLE /textarea>
OPENANGLE /td>
OPENANGLE /tr>
OPENANGLE tr>
OPENANGLE td>
First Name: OPENANGLE input id="queryFirstName" type="text" size="30">
OPENANGLE /td>
OPENANGLE td> OPENANGLE /td>
OPENANGLE /tr>
OPENANGLE /table>
OPENANGLE /div>
OPENANGLE /div>
OPENANGLE /div>