<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<style type="text/css">
/* <![CDATA[ */ @import "/branding/css/tigris.css"; /* ]]> */
</style>
  <script src="/branding/scripts/sc.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="/branding/css/print.css" media="print" />

  <title>Managing custom HTML styling</title>
 </head>

 
<body class="docs" bgcolor="#FFFFFF"><div class="docs" id="projectownercustomstyle"> 
<h2>Managing custom HTML styling</h2>
   <div id="toc">
    <ul>
     <li><strong><a href="/nonav/servlets/HelpTOC">Help index</a></strong></li>
    </ul>

    <ul>
      <li><a href="/nonav/docs/ProjectOwnerAdmin.html">Project owner administration 
        </a> 
        <ul>
          <li><a href="/nonav/docs/ProjectOwnerAdmin.html#aboutprojadmin">About 
            project administration on this site</a></li>
          <li><a href="/nonav/docs/ProjectOwnerAdmin.html#projmgmtguidelines">Project 
            management and leadership guidelines</a></li>
        </ul>
      <li><a href="/nonav/docs/ProjectOwnerEdit.html">Editing and maintaining 
        the Project Home page</a></li>
      <li><a href="/nonav/docs/ProjectOwnerNews.html">Managing project site news</a></li>
      <li><a href="/nonav/docs/ProjectOwnerMembers.html">Adding project members 
        and approving roles</a></li>
      <li><a href="/nonav/docs/ProjectOwnerMailingLists.html">Managing project 
        mailing lists</a></li>
      <li><a href="/nonav/docs/ProjectOwnerDocuments.html">Managing project documentation</a></li>
      <li><a href="/nonav/docs/ProjectOwnerSource.html">Managing project source 
        code</a></li>
      <li><a href="/nonav/docs/ProjectOwnerIssues.html">Tracking and managing 
        project issues</a></li>
      <li><a href="/nonav/docs/ProjectOwnerCustomStyle.html">Managing custom HTML 
        styling</a></li>
    </ul>
  </div>

  <h3>About customizing HTML</h3>
  <p>This site provides several opportunities for users to add HTML content to 
    screens. For instance, the Community, Project home, and My start pages might 
    include custom HTML content.</p>
<p>Custom HTML generally inherits the styling from the page's Cascading Style 
Sheet (CSS) files. Styles and formatting defined in the style sheet will apply 
also to user-supplied content, adding to or possibly overriding any formatting 
specified in it. For instance, the stylesheet might specify that table heading 
(th) content is to be aligned left. Table headings in user-supplied HTML that 
appear center-aligned before inclusion will automatically be left-aligned after 
inclusion. Similarly, the fonts and colors will match that of other HTML 
appearing in the same page.</p>
<p>In most cases, this is desirable for the sake of consistency and ease of HTML 
authoring; however, if it is not, you can use the tips that follow to help 
eliminate unwanted styling differences.</p>
<h3>If the desired CSS styles do not apply...</h3>
<p>To make user-supplied HTML more consistent with SourceCast formatting, try to 
remove the formatting-related elements and attributes from the included HTML. 
For instance, remove all font tags, style, bgcolor, and align attributes, and 
use structural HTML elements like headings (e.g., h3), paragraphs, and list 
constructs instead of breaks (br), images of text, tables for layout, spacer 
images, and so on.</p>
<p>The most likely cause for SourceCast style application failure is that the 
HTML fails to identify the structural significance of the text, instead 
describing its desired appearance. To remedy, convert this sort of HTML:</p><pre><code>&lt;font size="4" face="Arial, Helvetica"&gt;
 &lt;b&gt;
  Welcome to project foo!
 &lt;/b&gt;
&lt;Br&gt;
&lt;img src="../images/spacer.gif" height="1" width="1" vspace="4" alt=""&gt;
 &lt;font size="2"&gt;
  This is only a picture of a paragraph.
 &lt;/font&gt;
&lt;/font&gt;
&lt;Br&gt;
&lt;Br&gt;</code></pre>
<p>...to this: </p><pre><code>&lt;h3&gt;
  Welcome to project foo!
&lt;/h3&gt;
&lt;p&gt;
  This is a real paragraph.
&lt;/p&gt;</code></pre>
<p>Note that the HTML best suited for application of CSS is also the simplest to 
write and edit by hand, and results in smaller (faster) files. Furthermore, it 
tends to remain accessible when rendered outside the context of a desktop PC, 
such as WebTV or a hand-held browsing device. </p>
  <p>A useful tool for automating cleanup of HTML produced by software such as 
    MS Office, FrontPage, or Netscape 4.x Composer is <a 
href="http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a>. A suggested configuration 
    file for Tidy appears in <a 
href="https://www.extranet.collab.net/files/documents/177/166/scast121_external_releasenotes.html#tidy">HTML 
    Tidy Configuration</a> below.</p>
<h3>If SourceCast styles are overriding desired custom styling...</h3>
<p>To preserve custom styling in user-supplied HTML, use inline CSS; i.e., 
HTML's <code>style</code> attribute instead of the various style-related 
attributes and elements such as <code>FONT</code>, <code>bgcolor</code>, 
<code>align</code>, or <code>valign</code> that CSS superseded in 1996.</p>
<p>For instance, the following HTML may not render with the intended styling in 
the context of a SourceCast screen: </p><pre><code>&lt;h2 align="center"&gt;
 &lt;font face="Times" color="#cc0000"&gt;
   Welcome to project foo!
 &lt;/font&gt;
&lt;/h2&gt;</code></pre>
<p>To preserve such styling, the various formatting properties should be 
expressed using CSS: </p><pre><code>&lt;h2 style="text-align:center; font-family:Times; color:#c00"&gt;
  Welcome to project foo!
&lt;/h2&gt;</code></pre>
<p>This inline CSS will override any conflicting styling provided by the 
SourceCast stylesheet. To learn more about CSS usage, check the following 
sources:</p>
<ul>
  <li><a href="http://www.htmlhelp.com/reference/css/">Guide to Cascading Style 
  Sheets</a> (tutorial) 
  <li><a href="http://www.w3.org/TR/REC-CSS2">Cascading Style Sheets, Level 
  2</a> (official specification) </li></ul>
<p>More complex or extensive style customization may call for appendices to the 
SourceCast stylesheets themselves and requires a deeper understanding of CSS in 
SourceCast than this document aims to provide. Please provide feedback to 
CollabNet about your expectations in this area. </p>
<h3><a name=tidy></a>HTML Tidy configuration</h3>
<p>The following is a suggested configuration file for <a 
href="http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a>. This utility will 
clean up many HTML syntax and usage problems that can lead to unexpected results 
with SourceCast in various browser/platform contexts. For best results, use Tidy 
on all HTML you intend to integrate into SourceCast screens. </p><pre><code>tidy-mark: no
markup: yes
wrap: 0
wrap-attributes: no
wrap-script-literals: no
wrap-asp: yes
wrap-jste: yes
wrap-php: yes
literal-attributes: no
tab-size: 1
indent: auto
indent-spaces: 1
indent-attributes: no
hide-endtags: no
input-xml: no
output-xml: yes
add-xml-pi: no
add-xml-decl: no
output-xhtml: no
doctype: auto
char-encoding: ascii
numeric-entities: yes
quote-marks: no
quote-nbsp: yes
quote-ampersand: yes
assume-xml-procins: no
fix-backslash: yes
break-before-br: no
uppercase-tags: no
uppercase-attributes: no
word-2000: yes
clean: yes
logical-emphasis: no
drop-empty-paras: yes
drop-font-tags: yes
enclose-text: yes
enclose-block-text: no
fix-bad-comments: yes
add-xml-space: no
alt-text: ""
write-back: yes
keep-time: no
show-warnings: no
quiet: yes
gnu-emacs: yes
split: no</code></pre>
</div>
</body>
</html>