The print tab exposes CSS styles used only when printing the page. This includes setting the following alternate/additional properties for layout components specific to the printable version of the page:
Note: CSS properties are passed down from parent CSS elements to children CSS elements. It is frequently unnecessary to declare the same property for a layout component whose parent has the same property already declared. For instance, if the contentWrapper is set to hidden, the columns within it are also hidden.
Note: When unchecking the last two global settings, no values will be updated, but the margin/padding and black/white options below are enabled for application to individual layout components.
- width
- whether the layout component is displayed or hidden
- whether the layout component is in black and white, or uses its existing display properties
- margins
- padding
Note: CSS properties are passed down from parent CSS elements to children CSS elements. It is frequently unnecessary to declare the same property for a layout component whose parent has the same property already declared. For instance, if the contentWrapper is set to hidden, the columns within it are also hidden.
Layout Component control
Layout components provide the structure for the layout of the page. Selecting a layout component within the control enables the corresponding property controls immediately below it, allowing you to configure the properties of that component directly. The following briefly describes the layout components and hierarchy used to structure your page layout and design:- body: the body tag for the page. Listed at the top of the layout control, this tag encompasses all content displayed on the page. Only the margins and padding are available properties for configuration for this layout component.
- outerWrapper: encompasses all of the <div> tags used to construct the page. Contains the three content subdivisions: header, contentWrapper, and footer.
- header: the top content region of the page, optional for display
- topNavigation: the top navigation region, optional for display. This is selected by default for all SiteAssist layouts.
- footer: the bottom content region of the page, optional for display
- contentWrapper: the central content region of the page, this area contains the content section, as well as any additional column(s) defined for the page.
- content: the central content area vertically between the header and the footer
- columns: additional content areas to the left and right of the central content area, vertically between the header and the footer
Global
The global settings affects the print properties of all layout components.Note: When unchecking the last two global settings, no values will be updated, but the margin/padding and black/white options below are enabled for application to individual layout components.
Convert divs to page width: Applies a global setting of 100% width to all layout components. The width fields are disabled for all layout components if this is checked.
Convert divs to black and white: Applies the Convert to black and white (see below) setting globally to all layout components.
Set margins and padding to zero: Specify the height (a number) and select the units (default blank) for the selected layout component. If auto is selected, the input field will be disabled.
Convert divs to black and white: Applies the Convert to black and white (see below) setting globally to all layout components.
Set margins and padding to zero: Specify the height (a number) and select the units (default blank) for the selected layout component. If auto is selected, the input field will be disabled.
Dimensions
This control sets the printed width dimension for a selected layout component.Width: Specify the width and units (if applicable) for the selected layout component.
Note: If a component has 100% width defined, the print CSS clears the float property by setting it to float: none; in the CSS. This stacks the divs on top of each other, which is a common practice for print CSS.
Note: If a component has 100% width defined, the print CSS clears the float property by setting it to float: none; in the CSS. This stacks the divs on top of each other, which is a common practice for print CSS.
Display
For a selected layout component, this section controls if and how the component is to be printed.Hide: Sets display to none for the selected layout component. If any left or right columns are hidden, the content area's margin's are automatically adjusted.
Convert to black and white: Sets background color to white (i.e. #fff) and text to black (i.e. #000) for the selected layout component.
Set margins and padding to zero: Specify the right margin and select the units (if applicable) for the selected layout component.
Convert to black and white: Sets background color to white (i.e. #fff) and text to black (i.e. #000) for the selected layout component.
Set margins and padding to zero: Specify the right margin and select the units (if applicable) for the selected layout component.