Stylesheets for Online Help - Scott DeLoach, ClickStart

Developing Stylesheets for Online Help Scott DeLoach [email_address] Founder, Click Start Certified Instructor, Flare | RoboHelp | Captivate Author, MadCap Flare for RoboHelp Users © 2007 Click Start , Inc. All rights reserved.

Overview CSS overview Formatting links Layering information Customizing lists Creating a print-specific layout Formatting tables Designing without tables User customizable help

CSS Overview Recommended sizing units IDs and classes Margins and padding ‘ Stacking’ headings

Recommended sizing units Print text: use points (pt) Screen text: use ems or % (percentage) margins, padding: use pixels (px) tables: use % (for liquid layout) or px (for fixed)

IDs and classes IDs Only one element can use a specific ID. <p id=”firstPara”>My first paragraph…</p> #firstPara { color: #00FF00; } Classes Many elements can share the same class. <p class=”printOnly”>Text</a> .printOnly { color: #00FF00; } It’s much easier to find elements with IDs (using JavaScript’s getElementByID method) than elements with classes.

Margins and padding Margins are space around the outside of an element. Padding is space inside the element between its borders and content. Content ................ .......................... .......................... Margin (light blue) Border (orange) Padding (dark blue)

‘ Stacking’ headings h1, h2 { margin-top: 3em; } h1+h2 { margin-top: -3em; } Heading 1 Body text… Heading 1 Heading 2

Formatting links Removing underlines Highlighting links on hover or when clicked Using dotted underlines Styling external and email links Styling document links Adding link icons

Removing underlines a:link a:visited a:hover a:active { text-decoration: none; } Sample link

Highlighting links on hover or during click a:hover, a:active { color: #FF0000; background-color: #FFFF00; }

Using a dotted underline a { text-decoration: none; border-bottom: 1px dotted #000000; } Sample link

Styling external and email links a[href^="http:"] { color: #FF00FF; } a[href^="mailto:"] { color: #0000FF; } Only works for IE in “strict mode.”

Styling links to documents a[href$=".pdf"] { color: #AA00FF; } a[href$=".doc"] { color: #AA00FF; } Only works for IE in “strict mode.”

Adding link icons a[href^="http:"] { background: url(linkarrow.gif) no-repeat right; padding-right: 20px; } Only works for IE in “strict mode.” Sample external link

Layering information Formatting popups Formatting hover text Showing/hiding all layers

Formatting popups <span id="term1" class="popup">This is the popup text.</span> <a href="javascript:void(0);" onMouseover=“showPopup('term1');" onMouseout=“hidePopup('term1');">Popup Link</a>

Formatting popups .popup { position:absolute; left:8; top:36; width:200; border: solid 2px #4F81BD; background-color:#D0D8E8; padding: 5px; z-index:2; visibility:hidden; }

Formatting popups <script language="JavaScript"> function showPopup(id) { document.getElementById(id).style.visibility = "visible"; } function hidePopup(id) { document.getElementById(id).style.visibility = "hidden"; } </script>

Formatting hover text a span { display:none; } a:hover span { display:inline; position:absolute; padding-left: 4px; } <a href="javascript:;">My link<span>Popup text</span></a>

Showing/hiding all layers <a href="javascript:void(0);" onClick="showHide(this)">Show all</a> <p>The<span class="hideInfo"> quick</span> brown fox jumped over the<span class="hideInfo"> lazy</span> dog.</p> Built-in option in Flare’s WebHelp toolbar. Show all The brown fox jumped over the lazy dog.

Customizing lists Using an image as a bullet Adding bullets to non-lists Removing list indentation

Using an image as a bullet ul { list-style-image: url(arrow.gif); } List item 1 List item 2

Add bullet icons to non-lists .note { background: url(pencil.gif) no-repeat left center; padding-left: 20px; } This is a note.

Removing indentation in lists ul { padding-left:1em; margin-left: 0px; } Sample content … Bullet item 1 Bullet item 2 Bullet item 3 More content ...

Creating a print-specific layout Specifying a print-specific stylesheet Adding automatic page breaks Hiding elements in print Changing the background color and image Specifying a serif font Showing link URLs when the user prints Removing link colors and underlining

Specifying a print-specific stylesheet Separate ‘print’ CSS files <link rel="stylesheet" type"text/css“ href="print.css" media="print"> Print-specific styles in a general CSS file @media print { … }

Adding automatic page breaks h1 { page-break-before: always; }

Hiding elements in print <div class=“onlineOnly”> <p>text text text text</p> </div> <span class=“onlineOnly”>…</span> <p class=“onlineOnly”>…</p> <style> .onlineOnly { display: none; } </style>

Changing the background color and image @media print { * { color: black; background-color: white !important; background-image: none !important; } }

Specifying a serif font body { background: white; font-size: 12pt; font-family: ‘times’; }

Showing link URLs in print a:link:after, a:visited:after { content: " (" attr(href) ") "; } a[href^="/"]:after { content: " (http://www.yourwebsite.com" attr(href) ") "; } Doesn’t work in Internet Explorer. Visit Click Start (http://www.clickstart.net) …

Removing link colors and underlining a:link, a:visited { color: black; text-decoration: none; }

Formatting tables Alternating row background colors Highlighting rows on hover

Alternating row background colors tableRowFirst tableRowEven tableRowOdd tableRowEven tableRowOdd tableRowEven

Alternating row background colors

Highlighting rows on hover tr:hover { background-color: #D0D8E8; }

Designing without tables Non-scrolling region Floating images

Creating a non-scrolling region <div id=“head”> <h1>Page Title</h1> </div> <div id=“content”> <p>Page content</p> </div> Page Title Page content ……………………... ...…………………………………… …………………………………… ... …………………………………… ...

Creating a non-scrolling region html { height: 100%; max-height: 100%; /* hide overflow: hidden from IE5 Mac */ /*\*/ overflow: hidden; /**/ } body { height: 100%; max-height: 100%; overflow: hidden; padding: 0; margin: 0; }

Creating a non-scrolling region #head { position: absolute; top: 0; width: 100% min-width: 100% height: 50px; z-index: 3; border-bottom: 1px solid #000000; } html #head { top: 2px; height: 48px; width: 100% }

Creating a non-scrolling region #content { position: absolute; display: block; overflow: auto; z-index: 2; top: 50px; bottom: 0; width: 100%; } * html #content { top: 0; bottom: 0; height: 100%; width: 100%; border-top: 50px solid #ffffff; }

Floating images img { float: left; margin-right: 12px; }

User customizable help Changing the font size Changing the stylesheet

Changing the font size or stylesheet <link rel="stylesheet" type="text/css" href="default.css" id="default" /> <link rel="stylesheet" type="text/css" href="larger.css" id="larger" /> <script> document.getElementById('larger').disabled=true; function changeCSS(reqCSS) { if (reqCSS == 'larger') { document.getElementById('larger').disabled=false; document.getElementById('default').disabled=true; } else { document.getElementById('larger').disabled=true; document.getElementById('default').disabled=false; } } </script>

Resources Cascading Style Sheets: Designing for the Web Hakon Lie and Bert Bos CSS Web Site Design Hands on Training Eric Meyer CSS Anthology: 101 Essential Tips, Tricks & Hacks Rachel Andrew CSS Mastery: Advanced Web Standards Solutions Andy Budd, Simon Collison, and Cameron Moll Discussion group www.css-discuss.org CSS validator jigsaw.w3.org/css-validator

Questions? Scott DeLoach Founder, Click Start Certified Flare Instructor [email_address] CSS to the Point available www.lulu.com/clickstart

About Click Start Click Start provides certified training and consulting for: MadCap Flare Adobe RoboHelp Adobe Captivate We offer public, online, and private (onsite) classes, and group discounts are available. See www.clickstart.net for more information. If you need help: Learning Flare, RoboHelp, or Captivate Migrating to Flare from RoboHelp or another product Designing stylesheets for online help Creating use cases and wireframes/prototypes Developing Web-based training Adding embedding user assistance or context-sensitive help to an application Give us a call: 404.520.0003

Stylesheets for Online Help - Scott DeLoach, ClickStart

Recommended

More Related Content

What's hot (18)

Viewers also liked (6)

Similar to Stylesheets for Online Help - Scott DeLoach, ClickStart (20)

More from Scott DeLoach (20)

Stylesheets for Online Help - Scott DeLoach, ClickStart