Compartir vínculos

La herramienta Compartir vínculos consiste en un botón agregado al panel Compartir en Social y el cuadro de diálogo modal que se muestra cuando se activa la herramienta. La posición del botón la gestiona completamente la herramienta de uso compartido de Social .

El aspecto del botón para compartir vínculos se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkshare

Propiedades CSS de la herramienta para compartir vínculos

Es posible quitar el botón del panel Compartir en Social configurando display:none Propiedad CSS en su clase CSS.

La información del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario.

Ejemplo: para configurar un botón de compartir vínculos de 28 x 28 píxeles y mostrar una imagen diferente para cada uno de los cuatro estados de botones diferentes:

.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);
}

La superposición de fondo que cubre la página web cuando el cuadro de diálogo activo está controlado con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7backoverlay

Propiedades CSS de la superposición de fondo

Ejemplo - para configurar una superposición de fondo para que sea gris con un 70% de opacidad:

.s7video360viewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

De forma predeterminada, el cuadro de diálogo modal se muestra centrado en la pantalla de los sistemas de escritorio y toma todo el área de la página web en dispositivos táctiles. En todos los casos, el componente gestiona la colocación y el tamaño del cuadro de diálogo. El cuadro de diálogo se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialog

Propiedades CSS del cuadro de diálogo

Ejemplo - para configurar el cuadro de diálogo para que utilice toda la ventana del navegador y tenga un fondo blanco en los dispositivos táctiles:

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

El encabezado del cuadro de diálogo consta de un icono, un texto de título y un botón de cierre. El contenedor de encabezado se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogheader

Propiedades CSS del encabezado del cuadro de diálogo

El icono y el texto del título se envuelven en un contenedor adicional controlado con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline

Propiedades CSS de la línea de diálogo

El icono de encabezado se controla con el siguiente selector de clase CSS

.s7video360viewer .s7linkdialog .s7dialogheadericon

Propiedades CSS del icono de encabezado del cuadro de diálogo

El título del encabezado se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogheadertext

Propiedades CSS del texto del encabezado del cuadro de diálogo

El botón Cerrar se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7closebutton

Propiedades CSS del botón de cierre

La información del objeto del botón Cerrar y el título del cuadro de diálogo se pueden localizar. Consulte Localización de los elementos de la interfaz de usuario.

Ejemplo - para configurar un encabezado de cuadro de diálogo con relleno, icono de 22 x 12 píxeles, con un título en negrita de 16 puntos. Finalmente, un botón Cerrar de 28 x 28 píxeles situado a dos píxeles de la parte superior y a dos píxeles de la derecha del contenedor de cuadro de diálogo:

.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);
}

El pie de página del cuadro de diálogo consta de un botón Cancelar. El contenedor de pie de página se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogfooter

Propiedades CSS del pie de página del cuadro de diálogo

El pie de página tiene un contenedor interior que mantiene el botón. Se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

Propiedades CSS del contenedor de botones de cuadro de diálogo

El botón Seleccionar todo se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogactionbutton

El botón solo está disponible en sistemas de escritorio.

Propiedades CSS del botón Seleccionar todo

El botón Cancelar se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

Propiedades CSS del cuadro de diálogo Botón Cancelar

Además, ambos botones comparten una clase CSS común que puede contener ajustes CSS que son los mismos para otros botones del cuadro de diálogo:

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

Propiedades CSS del botón

La información sobre herramientas de botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario.

Ejemplo - para configurar un pie de página de cuadro de diálogo con un botón Cancelar de 64 x 34, con colores de texto y de fondo diferentes para cada estado de botón:

.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;
}

El área de diálogo principal (entre el encabezado y el pie de página) contiene contenido de cuadro de diálogo. En todos los casos, el componente gestiona la anchura de esta área; no es posible configurarla en CSS. El área de diálogo principal se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogviewarea

Propiedades CSS del área de visualización del cuadro de diálogo

Ejemplo - para configurar un área del cuadro de diálogo principal para que tenga una altura de 300 píxeles, tenga un margen de 10 píxeles y utilice un fondo blanco:

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

Todo el contenido del formulario (como etiquetas y campos de entrada) reside dentro de un contenedor controlado con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialogbody

Propiedades CSS del cuerpo del cuadro de diálogo

Ejemplo - configurar el contenido del formulario para que tenga un relleno de diez píxeles:

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

Todas las etiquetas estáticas del formulario del cuadro de diálogo se controlan con

.s7video360viewer .s7linkdialog .s7dialoglabel

Esta clase no es adecuada para controlar el tamaño o la posición de la etiqueta porque puede aplicarla a textos en varios lugares de la interfaz de usuario del formulario.

Propiedades CSS de la etiqueta del cuadro de diálogo

Las etiquetas del cuadro de diálogo se pueden localizar. Consulte Localización de los elementos de la interfaz de usuario.

Ejemplo - para que todas las etiquetas sean grises, negrita con una fuente de nueve píxeles:

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

El tamaño de la copia de texto mostrada sobre el vínculo se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialoginputwide

Propiedades CSS del campo de entrada del cuadro de diálogo

Ejemplo - para que la copia de texto tenga una anchura de 430 píxeles y un relleno de 10 píxeles en la parte inferior:

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

El vínculo compartido se envuelve en un contenedor y se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

Propiedades CSS del contenedor de entrada del cuadro de diálogo

Ejemplo - para definir un borde gris de un píxel alrededor del texto del código incrustado y tener nueve píxeles de relleno:

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

El vínculo compartido en sí se controla con el siguiente selector de clase CSS:

.s7video360viewer .s7linkdialog .s7dialoglink

Propiedades CSS del vínculo de uso compartido del cuadro de diálogo

Ejemplo - para que el vínculo compartido tenga una anchura de 450 píxeles:

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

Recursos de Business.Adobe.com

Customer Communications Content Intelligence Personalized Communications Version History Dynamic Media Digital Asset Management