Incompatibilidad de HTML5 eCatalog CSS con componentes sociales

Pregunta

  1. Queremos eliminar la función de compartir en redes sociales del ajuste preestablecido del visualizador de catálogos electrónicos

  2. Hemos creado nuestro propio visualizador de catálogos electrónicos preestablecido personalizando el CSS y queremos eliminar el uso compartido en redes sociales.

  3. Hemos creado nuestro propio visualizador de eCatalog preestablecido personalizando el CSS y queremos arreglar el uso compartido en redes sociales para que se muestre correctamente.

Respuesta

Incompatibilidad de HTML5 eCatalog CSS con componentes sociales

HTML5 ECATALOG

Eliminación del soporte del uso compartido en redes sociales del catálogo electrónico OOB 4.9.

Caso de uso:un cliente está utilizando el visualizador de OOB eCatalog, o un visor personalizado preestablecido con el visualizador de OOB CSS. Con la versión 4.9, aparece un nuevo botón de uso compartido en redes sociales en la barra de control superior. El cliente no quiere tener esta característica de uso compartido en redes sociales.
URL del problema:

http://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?emailurl=http://s7d1.scene7.com/s7/emailFriend&serverUrl=http://s7d1.scene7.com/is/image/&config=Scene7SharedAsset

Solución:

  1. En la página SPS in Viewers Setup seleccione ajuste preestablecido en uso de Universal_HTML5_eCatalog y seleccione Exportar. El archivo CSS del espectador (html5_ecatalogviewer_dark.css) se descarga en su disco duro.

  2. Abra el archivo CSS en el editor.

  3. Añada el siguiente bloque en la parte superior del archivo:

    .s7ecatalogviewer .s7socialshare {
    display:none;
    }
  4. Cargue el CSS modificado a su propia empresa de SPS.

  5. Cree un nuevo ajuste preestablecido de catálogo electrónico en HTML5 en su empresa, asígnele el ajuste preestablecido con CSS recién cargado y utilícelo en la URL de producción.

URL resuelta:

http://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?emailurl=http://s7d1.scene7.com/s7/emailFriend&serverUrl=http://s7d1.scene7.com/is/image/&config=sashadallas/HTML5_eCatalog_49_no_social&contenturl=http://s7d1.scene7.com/skins/&asset=Scene7SharedAssets/eCatalog_Sample

Eliminar el soporte de uso compartido en redes sociales de la versión 4.8 de eCatalog

Caso de uso:un cliente está utilizando un ajuste preestablecido personalizado del visualizador de eCatalog y un CSS personalizado creado antes de la versión 4.9. Con la versión 4.9, aparece un botón para compartir en redes sociales en un lugar incorrecto y con una apariencia incorrecta. El cliente no quiere tener esta característica de uso compartido en redes sociales.

URL del problema:

http://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?emailurl=http://s7d1.scene7.com/s7/emailFriend&serverUrl=http://s7d1.scene7.com/is/image/&config=sashadallas/HTML5

Solución:

  1. En SPS, en la página Configuración de los visualizadores, seleccione el ajuste preestablecido personalizado del catálogo electrónico en uso y elija Exportar. El archivo CSS del espectador se descarga en su disco duro

  2. Abra el archivo CSS en el editor.

  3. Añada el siguiente bloque en la parte superior del archivo:

    .s7ecatalogviewer .s7socialshare {
    display:none;
    }
  4. Suba el CSS modificado a su empresa. Tenga en cuenta que esto reemplaza su archivo CSS personalizado original.

  5. Es posible que tenga que solicitar la limpieza de la caché de la CDN para su URL de producción al archivo CSS.

URL resuelta:

http://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?emailurl=http://s7d1.scene7.com/s7/emailFriend&serverUrl=http://s7d1.scene7.com/is/image/&config=sashadallas/HTML5_eCatalog_48_no_social&contenturl=http://s7d1.scene7.com/skins/&asset=Scene7SharedAssets/eCatalog_Sample

Adición del soporte del uso compartido en redes sociales al 4.8 eCatalog personalizado

Caso de uso: un cliente está utilizando un ajuste preestablecido personalizado del visualizador del catálogo electrónico y un CSS personalizado creado antes de la versión 4.9. Con la versión 4.9, aparece un botón para compartir en redes sociales en un lugar incorrecto y con una apariencia incorrecta. El cliente desea que la funcionalidad del uso compartido en redes sociales funcione correctamente en su visualizador personalizado.
URL del problema:

http://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?emailurl=http://s7d1.scene7.com/s7/emailFriend&serverUrl=http://s7d1.scene7.com/is/image/&config=sashadallas/HTML5

Solución

  1. En SPS, en la página Configuración de los visualizadores, seleccione el ajuste preestablecido personalizado del catálogo electrónico en uso y elija Exportar. El archivo CSS del espectador se descarga en su disco duro

  2. Abra el archivo CSS en el editor.

  3. Añada el siguiente bloque en la parte superior del archivo:

    /*** SOCIAL SHARE ***/
    .s7ecatalogviewer .s7socialshare {
    position:absolute;
    top:4px;
    left:47px;
    width:28px;
    height:28px;
    }
    .s7ecatalogviewer .s7socialshare .s7socialsharepanel {
    background-color: rgb(231, 231, 231);/whithout alpha/
    background-color: rgba(231, 231, 231, 0);
    }
    .s7ecatalogviewer .s7socialshare .s7socialbutton {
    background-color: transparent;
    }
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='up' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_up?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='over' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_over?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='down' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_down?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='disabled' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_disabled?scl=1&fmt=png-alpha);}
    
    /*** EMAIL SHARE ***/
    .s7ecatalogviewer .s7emailsharestate='up' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_up?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='over' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_over?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='down' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_down?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_disabled?scl=1&fmt=png-alpha);}
    
    /*** EMBED SHARE ***/
    .s7ecatalogviewer .s7embedsharestate='up' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_up?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='over' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_over?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='down' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_down?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_disabled?scl=1&fmt=png-alpha);}
    
    /*** LINK SHARE ***/
    .s7ecatalogviewer .s7linksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_up?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_over?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_down?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_disabled?scl=1&fmt=png-alpha);}
    
    /*** FACEBOOK SHARE ***/
    .s7ecatalogviewer .s7facebooksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_up?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_over?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_down?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_disabled?scl=1&fmt=png-alpha);}
    
    /*** TWITTER SHARE ***/
    .s7ecatalogviewer .s7twittersharestate='up' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_up?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='over' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_over?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='down' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_down?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_disabled?scl=1&fmt=png-alpha);}
    
    /*** Social Share Dialogs CloseButton ***/
    .s7embeddialog .s7closebutton {
    position: absolute;
    width: 28px;
    height: 28px;
    }
    .s7embeddialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled?scl=1&fmt=png-alpha); }
    
    .s7emaildialog .s7closebutton {
    position: absolute;
    width: 28px;
    height: 28px;
    }
    .s7emaildialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled?scl=1&fmt=png-alpha); }
    
    .s7linkdialog .s7closebutton {
    position: absolute;
    width: 28px;
    height: 28px;
    }
    .s7linkdialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled?scl=1&fmt=png-alpha); }
    
    .s7dialogbody { -webkit-transform: translateZ(0);}
    
    /Tablet/
    @media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px),
    only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px)
    {
    /*** SOCIAL SHARE ***/
    .s7ecatalogviewer .s7socialshare {
    position:absolute;
    bottom:4px;
    left:75px;
    width:56px;
    height:56px;
    }
    
    .s7ecatalogviewer .s7socialshare .s7socialbutton{
    width:56px;
    height:56px;
    background-color: rgb(231, 231, 231);
    background-color: rgba(231, 231, 231, 0);
    }
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='up' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='over' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='disabled' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** EMAIL SHARE ***/
    .s7ecatalogviewer .s7emailshare{
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7emailsharestate='up' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='over' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='down' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** EMBED SHARE ***/
    .s7ecatalogviewer .s7embedshare{
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7embedsharestate='up' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='over' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='down' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** LINK SHARE ***/
    .s7ecatalogviewer .s7linkshare{
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7linksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** FACEBOOK SHARE ***/
    .s7ecatalogviewer .s7facebookshare{
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7facebooksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** TWITTER SHARE ***/
    .s7ecatalogviewer .s7twittershare {
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7twittersharestate='up' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='over' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='down' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** Email panel ***/
    .s7emaildialog .s7dialog {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #ffffff;
    border-radius: 0px;
    }
    .s7emaildialog .s7dialogfooter {
    position:absolute;
    bottom: 0px;
    padding: 0;
    }
    .s7emaildialog .s7dialogviewarea {
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    }
    .s7emaildialog .s7dialogheader{
    padding: 0;
    }
    .s7emaildialog .s7dialogviewarea {
    padding: 0;
    }
    .s7emaildialog .s7dialogbody {
    padding: 0;
    }
    .s7emaildialog .s7dialogerrormessage {
    font-size: 16pt;
    }
    .s7emaildialog .s7dialogheadertext {
    font-size: 26pt;
    }
    .s7emaildialog .s7dialoginputlabel {
    font-size: 18pt;
    width: 100px;
    }
    .s7emaildialog .s7dialogaddemailbutton {
    font-size: 16pt;
    }
    .s7emaildialog .s7dialogmessage {
    font-family: Helvetica;
    height: 110px;
    font-size: 17pt;
    }
    .s7emaildialog .s7dialoginputcontainer {
    padding: 15px 10px;
    }
    .s7emaildialog .s7dialoginputshort {
    font-size: 20pt;
    width: 400px;
    }
    .s7emaildialog .s7dialoginputwide {
    font-size: 20pt;
    width: 430px;
    }
    .s7emaildialog .s7dialogthumbnail {
    width: 180px;
    height: 120px;
    }
    .s7emaildialog .s7dialoginfopanel {
    width: 390px;
    }
    .s7emaildialog .s7dialogtitle {
    font-size: 24pt;
    }
    .s7emaildialog .s7dialogorigin {
    font-size: 19pt;
    }
    .s7emaildialog .s7dialogdescription {
    font-size: 17pt;
    }
    .s7emaildialog .s7dialogremoveemailbutton {
    height: 35px;
    width: 35px;
    background-position : center;
    background-repeat: no-repeat;
    }
    .s7emaildialog .s7dialogfooter .s7button {
    font-size: 26pt;
    line-height: 80px;
    }
    .s7emaildialog .s7dialogcancelbutton{
    width: 240px;
    height: 80px;
    margin-right: 20px;
    }
    .s7emaildialog .s7dialogactionbutton {
    width: 240px;
    height: 80px;
    margin-right: 20px;
    }
    
    /*** Link panel ***/
    .s7linkdialog .s7dialog {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #ffffff;
    border-radius: 0px;
    }
    .s7linkdialog .s7dialogfooter {
    position:absolute;
    bottom: 0px;
    }
    .s7linkdialog .s7dialogheader{
    padding: 0;
    }
    .s7linkdialog .s7dialogviewarea {
    padding: 0;
    }
    .s7linkdialog .s7dialogbody {
    padding: 0;
    }
    .s7linkdialog .s7dialogheadertext {
    font-size: 26pt;
    }
    .s7linkdialog .s7dialoginputwide {
    font-size: 16pt;
    width: 590px;
    }
    .s7linkdialog .s7dialoglink {
    font-size: 20pt;
    width: 578px;
    }
    .s7linkdialog .s7dialoginputcontainer {
    padding: 15px 10px;
    }
    .s7linkdialog .s7dialogfooter .s7button {
    font-size: 26pt;
    line-height: 80px;
    }
    .s7linkdialog .s7dialogcancelbutton{
    width: 240px;
    height: 80px;
    margin-right: 20px;
    }
    
    /*** Embed panel ***/
    .s7embeddialog .s7dialog {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #ffffff;
    border-radius: 0px;
    }
    .s7embeddialog .s7dialogfooter {
    position:absolute;
    bottom: 0px;
    }
    .s7embeddialog .s7dialogviewarea {
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    }
    .s7embeddialog .s7dialogheader{
    padding: 0;
    }
    .s7embeddialog .s7dialogviewarea {
    padding: 0;
    }
    .s7embeddialog .s7dialogbody {
    padding: 0;
    }
    .s7embeddialog .s7dialogheadertext {
    font-size: 26pt;
    }
    .s7embeddialog .s7dialoginputwide {
    font-size: 16pt;
    width: 600px;
    }
    .s7embeddialog .s7dialoginputcontainer{
    width: 578px;
    font-size: 14pt;
    }
    .s7embeddialog .s7dialogembedsizelabel {
    font-size: 16pt;
    width: 120px;
    }
    .s7embeddialog .s7dropdownitemanchor {
    font-size: 16pt;
    }
    .s7comboboxexpanded="false" {
    width: 180px;
    }
    .s7embeddialog .s7sizeinp {
    font-size: 16pt;
    }
    .s7embeddialog .s7dialogfooter .s7button {
    font-size: 26pt;
    line-height: 80px;
    }
    .s7embeddialog .s7dialogcancelbutton{
    width: 240px;
    height: 80px;
    margin-right: 20px;
    }
    
    /*** Social Share Dialogs CloseButton ***/
    .s7embeddialog .s7closebutton {
    position: absolute;
    width: 56px;
    height: 56px;
    }
    .s7embeddialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up_touch?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over_touch?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down_touch?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled_touch?scl=1&fmt=png-alpha); }
    
    .s7emaildialog .s7closebutton {
    position: absolute;
    width: 56px;
    height: 56px;
    }
    .s7emaildialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up_touch?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over_touch?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down_touch?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled_touch?scl=1&fmt=png-alpha); }
    
    .s7linkdialog .s7closebutton {
    position: absolute;
    width: 56px;
    height: 56px;
    }
    .s7linkdialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up_touch?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over_touch?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down_touch?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled_touch?scl=1&fmt=png-alpha); }
    }
    @media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
    only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
    {
    /*** SOCIAL SHARE ***/
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='up' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='over' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='disabled' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** EMAIL SHARE ***/
    .s7ecatalogviewer .s7emailsharestate='up' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='over' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='down' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7emailsharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/EmailShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** EMBED SHARE ***/
    .s7ecatalogviewer .s7embedsharestate='up' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='over' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='down' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7embedsharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/EmbedShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** LINK SHARE ***/
    .s7ecatalogviewer .s7linksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7linksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/LinkShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** FACEBOOK SHARE ***/
    .s7ecatalogviewer .s7facebooksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** TWITTER SHARE ***/
    .s7ecatalogviewer .s7twittersharestate='up' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='over' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='down' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** Social Share Dialogs CloseButton ***/
    .s7embeddialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up_touch_2x?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over_touch_2x?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down_touch_2x?scl=1&fmt=png-alpha); }
    .s7embeddialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled_touch_2x?scl=1&fmt=png-alpha); }
    
    .s7emaildialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up_touch_2x?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over_touch_2x?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down_touch_2x?scl=1&fmt=png-alpha); }
    .s7emaildialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled_touch_2x?scl=1&fmt=png-alpha); }
    
    .s7linkdialog .s7closebuttonstate='up' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_up_touch_2x?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='over' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_over_touch_2x?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_down_touch_2x?scl=1&fmt=png-alpha); }
    .s7linkdialog .s7closebuttonstate='disabled' { background-image:url(/is/image/Scene7SharedAssets/CloseButton_light_disabled_touch_2x?scl=1&fmt=png-alpha); }
    }
    @media only screen and (max-device-width:9in) and (max-device-height:9in)
    {
    /*** SOCIAL SHARE ***/
    .s7ecatalogviewer .s7socialshare {
    position:absolute;
    top:8px;
    left:72px;
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7socialshare .s7socialbutton{
    width:56px;
    height:56px;
    background-color: rgb(231, 231, 231);
    background-color: rgba(231, 231, 231, 0);
    }
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='up' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='over' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='disabled' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** EMAIL SHARE ***/
    .s7ecatalogviewer .s7emailshare {
    display:none;
    }
    
    /*** EMBED SHARE ***/
    .s7ecatalogviewer .s7embedshare {
    display:none;
    }
    
    /*** LINK SHARE ***/
    .s7ecatalogviewer .s7linkshare {
    display:none;
    }
    
    /*** FACEBOOK SHARE ***/
    .s7ecatalogviewer .s7facebookshare{
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7facebooksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    
    /*** TWITTER SHARE ***/
    .s7ecatalogviewer .s7twittershare {
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7twittersharestate='up' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_up_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='over' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_over_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='down' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_down_touch?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_disabled_touch?scl=1&fmt=png-alpha);}
    }
    /*for phones with 2 pixel ratio, includes special case for Samsung Galaxy SIII */
    @media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
    only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
    {
    /*** SOCIAL SHARE ***/
    .s7ecatalogviewer .s7socialshare {
    position:absolute;
    bottom: 8px;
    left:72px;
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7socialshare .s7socialbutton{
    width:56px;
    height:56px;
    background-color: rgb(231, 231, 231);
    background-color: rgba(231, 231, 231, 0);
    }
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='up' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='over' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='down' { background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7socialshare .s7socialbuttonstate='disabled' {background-image:url(/is/image/Scene7SharedAssets/SocialShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** EMAIL SHARE ***/
    .s7ecatalogviewer .s7emailshare {
    display:none;
    }
    
    /*** EMBED SHARE ***/
    .s7ecatalogviewer .s7embedshare {
    display:none;
    }
    
    /*** LINK SHARE ***/
    .s7ecatalogviewer .s7linkshare {
    display:none;
    }
    
    /*** FACEBOOK SHARE ***/
    .s7ecatalogviewer .s7facebookshare{
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7facebooksharestate='up' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='over' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='down' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7facebooksharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/FacebookShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    
    /*** TWITTER SHARE ***/
    .s7ecatalogviewer .s7twittershare {
    width:56px;
    height:56px;
    }
    .s7ecatalogviewer .s7twittersharestate='up' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_up_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='over' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_over_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='down' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_down_touch_2x?scl=1&fmt=png-alpha);}
    .s7ecatalogviewer .s7twittersharestate='disabled' {background-image:url(/is/image/Scene7SharedAssets/TwitterShare_dark_disabled_touch_2x?scl=1&fmt=png-alpha);}
    }
  4. Si es necesario, ajuste la posición del botón de uso compartido en redes sociales al editar la clase CSS.s7socialshare

  5. Si es necesario, ajuste las ilustraciones de OOB para los botones y diálogos de uso compartido en redes sociales.

  6. Suba el CSS modificado a su empresa. Tenga en cuenta que esto reemplaza su archivo CSS personalizado original.

  7. Es posible que tenga que solicitar la limpieza de la caché de la CDN para su URL de producción al archivo CSS.

    URL resuelta:http://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?emailurl=http://s7d1.scene7.com/s7/emailFriend&serverUrl=http://s7d1.scene7.com/is/image/&config=sashadallas/HTML5_e

Registro

Información sobre cómo registrar el incidente en RightNow

Producto: Scene7 - Viewers/eCatalog - Integración de páginas web - Viewers, iOS móvil, Disposición HTML5
: Pregunta general - Conocimiento DB (KDB) apropiado

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?