Link share

Last update: 2023-11-03
  • Created for:
  • Developer
    User

Link 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 link share button is controlled with the following CSS class selector:

.s7video360viewer .s7linkshare

CSS properties of the link share tool

width

Button width.

height

Button height.

background-image

The image that is displayed for a given button state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites .

NOTE

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

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.

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

.s7video360viewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7video360viewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7video360viewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7video360viewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7video360viewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_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:

.s7video360viewer .s7linkdialog .s7backoverlay

CSS properties of the background overlay

opacity

Background overlay opacity.

background-color

Background overlay color.

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

.s7video360viewer .s7linkdialog .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:

.s7video360viewer .s7linkdialog .s7dialog

CSS properties of the dialog box

border-radius

Dialog box border radius, in case the dialog box does not take the entire browser.

background-color

Dialog box background color.

width

Should be either unset, or set to 100%, in which case the dialog box takes the entire browser window (this mode is preferred on touch devices).

height

Should be either unset, or set to 100%, in which case the dialog box takes the entire browser window (this mode is preferred on touch devices).

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

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

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:

.s7video360viewer .s7linkdialog .s7dialogheader

CSS properties of the dialog box header

padding

Inner padding for header content.

The icon and the title text are wrapped into an extra container controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .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

.s7video360viewer .s7linkdialog .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 CSS Sprites .

Header title is controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .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:

.s7video360viewer .s7linkdialog .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 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.

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

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

The dialog box footer consists of a Cancel button. The footer container is controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .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 the button. It is controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

CSS properties of the dialog box button container

padding

Inner padding between the footer and the button.

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

.s7video360viewer .s7linkdialog .s7dialogactionbutton

The button is only available on desktop systems.

CSS properties of the Select All button

width

Button width.

height

Button height.

color

Button text color for each state.

background-color

Button background color for each state.

NOTE

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

The Cancel button is controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .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.

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

.s7video360viewer .s7linkdialog .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.

Example - to set up a dialog box footer with a 64 x 34 Cancel button, having text color and background colors that are different for each button state:

.s7video360viewer .s7linkdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7video360viewer .s7linkdialog .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. Main dialog area is controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .s7dialogviewarea

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

height

The height of the main dialog box area. It should be specified only when the dialog box works in desktop mode. It is not applicable when the dialog box is sized to occupy the entire browser window.

background-color

The background color of the main dialog box area.

margin

Outer margin.

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

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

All form content – such as labels and input fields – resides inside a container controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .s7dialogbody

**CSS properties of the dialog box body **

padding

Inner padding.

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

.s7interactivevideoviewer .s7linkdialog .s7dialogbody {
    padding: 10px;
}

All static labels in the dialog box form are controlled with

.s7video360viewer .s7linkdialog .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. **

font-weight

Label font weight.

font-size

Label font size.

font-family

Label font family.

color

Label text color.

The dialog box labels can be localized. See Localization of user interface elements.

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

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

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

.s7video360viewer .s7linkdialog .s7dialoginputwide

CSS properties of the dialog box input-wide field

width

Text width.

padding

Inner padding.

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

.s7video360viewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

The share link is wrapped in a container and controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

CSS properties of the dialog box input container

border

Border around the share link container.

padding

Inner padding.

Example - to set a one pixel gray border around embed code text and have nine pixels of padding:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

The share link itself is controlled with the following CSS class selector:

.s7video360viewer .s7linkdialog .s7dialoglink

CSS properties of the dialog box share link

width

Share link width.

Example - to set the share link to be 450 pixels wide:

.s7video360viewer .s7linkdialog .s7dialoglink {
    width: 450px;
}

On this page