Print

Print tool consists of a button added to the control bar and the modal dialog box that displays when the tool is activated.

The appearance of the print button is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7print

CSS properties of the print button

margin-top

The offset from the top of the control bar.

margin-left

The distance to the next button on the left, or the left side of the control bar if this is the first button in a row.

width

Width of the button.

height

Height of the button.

background-image

The image that is displayed for a given button state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites .

NOTE

This button supports the state attribute selector, which can be used to apply different skins to different button states.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - To set up a print button that is 28 x 28 pixels, and displays a different image for each of the four different button states.

.s7ecatalogsearchviewer .s7print { 
margin-top: 4px; 
margin-left: 10px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7print[state='up'] { 
background-image:url(images/v2/Print_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7print[state='over'] { 
background-image:url(images/v2/Print_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7print[state='down'] { 
background-image:url(images/v2/Print_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7print[state='disabled'] { 
background-image:url(images/v2/Print_dark_disabled.png); 
}

The background overlay which covers the web page when the dialog box is active is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

CSS properties of the back overlay

opacity

Background overlay opacity.

background-color

Background overlay color.

Example - to set up background overlay to be gray with 70% opacity:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

By default the modal dialog is displayed centered in the screen on desktop systems. The positioning and sizing of the dialog box is managed by the component The dialog is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

CSS properties of the dialog box

border-radius

Dialog box border radius.

background-color

Dialog box background color;

Example - to set up a dialog box to have a grey background:

.s7ecatalogsearchviewer .s7printdialog .s7dialog { 
background-color: #dddddd; 
}

The dialog box header consists of an icon, a title text, and a close button. The header container is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

CSS properties of the dialog box header

padding

Inner padding for header content.

The icon and the title text are wrapped into an additional container controlled with the following:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

CSS properties of the dialog line

padding

Inner padding for the header icon and title.

Header icon is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

CSS properties of the dialog box header icon

width

Icon width.

height

Icon height.

background-image

Icon image.

background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites .

Header title is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

CSS properties of the dialog box header text

font-weight

Font weight.

font-size

Font height.

font-family

Font family.

padding

Internal text padding.

Close button is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

**CSS properties of the close button **

top

Vertical button position relative to header container.

right

Horizontal button position relative to header container.

width

Button width.

height

Button height.

padding

Inner padding of button.

background-image

Button image for each state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites .

NOTE

This button supports the state attribute selector, which can be used to apply different skins to different button states.

The Close button tool tip and the dialog box title can be localized. See Localization of user interface elements for more information.

Example - to set up dialog header with padding, 22 x 22 pixels icon, bold 16 point title, and a 28 x 28 pixel Close button positioned two pixels from the top and two pixels from the right of dialog box container:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader { 
 padding: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgprint_cap.png"); 
    height: 22px; 
    width: 22px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='disabled'] { 
 background-image:url(images/sdk/close_disabled.png); 
}

Dialog box footer consists of Cancel and Send to Print buttons. The footer container is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

**CSS properties of the dialog box footer **

border

Border that you can use to visually separate the footer from the rest of the dialog box.

The footer has an inner container that keeps both buttons. It is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

CSS properties of the dialog box button container

padding

Inner padding between the footer and the buttons.

Cancel button is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

CSS properties of the dialog box cancel button

width

Button width.

height

Button height.

color

Button text color for each state.

background-color

Button background color for each state.

NOTE

This button supports the state attribute selector, which can be used to apply different skins to different button states.

Send to Print button is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

CSS properties of the dialog box action button

width

Button width.

height

Button height.

color

Button text color for each state.

background-color

Button background color for each state.

NOTE

This button supports the state attribute selector, which can be used to apply different skins to different button states.

In addition, both buttons share the same common CSS class which can contain CSS settings that are the same for other dialog box buttons:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

CSS properties of the button

font-weight

Button font weight.

font-size

Button font size.

font-family

Button font family.

line-height

Text height inside the button. Affects vertical alignment.

box-shadow

Drop shadow.

margin-right

Right button margin.

The button tool tips can be localized. See Localization of user interface elements for more information.

Example - to set up a dialog box footer with 64 x 34 Cancel button and a 96 x 34 Send to Print button, with the text color and background color different for each button state:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton { 
 width:96px; 
 height:34px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

The main dialog area (between the header and the footer) contains dialog content. In all cases, the component manages the width of this area, it is not possible to set it in CSS. The main dialog area is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

**CSS properties of the dialog box viewing area **

height

The height of the main dialog box area.

background-color

The background color of the main dialog box area.

margin

Outer margin.

Example - to set up a main dialog area to have an automatically calculated height, have a ten pixel margin, and use a white background:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:auto; 
}

All form content (like labels and input fields) resides inside a container controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

**CSS properties of the dialog box body **

padding

Inner padding.

Example - to set up form content to have ten pixel padding:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody { 
    padding: 10px; 
}

Dialog box form is filled on line-by-line basis, where each line carries a part of the form content (like a label and a text input field). Single form line is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS properties of the dialog box line

padding

Inner line padding.

Example - to set up a dialog box form to have ten pixel padding for each line:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline { 
    padding: 10px; 
}

The size of the block of dialog content is controlled with the following CSS class selector:

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

CSS properties of the dialog input width

width

Block width.

padding

Inner line padding.

Example - to set a content block to be 430 pixels wide and have 10 pixels padding in the bottom:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

All static labels in the dialog box form are controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

This class is not suitable for controlling the label size or position because you can apply it to texts in various places in the form user interface.

**CSS properties of the dialog box label. **

font-weight

Label font weight.

font-size

Label font size.

font-family

Label font family.

color

Label text color.

Dialog box labels can be localized. See Localization of user interface elements for more information.

Example - to set up all labels to be gray, bold, with a nine pixel font:

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel { 
    color: #666666; 
    font-size: 9pt; 
    font-weight: bold; 
}

Input controls are wrapped into the container and controlled with the following CSS class selector::

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

CSS properties of the dialog box input container

padding-left

Inner padding.

Example - to set a 30 pixel padding from the left edge of the dialog box.

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer { 
    padding-left: 30px; 
}

Radio buttons and their caption text are controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

CSS properties of the dialog box option

width

The total width of the radio button with a caption.

color

Caption text color.

The spacing between the radio button and its caption is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

CSS properties of the dialog box option input

margin-right

Spacing between the radio button and its caption.

Numeric pickers for print range selection are controlled with the following CSS class selector

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

CSS properties of the dialog box print range

width

Width of the numeric picker.

margin

Spacing around the numeric picker.

Example - to set up all radio buttons to be 150 pixels wide with black text, ten pixel spacing, and 42 pixel wide numeric pickers:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption { 
    color: #000000; 
    width: 150px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input { 
    margin-right: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange { 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 42px; 
}

The horizontal divider between the page range selection and the print layout sections is controlled with the following CSS class selector:

 .s7ecatalogsearchviewer 
.s7printdialog .s7horizontaldivider

CSS properties of the horizontal divider

border

Border around divider.

padding

Inner padding.

width

Divider width.

margin

Outer margin

Example - to set up a 430 pixel wide grey divider with a 10 pixel vertical padding on both sides, and a ten pixel margin at the top:

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider { 
    border-top: 1px solid #aaaaaa; 
    margin-top: 10px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 430px; 
}

On this page