MadCap Flare

1
MadCap Flare Controlling Document Look and
Feel with CSS
Mike Hamilton V.P. Product Management MadCap
Software mhamilton_at_madcapsoftware.com
2
Slides

• Slides are available on Mikes blog at
• http//madcapsoftware2.wordpress.com

3
Agenda

• What are Cascading Stylesheets (CSS)?
• CSS Basics
• CSS Rules
• Inheritance
• Cascading
• Classes
• Spans and Divs
• Creating a Stylesheet in Flare
• Flare Stylesheet editor overview

4
Agenda

• Modifying styles
• Applying styles to content
• Applying a style sheet to topics
• Fonts and Font Families
• Font sizing
• Creating a style class

5
Cascading Stylesheets Introduction
6
What Are Cascading Stylesheets?

• A Cascading stylesheet (CSS) document is a simple
  text file.
• A CSS file contains a collection of style rules
  used to control the look and feel of documents.
• A CSS style rule has two parts, a Selector and a
  Declaration

7
Cascading Style Sheets (CSS)

• Style Rules

Value
Property
H1 font-weight bold
Selector
Declaration
H1 font-weight bold colorblack
8
CSS Inheritance

• XHTML elements inherit style attributes
• ltbodygt
• ltpgtSample textlt/pgt
• lt/bodygt
• body font-family Arial

9
HTML Page Structure
10
Cascading

• Three CSS implementations
• External
• Linked to an unlimited number of files
• Embedded
• Affects only the elements in a specific file
• Inline
• Affects only the element applied to

11
Cascading

• Order of precedence
• Inline styles
• Embedded style sheets
• Linked (external) style sheets

12
Inline CSS

• Use the STYLE attribute
• ltpgtThis is normal textlt/pgt
• ltp stylefont-weight boldgtThis is bold textlt/pgt

13
Embedded CSS

• Added to the ltHEADgt area of file
• Use ltSTYLEgt element
• ltHEADgt
• ltTITLEgtNew Topic1lt/TITLEgt
• ltSTYLEgtH1font-weightboldlt/STYLEgt
• lt/HEADgt

14
External CSS

• The ltLINKgt element is used to attach a CSS
  document to an HTML document

ltLINK REL"StyleSheet REFexample.css"gt
15
CLASS attribute

• CLASS attribute can be used to create custom
  styles for a set of items on a page
• P colorblue margin-left3px
• P.myclass colorblue margin-left3px

16
CLASS attribute

• Class Syntax
• In a style sheet
• P.myclass colorblue margin-left3px
• In a page
• ltP CLASSmyclassgtTextlt/Pgt

17
Spans

• Spans format text within an element such as a
  paragraph, list, or table
• Conceptually similar to character styles in MS
  Word/FrameMaker
• ltpgtThis paragraph has a ltspan style"font-weight
  boldgt boldfacedlt/spangt word.lt/pgt
• This paragraph has a boldfaced word.

18
Divs

• Divs allow for grouping many elements together
• ltdiv classindentgt
• ltpgtParagraph 1lt/pgt
• ltpgtParagraph 2lt/pgt
• ltpgtParagraph 3lt/pgt
• lt/divgt

19
Using Cascading Stylesheets in
Flare
20
Creating a Stylesheet

1. Select ProjectgtAdd Stylesheet

21
Creating a Stylesheet

1. In the Template Folders section select Factory
   Templates.
2. In the Templates section, select one of the CSS
   template files available.
3. If necessary, select an alternate folder for
   storing your new stylesheet.
4. In the File Name field, type a name for the
   stylesheet.
5. Click Add.
6. Click OK.

22
Modifying a Style

1. Open a stylesheet. By default stylesheets are
   stored in the Resources folder in the Content
   Manager view.
2. When the stylesheet editor opens you can work in
   either the Simplified or Advanced view. tour
3. In the simple view, double click on the style you
   wish to edit.
4. Select a tab.
5. Select a style property to change.
6. Click OK.

23
Applying a Style

1. Open a topic.
2. Select or click inside the content to which you
   want to apply the style.
3. Select Viewgt Style Window. The Styles window
   appears.
4. Click a style to apply.
5. The style is applied to the selected content

24
Applying a Stylesheet to a Topic

• Open the topic that you want to link to the
  stylesheet.
• Select ToolsgtStylesheet Links.
• The Stylesheet Links dialog box appears.

25
Applying a Stylesheet to a Topic

1. Select a stylesheet.
2. Click .
3. The stylesheet is added to the list on the left.
4. Click OK.
5. The stylesheet is applied to the topic.

26
Font Family

• What is a Font Family?
• A list of alternate fonts for styles used in
  your project
• Why are Font Families important?
• Many fonts on your authoring workstation may not
  be available on the end users
• If you use a font in your Help system that does
  not exist on the users workstation, then the
  browsers pick what font to use!

27
Font Family

• Font Family Guidelines
• Define primary font
• Define secondary fonts for other operating
  systems (UNIX, Macintosh, etc.)
• Order is critical list is hierarchical
• Note Font sets are saved with a project

28
Font Family

• Fonts Common to an OS

29
Font Family

• Recommended Font Families

• Arial, Helvetica, Sans-serif
• Verdana, Arial, Helvetica, Sans-serif
• Times New Roman, Times, Serif
• Courier New, Courier, Mono

30
Font Family

• Demo
• Creating a Font Family in Flare

31
Font Sizing

• There are two ways to define font sizes in an
  HTML environment
• Fixed Font Sizing
• Relative Font Sizing

32
Font Sizing

• Fixed Font Sizing
• Fixed Font Sizing defines the size of fonts using
  absolute units such as points (pt), picas (pc),
  inches (in), centimeters (cm), etc.
• Because of the differences in how various types
  of computers display content, Fixed Font Sizing
  will ALWAYS cause fonts to display smaller on
  some systems (like the Macintosh)

33
Font Sizing

• Relative Font Sizing
• Relative Font Sizing defines the size of fonts
  using relative units such as percentages (), the
  em unit (em), numerical values (1-7), and
  descriptive values (xx-small - xx-large), etc.
• Relative sizes refer to the font size of the
  parent element. This allows fonts to scale
  appropriately to different resolutions, browsers
  or platforms

34
Font Sizing

• Relative Font Size Guidelines
• Define the size for the normal style as 100 to
  provide consistent looking, legible text on any
  platform
• Define heading styles as a percentage of the
  normal text e.g. Heading 1120, Heading
  2115, etc.

35
Font Sizing

• Demo
• Setting Relative Font Sizes
• in Flare

36
Creating a Style Class

1. Open a stylesheet.
2. If the Stylesheet Editor opens to the Simplified
   view, click Advanced View.
3. Select the p style.
4. Click Add Class in the Stylesheet Editor toolbar.
5. The New Style dialog box appears.
6. Type a name for the style.

37
Creating a Style Class

1. Click Create Style.The Create Style dialog box
   appears.
2. In the Name field, type a name for the new style
   without using spaces.

38
Creating a Style Class

• If you do not want to include a style property in
  the new style, click the check box next to the
  value to remove the checkmark.
• If you want the new style to be applied to the
  selected content, select Create style and update
  the source element.
• If you do not want the new style to be
  applied to the selected content, select Create
  style without updating the source element.
• Click OK.
• The new style is added to the stylesheet.

39
Auto-Numbering

• Auto-Numbering can be used to allow for automated
  figure or table numbers, for government style
  paragraph numbering, or for automatically
  generating chapter numbers
• Create a custom style class
• Add auto-numbering to the style class
• Use the new style class in the Master Page
• Link

40
Cross-References

• Cross-references allow for an extremely elegant
  single-source handling of linking
• Controlled by CSS
• Can look like standard hyperlinks for online
  publishing
• Converted to proper page number references when
  going to print
• Link

41
Suggested Reading List

• Watch all of the built in Flare tutorial videos.
• Read as much of the online help overview
  information as I could handle.
• Build a couple or three test projects to get a
  feel for what is going on.
• Coming from RoboHelp, get a copy of Scott's great
  book.
•  

MadCap Flare for RoboHelp Users by Scott
DeLoach ISBN-13 978-0615141459  
42
Suggested Reading List

• HTML, XHTML, and CSS, Sixth Edition (Visual
  Quickstart Guide)
• by Elizabeth Castro
• ISBN-13 978-0-321-43084-7
•  
• Technical Writing 101 A Real-World Guide to
  Planning and Writing Technical Documentation
• by Alan S. Pringle and Sarah O'Keefe
• ISBN-13 978-0970473325
•  
• CSS The Definitive Guide, Second Edition
• by Eric Meyer
• ISBN-13 978-0596527334
•  
• DHTML and CSS for the World Wide Web, Third
  Edition (Visual Quickstart Guide)
• by Jason Teague
• ISBN-13 978-0-201-73084-5

43

• Questions?