| <!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><font size="4" face="Arial, Helvetica"> |
| <b> |
| Welcome to project foo! |
| </b> |
| <Br> |
| <img src="../images/spacer.gif" height="1" width="1" vspace="4" alt=""> |
| <font size="2"> |
| This is only a picture of a paragraph. |
| </font> |
| </font> |
| <Br> |
| <Br></code></pre> |
| <p>...to this: </p><pre><code><h3> |
| Welcome to project foo! |
| </h3> |
| <p> |
| This is a real paragraph. |
| </p></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><h2 align="center"> |
| <font face="Times" color="#cc0000"> |
| Welcome to project foo! |
| </font> |
| </h2></code></pre> |
| <p>To preserve such styling, the various formatting properties should be |
| expressed using CSS: </p><pre><code><h2 style="text-align:center; font-family:Times; color:#c00"> |
| Welcome to project foo! |
| </h2></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> |
