Apex Code Development You need to sign in to do that
Don't have an account?
ClintProd More information on stylesheets and usage needed...
Better documentation on stylesheets and their usage is needed. I am running into issues with using the pbHeader class on S-Controls that I create. It doesn't display like the default Salesforce pages. Reference the following code.
Code:
If you go to the Account tab or any other default Salesforce page, you get a nicely formatted button bar with in the bPageBlock div. If you use the code above on a custom page you get something totally different. The button appears with a white background and kind of outside the bPageBlock div.
<div class="pbHeader">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title="" /><h2 class="mainTitle">Salesforce Development Documentation</h2></td>
<td class="pbButton"><input value=" Edit " class="btn" name="edit" title="Edit" type="button" /></td>
</tr>
</table>
</div>If you go to the Account tab or any other default Salesforce page, you get a nicely formatted button bar with in the bPageBlock div. If you use the code above on a custom page you get something totally different. The button appears with a white background and kind of outside the bPageBlock div.
but there could be several other reasons that it fails to "match" the style rules.
there are also several appexchange scontrols that match the style , use pbHeader, that you could copy from.
Code:
I have the DOCTYPE line in my page exactly as you have posted. I also have used the div tags exactly as on the account detail page, but the top button bar looks different on the s-control compared to the account detail page. It's hard to explain in words. Take the code below and put it into a new s-control and make it so you can view it some how. I made it a tab. You will notice the titles for each of the sections where the buttons are do not look like the account detail page even though this code was taken directly from it.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="/dCSS/Theme2/default/common.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" > <link href="/dCSS/Theme2/default/custom.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" > </head> <body class="customTab2"> <!-- Start page content --> <div class="bPageTitle"> <div class="ptBody secondaryPalette"> <div class="content"> <img src="/s.gif" alt="Account" class="pageTitleIcon" title="Account"/><h1 class="pageType">Page Type<span class="titleSeparatingColon">:</span></h1><h2 class="pageDescription">Record Title</h2><div class="blank"> </div> </div> <div class="links"> <a href="#" class="configLinks" title="Printable View (New Window)">Printable View</a> | <a href="#" class="configLinks">Customize Page</a> | <a href="#" title="Help for this Page (New Window)"><span class="helpLink">Help for this Page</span><img src="/s.gif" alt="" class="helpImage" title=""/></a> </div> </div> <div class="ptBreadcrumb"></div> </div> <script type="text/javascript"> </script> <div class="bPageBlock secondaryPalette" id="ep"> <div class="pbHeader"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title="" /><h2 class="mainTitle">Record Detail</h2></td> <td class="pbButton"> <input value=" Edit " class="btn" name="edit" title="Edit" type="button" /> <input value="Delete" class="btn" name="delete" title="Delete" type="button" /> <input value="Sharing" class="btn" name="share" title="Sharing" type="button" /> <input value="Include Offline" class="btn" name="offline" title="Include Offline" type="button" /> </td> </tr> </table> </div> <div class="pbBody"> <div class="pbSubsection"> <table class="detailList" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="labelCol">Field 1</td> <td class="dataCol col02"> </td> <td class="labelCol">Field 2</td> <td class="dataCol"> </td> </tr> <tr> <td class="labelCol">Field 3</td> <td class="dataCol col02"> </td> <td class="labelCol">Field 4</td> <td class="dataCol"> </td> </tr> <tr> <td class="labelCol last">Field 5</td> <td class="data2Col last" colspan="3"> </td> </tr> </table> </div> <div class="pbSubheader tertiaryPalette"><img src="/s.gif" alt="Hide Section" class="hideListButton" name="Section 1" style="cursor:pointer;" title="Hide Section"/><h3>Section 1<span class="titleSeparatingColon">:</span></h3></div> <div class="pbSubsection"> <table class="detailList" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="labelCol last">Field 6</td> <td class="dataCol col02 last"> </td> <td class="labelCol last">Field 7</td> <td class="dataCol last"> </td> </tr> </table> </div> <div class="pbSubheader tertiaryPalette"><img src="/s.gif" alt="Hide Section" class="hideListButton" name="System Information" style="cursor:pointer;" title="Hide Section"/><h3>System Information<span class="titleSeparatingColon">:</span></h3></div> <div class="pbSubsection"> <table class="detailList" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="labelCol last">Created By</td> <td class="dataCol col02 last"><a href="#">Creator</a>, 1/15/2007 9:52 AM</td> <td class="labelCol last">Last Modified By</td> <td class="dataCol last"><a href="#">Modifier</a>, 3/20/2007 10:22 AM</td> </tr> </table> </div> </div> <div class="pbBottomButtons"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title="" /> </td> <td class="pbButtonb"> <input value=" Edit " class="btn" name="edit" title="Edit" type="button" /> <input value="Delete" class="btn" name="delete" title="Delete" type="button" /> <input value="Sharing" class="btn" name="share" title="Sharing" type="button" /> <input value="Include Offline" class="btn" name="offline" title="Include Offline" type="button" /> </td> </tr> </table> </div> <div class="pbFooter secondaryPalette"> <div class="bg"></div> </div> </div> <!-- Begin RelatedListElement --> <div class="bRelatedList" id="0013000000GyWUP_RelatedContactList"> <!-- Begin ListElement --> <!-- motif: Account --> <div class="bNext"> <div class="withFilter"> <div class="clearingBox"></div> </div> </div> <!-- WrappingClass --> <div class="listRelatedObject contactBlock"> <div class="bPageBlock secondaryPalette"> <div class="pbHeader"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title="" /><img src="/s.gif" alt="" class="relatedListIcon" title=""/><h3>Related List 1</h3></td> <td class="pbButton"> <input value=" New " class="btn" name="newContact" title="New" type="button" /> <input value="Merge" class="btn" name="merge" title="Merge" type="button" /> </td> <td class="pbHelp"><span class="help" title="Related List Help (New Window)"><a href="#" class="linkCol"><span class="linkSpan">Related List Help</span> <img src="/s.gif" alt="Related List Help (New Window)" class="helpImage" title="Related List Help (New Window)"/></a></span></td> </tr> </table> </div> <div class="pbBody"> <table class="list" border="0" cellspacing="0" cellpadding="0"> <tr class="headerRow"> <th class="actionColumn" scope="col">Column 1</th> <th scope="col" class="">Column 2</th> <th scope="col" class="">Column 3</th> </tr> <!-- ListRow --> <tr class=" dataRow even last first"> <td class='actionColumn'><a href="#" class="actionLink" title="Edit">Edit</a> | <a href="#" class="actionLink" title="Del">Del</a></td> <th scope="row" class=" dataCell "><a href="#">Data</a></th> <td class=" dataCell "><a href="#">Data</a></td> </tr> </table> </div> <div class="pbFooter secondaryPalette"> <div class="bg"></div> </div> </div> </div> <div class="listElementBottomNav"></div> <!-- End ListElement --> </div> <!-- End RelatedListElement --> <!-- Begin RelatedListElement --> <div class="bRelatedList" id="0013000000GyWUP_RelatedAccountContactRoleList"> <!-- Begin ListElement --> <!-- motif: Account --> <div class="bNext"> <div class="withFilter"> <div class="clearingBox"></div> </div> </div> <!-- WrappingClass --> <div class="listRelatedObject contactBlock"> <div class="bPageBlock secondaryPalette"> <div class="pbHeader"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title="" /><img src="/s.gif" alt="" class="relatedListIcon" title=""/><h3>Related List 2</h3></td> <td class="pbButton"> <input value=" New " class="btn" name="newRole" title="New" type="button" /> </td> <td class="pbHelp"><span class="help" title="Related List Help (New Window)"><a href="#" class="linkCol"><span class="linkSpan">Related List Help</span> <img src="/s.gif" alt="Related List Help (New Window)" class="helpImage" title="Related List Help (New Window)"/></a></span></td> </tr> </table> </div> <div class="pbBody"> <table class="list" border="0" cellspacing="0" cellpadding="0"> <tr class="headerRow"> <th scope="col" class="noRowsHeader">No records to display</th> </tr> </table> </div> <div class="pbFooter secondaryPalette"> <div class="bg"></div> </div> </div> </div> <div class="listElementBottomNav"></div> <!-- End ListElement --> </div> <!-- End RelatedListElement --> <!-- End page content --> </body> </html>i am in firefox.
the buttons are as i exepct, only thing missing is the slight colored background to the button area
is that the style you are missing?
>It's hard to explain in words.
> Take the code below and put it into a new s-control and make it so you can
>view it some how. I made it a tab.
>You will notice the titles for each of the
>sections where the buttons are do not look like the account detail page
> even though this code was taken directly from it.
but i can't see why this background color is not applied in the code you have, it does look correct tag wise.
Code:
.bPageBlock .pbHeader { // common.css (line 1782) background-color:#EEECD1; border-bottom:1px solid #FFFFFF; margin:0px 2px 0px 0px; padding-bottom:2px; }I found the difference, see below.
The documentation for S-Controls says to use the common stylesheet at https://na1.salesforce.com/dCSS/Theme2/default/common.css. This stylesheet has the background color for the pbHeader class set to all white.
.bPageBlock .pbHeader {
color:#222;
border-bottom:1px solid #F3F3EC;
margin:0px 2px 2px 0px;
background-color:#FFF;
}
The theme2 common stylesheet (https://na1.salesforce.com/sCSS/9.0/1173909788000/Theme2/default/ie/common.css) has a different color set for the background on the pbHeader class.
.bPageBlock .pbHeader {
margin:0px 2px 0px 0px;
padding-bottom:2px;
background-color: #EEECD1;
border-bottom: 1px solid #fff;
}
The issue is with the hard returns in your code. Although the returns make the code easier to read it breaks the style. I can't really explain why but I know that this is what is causing the issue.
The code below will cause the missing color you are referring too:Code:
<div class="bPageBlock secondaryPalette"> <div class="pbHeader"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title=""><img src="/s.gif" alt="" class="relatedListIcon" title=""><h3>Title</h3></td> <td class="pbButton"><input value=" New " class="btn" name="newContact" onclick="#" title="New Contacts" type="button"> <input value="Merge Contacts" class="btn" name="merge" onclick="#" title="Merge Contacts" type="button"></td> <td class="pbHelp"><span class="help" title="Contacts Help (New Window)"> </span></td> </tr> </table> </div> </div>Now take that same code and place it all on one line in your HTML and it will actually display the color:Code: