function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
valygrlvalygrl 

New user - HTML / CSS question

I am creating an inline s-control to display some additional values for a custom object from a related object, and I want it to look like part of the regular page.  I'm using the example from here:
 
 
But the bPageBlock class puts a border on the section, that I don't want.  I just want the background to be the same color as the rest of the page. 
 
the beginning of the html I'm using looks like this:
 
var output =  "<div class='bPageBlock secondaryPalette'>";
output += "<div class='pbBody'>";
output += "<DIV class=pbSubsection>";
output += "<table class='detailList' cellpadding='0' cellspacing='0' border='0'>";
 
Thanks in advance, I know this is a total beginner-question.
 
 
 
Greg HGreg H

That style guide on the wiki is useful for getting a handle on how the styles are applied when the scontrol you are building is stand-alone.  Since your sControl is inline, there are a number of styles that will get applied to your code if you include the CSS files indicated by that guide and use their suggested style elements.

The best way to accomplish what you want is to simply declare the necessary styles at the top of your sControl and remove the references to any external style sheets.  I've included some code here that you can copy and paste to get started:

Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Inline Sample</title>
<!--
 Created by: Greg Hacic
 Questions—: greg@interactiveties.com
-->
<style type="text/css">
body, td {margin:0px; color:#333;}
body {background-repeat: repeat-x; background-position: left top; font-size: 75%; font-family: 'Arial', 'Helvetica', sans-serif; background-color: #F3F3EC;}
a {color:#333;}
a:hover {text-decoration:underline;}
th {text-align: left; font-weight: bold; white-space: nowrap;}
form {margin:0px; padding:0px;}
h1, h2, h3, h4, h5, h6 {font-family: "Verdana", "Geneva", sans-serif; font-size: 100%; margin:0px; display:inline;}
.titleSeparatingColon {display: none;}
.bPageBlock {width:100%;}
.bPageBlock .pbSubheader {background-color:#222; color:#FFF; font-weight:bold; font-size: 91%; padding:2px 2px 2px 5px; margin-top: 3px; overflow: hidden; margin-bottom: 2px;}
.bPageBlock .pbBody {background-color:#F3F3EC;}
.bPageBlock .detailList {width:100%;}
.bPageBlock .detailList th, .bPageBlock .detailList td {vertical-align:top;}
.bPageBlock .labelCol {padding:2px 10px 2px 2px; text-align:right; font-size: 91%; font-weight: bold; color:#333;}
.bPageBlock .detailList .labelCol {width: 18%;}
.bPageBlock .dataCol {padding:2px 2px 2px 10px; text-align:left;}
.bPageBlock .detailList .dataCol {width:32%;}
.bPageBlock .detailList .data2Col {padding: 2px 2px 2px 10px; text-align: left; width: 82%;}
.bEditBlock .detailList .dataCol, .bEditBlock .detailList .data2Col {padding: 0 2px 0 10px;}
.bPageBlock .detailList .col02 {border-right: 20px solid #F3F3EC;}
.bPageBlock .detailList tr td, .bPageBlock .detailList tr th {border-bottom:1px solid #E3DEB8;}
.editPage .bPageBlock .detailList tr td, .editPage .bPageBlock .detailList tr th {border-bottom: none;}
.bPageBlock .detailList th.last, .bPageBlock .detailList td.last, .bPageBlock.bLayoutBlock .detailList tr td, .bPageBlock.bLayoutBlock .detailList tr th {border-bottom:none;}
.bPageBlock .detailList table td, .bPageBlock .detailList table th {border-bottom-style: none;}
.lead .tertiaryPalette {background-color: #EBAF59; border-color: #EBAF59;}
</style>
</head>
<body class="lead">
<div class="bPageBlock">
 <div class="pbBody">
  <div class="pbSubsection">
   <table class="detailList" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td class="labelCol">Field One</td>
     <td class="dataCol col02">Value One</td>
     <td class="labelCol">Field Two</td>
     <td class="dataCol">Value Two</td>
    </tr>
    <tr>
     <td class="labelCol">Field Three</td>
     <td class="dataCol col02">Value Three</td>
     <td class="labelCol">Field Four</td>
     <td class="dataCol">Value Four</td>
    </tr>
    <tr>
     <td class="labelCol">Field Five</td>
     <td class="dataCol col02">Value Five</td>
     <td class="labelCol">Field Six</td>
     <td class="dataCol">Value Six</td>
    </tr>
    <tr>
     <td class="labelCol last">Field Seven</td>
     <td class="dataCol col02 last">Value Seven</td>
     <td class="labelCol last">Field Eight</td>
     <td class="dataCol last">Value Eight</td>
    </tr>
   </table>
  </div>
 </div>
</div>
</body>
</html>
 
I hope this proves useful.
-greg
pierrepierre
Thank you Greg, it worked perfectly for me, except it added an extra bottom line due to
    .bPageBlock .detailList tr td, .bPageBlock .detailList tr th {border-bottom:1px solid #E3DEB8;
so I simply changed it to ....border-bottom: none; and it was fine.
Gary_HGary_H
Thanks - a real time saver!