Private Outputs on MadCap Central

You can produce private output that requires a user to log in with an email and Central password. Without credentials, people cannot see the output. It is possible to set private output for all output types supported by Central. Also, accessing private output is not limited to people in your company. Central has a free viewer user type that you can use to add any of your customers to your Central license, and then give them access to live private output.

After users log in to see private output, an account link displays in the output interface for HTML5 targets (not for other output types). If the output is not set to private, this link is not shown. When users hover over the link, a menu shows two options.

For more about integrating with Central, see MadCap Central and Flare.

For more details about making output private, see the Central online Help.

By default, the account link is included automatically in the header of the regular skin. However, if you want the account link to display somewhere else in the output, you can use a Central Account proxy and hide the link from the regular skin.

Note You cannot use a proxy and skin component to customize the account link location for Tripane output. It is supported only for Side Navigation, Top Navigation, and skinless output.

  1. (Optional) Add a Central Account skin component if you want to control the look of the account link in the output. See Adding Skin Files.
  2. Open a topic (if you want the link to display on only one page) or template page (if you want the link to display on many pages).
  3. In the topic or template page, place your cursor where you want the account link to be added. In a template page you may need to press the down arrow on your keyboard and then press ENTER at the correct location. Then select Insert > Proxy > Insert Central Account Proxy.
  4. (Optional) In the dialog, you can select a skin component to affect the look of the account link.
  5. Click OK.
  6. Click Save the active file. to save your work.
  7. If you inserted the proxy into a template page, make sure to associate the template page with a target. See Associating Template Pages With Targets.
  8. Open the regular HTML5 skin, and set the account link to be hidden from the top of the output.
    1. In the local toolbar, make sure Web Medium is selected.
    2. On the left, select the Styles tab.
    3. In the style group section, expand Header > Central Account, and select Element.
    4. In the properties section, expand Layout, and set the Display field to none.
    5. Click Save the active file. to save your work.
  1. Open a regular HTML5 skin, or a Central Account skin component if you are using a proxy.
  2. In the local toolbar, select the appropriate medium—Web, Tablet, or Mobile. For more information about these mediums and responsive output, see Responsive Skins.
  3. Select the Styles tab.

  4. If you opened a regular skin, in the style group section, expand Header > Central Account.

    Then click any of the styles.

    Header > Central Account > Element

    This controls the look of the entire account link area.

    Header > Central Account > Element > (hover)

    This controls the look of the entire account link area when a user hovers over it.

    Header > Central Account > Link

    This controls the look of the area showing the image, text, and down arrow that the user first sees.

    Header > Central Account > Link > (hover)

    This controls the look of the area showing the image, text, and down arrow when a user hovers over it.

    Header > Central Account > Link > Image

    This controls the image shown to the left of the word "Account."

    Header > Central Account > Menu

    This controls the look of the entire menu area. If you click this area in the preview to display the drop-down options, the popup will continue to display until you click again. This means you can continue to view the options while you make adjustments to the styles, allowing you to see your changes immediately.

    Header > Central Account > Menu > Link

    This controls the look of the link for individual menu items.

    Header > Central Account > Menu > Link > (hover)

    This controls the look of the link for individual menu items when a user hovers over them.

    Header > Central Account > Menu > Separator

    This controls the look of area that separates menu items.

    For Tripane skins there is an additional style called "Search Bar and Central Account Container." This style lets you hide or show the container holding the search bar and Central account link.

  5. Expand any of the nodes and complete the necessary fields. The properties and fields that you see are different for each node. Also, you might see nodes in the full skin that you do not see in a skin component, and vice versa. Following is a general list in alphabetical order:

    Absolute Position

    For certain styles, this can allow you to be more precise with the position of an element. This might be necessary to prevent the element from disappearing from the screen. In addition to entering values with specific units of measurement (e.g., pixels), you can enter auto in a field. You might do this, for example, if you want the left or right property to have a particular value, but leave the other property to be adjusted automatically.

    Alignment

    Depending on the style and element you are working with, you may be able to select one or more of the following:

    • Horizontal This option lets you choose whether to position the element to the left, middle, or right.
    • Vertical This option lets you choose whether to position the element on the top, middle, or bottom.
    • Full Row This option allows the element to take up all of the space horizontally in the header.
    • Order This option determines which element comes first (1), second (2), third (3), or fourth (4) in the header. Side Navigation has three elements (logo, search bar, and Central account link), but Top Navigation has four (logo, search bar, menu, and Central account link).

    Example  

    If you have a Side Navigation skin, the Central Account Element is set to have an order value of 4. This means it appears to the right of both the logo and the search bar, which have lower values for that option (the logo is set at 1, and the search bar is set at 3).

    You change the values for the Alignment > Order property as follows:

    • Logo: 4

    • Search Bar: 2

    • Central Account Element: 1

    As a result, the header will look like this in the output:

    Background

    You can change any of the following to affect the background:

    • Gradient This lets you change the background color using a progression effect. Select the beginning gradient color in the first field, and then select a second gradient color in the second field. You can use any of the following to enter or select a color.

      You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color or make the background transparent.

      This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.

      Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.
    • Color This lets you select a single color.
    • Image This lets you select an image for the background. Click and use the dialog to select an image file.
    • Repeat Use this field to tell Flare whether the image should repeat or not.

    Note The Image field has the highest precedence, which means that if you enter settings in all of the Background fields, the image will win. Gradient has the next highest precedence. If you want to use the Color field, you need to make sure the Gradient fields are set to transparent and that there is no image selected.

    Block

    This is the container (or "block") holding content in an element. You can change any of the following to affect the block:

    • Line Height This is how tall the container is that holds the content. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters). See Units of Measurement.
    • Text Align This changes the alignment of the content. Click in the field and select an option (center, justify, left, right).
    • Text Indent This is how far the text is moved inward. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters). See Units of Measurement.
    • Word Wrap You can click in the Word Wrap field and choose whether to wrap text for the element (normal) or not (nowrap).

    Box Shadow

    You can change any of the following to affect the box shadow on the element:

    • Horizontal Shadow Length This is the position of the horizontal shadow. Negative values are allowed. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).
    • Vertical Shadow Length This is the position of the vertical shadow. Negative values are allowed. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).
    • Shadow Blur Length This is the blur distance. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

    • Shadow Color This lets you select a color for the shadow. You can use any of the following:

      You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color or make the background transparent.

      This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.

      Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.
    • Shadow Inset This changes the shadow from an outer shadow (outset) to an inner shadow. Click in the field and select an option. If you select false the shadow will be outset. If you select true the shadow will be inset.

    Font

    You can change any of the following to affect the font:

    • Color This lets you select a color for the font. You can use any of the following:

      You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color.

      This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.

      Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.
    • Family You can select or type a specific font family (e.g., Arial, Tahoma, Verdana).
    • Size You can change the font size. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points).
    • Weight You can click in this field and make the font normal or bold.
    • Style You can click in this field and make the font normal or italic.

    Height

    You enter a height for the element. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

    Layout

    You can click in the Display field and choose one of the options (some of these options might not be available for certain styles):

    • none The element will not be shown.

    • block The element will be shown and adds a line break after it. For some elements this option might be called flex, which reflects the flexbox technology associated with it.

    • inline The element will be shown but does not add a line break after it, allowing it to be positioned next to other elements.

    • inline-block The element will be shown but does not add a line break after it, allowing it to be positioned next to other elements. This is similar to inline; however, with this option, a width and height can be set on the element, and top/bottom margin and padding settings are respected.

    Margin

    You can change the margin for any of the sides on the element (Left, Right, Top, Bottom). In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

    Padding

    You can change the padding for any of the sides on the element (Left, Right, Top, Bottom). In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

    Size

    You can change the height or width of the element. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

    Text Decoration

    You can click in the Decoration field and select a text decoration (e.g., underline, line-through, overline, underline).

  6. Click Save the active file. to save your work.