Embed share embed-share

Embed share tool consists of a button added to the Social share panel and the modal dialog box that displays when the tool is activated. The position of the button is fully managed by the Social share tool.

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

.s7ecatalogviewer .s7embedshare

CSS properties of the embed share tool

It is possible to remove the button from the Social share panel by setting display:none CSS property on its CSS class.

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

Example - To set up an embed share button that is 28 x 28 pixels, and displays a different image for each of the four different button states:

.s7ecatalogviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7ecatalogviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7ecatalogviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7ecatalogviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

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

.s7ecatalogviewer .s7embeddialog .s7backoverlay

CSS properties of the background overlay

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

.s7ecatalogviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

By default the modal dialog box is displayed centered in the screen on desktop systems and takes the entire web page area on touch devices. In all cases, the positioning and sizing of the dialog box is managed by the component. The dialog box is controlled with the following CSS class selector:

.s7embeddialog .s7dialog

CSS properties of the dialog box

Example - To set up the dialog box to use the entire browser window and have a white background on touch devices:

.s7ecatalogviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

Dialog box header consists of an icon, a title text, and a close button. The header container is controlled with

.s7ecatalogviewer .s7embeddialog .s7dialogheader

CSS properties of the dialog box header

The icon and the title text are wrapped into an extra container controlled with

.s7ecatalogviewer .s7embeddialog .s7dialogheader .s7dialogline

CSS properties of the dialog line

Header icon is controlled with the following CSS class selector

.s7ecatalogviewer .s7embeddialog .s7dialogheadericon

CSS properties of the dialog box header icon

Header title is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogheadertext

CSS properties of the dialog box header text

Close button is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7closebutton

**CSS properties of the close button **

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

Example - To set up dialog box header with padding, 24 x 14 pixels icon, and a bold 16 point title. And a 28 x 28 pixels Close button, positioned two pixels from the top, and two pixels from the right of dialog container:

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

Dialog footer consists of “cancel” button. The footer container is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogfooter

**CSS properties of the dialog box footer **

The footer has an inner container which keeps the button. It is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogbuttoncontainer

CSS properties of the dialog box button container

Select All button is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton

The button is only available on desktop systems.

CSS properties of the Select All button

Cancel button is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton

CSS properties of the dialog box cancel button

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

.s7ecatalogviewer .s7embeddialog .s7dialogfooter .s7button

CSS properties of the button

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

Example - To set up a dialog box footer with a 64 x 34 Cancel button, an 82 x 34 Select All button, and having a text color and background color that is different for each button state:

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

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

.s7ecatalogviewer .s7embeddialog .s7dialogviewarea

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

Example - To set up a main dialog box area to be 300 pixels height, have a ten pixel margin, and use a white background:

.s7ecatalogviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

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

.s7ecatalogviewer .s7embeddialog .s7dialogbody

If the height of this container appears to be bigger than the main dialog box area, a vertical scroll is enabled automatically by the component.

**CSS properties of the dialog box body **

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

.s7ecatalogviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

All static labels in the dialog box form are controlled with

.s7ecatalogviewer .s7embeddialog .s7dialoglabel

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

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

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:

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

The size of the text copy displayed on top of the embed code is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialoginputwide

CSS properties of the dialog box input-wide field

Example - To set text copy to be 430 pixels wide and have a ten pixel padding in the bottom:

.s7ecatalogviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

The embed code is wrapped into container and controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer

CSS properties of the dialog box input container

Example - To set a one pixel gray border around embed code text, make it 430 pixels wide, and have a ten pixel padding:

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

The actual embed code text is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer

CSS properties of the dialog box input container

Example - To set up the embed code to use break-word word wrapping:

.s7ecatalogviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

Embed size label and drop-down are positioned in the bottom of the dialog box and put into a container controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel

CSS properties of the dialog box embed size panel

Example - To set up an embed size panel to have ten pixels of padding:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

The size and alignment of the embed size label is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel

CSS properties of the dialog box embed size panel

Example - to set the embed size label to be top-aligned and 80 pixels wide:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

The width of the embed size combo box is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7combobox

CSS properties of the combo box

Example - To set the embed size combo box to be 300 pixels wide when showing a pre-defined item and 110 pixels wide when showing a custom size:

.s7ecatalogviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7ecatalogviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

The height of the combo box text is defined by a special inner element and is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxtext

CSS properties of the combo box text

Example - To set embed size combo box text height to 40 pixels:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

The combo box has a “drop down” button on the right and it is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton

CSS properties of the combo box button

Example - to set a drop-down button to 28 x 28 pixels and have a separate image for each state:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

The panel with the list of embed sizes displayed when combo box is opened, is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7comboboxdropdown

The size and position of the panel is controlled by the component. It is not possible to change it through CSS.

CSS properties of the combo box drop-down

Example - To set the combo box panel to have a one pixel gray border:

.s7ecatalogviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

A single item in a drop-down panel that is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dropdownitemanchor

CSS properties of the drop-down item anchor

Example - To set the combo box panel item to have a white background:

.s7ecatalogviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

A check mark displayed to the left of the selected item inside the combo box panel that is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7checkmark

CSS properties of the check mark box

Example - To set the check mark icon to 25 x 25 pixels:

.s7ecatalogviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

When “Custom Size” option is selected in the embed size combo box, the dialog box displays two extra input fields to the right to allow the user to enter a custom embed size. Those fields are wrapped in a container that is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsizepanel

CSS properties of the dialog box custom size panel

Example - To set custom size input fields panel to be 20 pixels to the right of the combo box:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

Each custom size input field is wrapped in a container that renders a border and sets the margin between the fields. It is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsize

CSS properties of the dialog box custom size

Example - To set the custom size input fields to have a one pixel gray border, margin, padding, and be 70 pixels wide:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

If vertical scrolling is needed, the scroll bar is rendered in the panel near the right edge of the dialog box, which is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7dialogscrollpanel

CSS properties of the dialog box scroll panel

Example - To set up a scroll panel to be 44 pixels wide:

.s7ecatalogviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

The appearance of the scroll bar area is controlled with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7scrollbar

CSS properties of the scroll bar

Example - To set up a scroll bar that is 28 pixels wide and has an eight pixel margin from the top, right, and bottom of the scroll panel:

.s7ecatalogviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

Scroll bar track is the area between the top and bottom scroll buttons. The component automatically sets the position and height of the track. The track is controlled with the following CSS class selector

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolltrack

CSS properties of the scroll bar track

Example - To set up a scroll bar track that is 28 pixels wide and has a gray background:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

The scroll bar thumb moves vertically within a scroll track area. Its vertical position is fully controlled by the component logic. However, thumb height does not dynamically change depending on the amount of content. The thumb height and other aspects can be configured with the following CSS class selector:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb

CSS properties of the scroll bar thumb

Example - To set up a scroll bar thumb that is 28 x 45 pixels, has a ten pixel margin on the top and bottom, and has different artwork for each state:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

The appearance of the top and bottom scroll buttons is controlled with the following CSS class selectors:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

It is not possible to position scroll buttons using CSS top, left, bottom, and right properties. Instead, the viewer logic automatically positions them.

CSS properties of the top and bottom scroll buttons

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

Example - To set up scroll buttons that are 28 x 32 pixels and have different artwork for each state:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}