HTML5 eCatalog CSS incompatibility with Social components

HTML5 eCatalog CSS incompatibility with Social components

Išči
Navodila za uporabo

Na tej strani

Velja za: Experience Manager

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Question

  1. We want to remove social share from the out-of-box eCatalog viewer preset

  2. We created our own custom eCatalog viewer preset by skinning the CSS and want to remove social share

  3. We created our own custom eCatalog viewer preset by skinning the CSS and want to fix social share so it displays correctly

Answer

HTML5 eCatalog CSS incompatibility with Social components

HTML5 ECATALOG

Remove social share support from the OOB 4.9 eCatalog

Use case: A customer is using OOB eCatalog viewer, or a custom viewer preset with OOB viewer CSS. With 4.9 release, new social share button appears in the top control bar. Customer does not want to have this social sharing feature.
Problem URL:

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

Solution:

  1. In SPS in Viewers Setup page select Universal_HTML5_eCatalog preset in use and choose Export. The viewer's CSS file (html5_ecatalogviewer_dark.css) will be downloaded to your hard drive

  2. Open CSS file in editor

  3. Add the following block to the very top of the file:

    .s7ecatalogviewer .s7socialshare {
display:none;
}

  4. Upload modified CSS to your own SPS company

  5. Create new HTML5 eCatalog preset in your company, assign that preset with newly uploaded CSS, and use that preset in production URL.

Resolved URL:

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

Remove social share support from the custom 4.8 eCatalog

Use case: A customer is using customized eCatalog viewer preset and custom CSS created before 4.9 release. With 4.9 release, a social share button appears in wrong place and incorrectly skinned. Customer does not want to have this social sharing feature.

Problem URL:

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

Solution:

  1. In SPS in Viewers Setup page select your custom eCatalog preset in use and choose Export. The viewer's CSS file will be downloaded to your hard drive

  2. Open CSS file in editor

  3. Add the following block to the very top of the file:

    .s7ecatalogviewer .s7socialshare {
display:none;
}

  4. Upload modified CSS to your company. Note that this will override your original custom CSS file.

  5. You may need to request CDN cache clear for your production URL to CSS file.

Resolved URL:

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

Add social share support to the custom 4.8 eCatalog

Use case: A customer is using customized eCatalog viewer preset and custom CSS created before 4.9 release. With 4.9 release, a social share button appears in wrong place and incorrectly skinned. Customer wants to have social sharing functionality properly functional in his custom viewer.
Problem URL:

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

Solution.

  1. In SPS in Viewers Setup page select your custom eCatalog preset in use and choose Export. The viewer's CSS file will be downloaded to your hard drive

  2. Open CSS file in editor

  3. Add the following block to the very top of the file:

    /*** 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. If needed, adjust the position of the social share button by editing .s7socialshare CSS class

  5. If needed, adjust OOB artwork for social share buttons and dialogs

  6. Upload modified CSS to your company. Note that this will override your original custom CSS file.

  7. You may need to request CDN cache clear for your production URL to CSS file.

    Resolved URL: 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

Logging

Information on how to log the incident in RightNow

Product: Scene7 - Viewers/eCatalog - Web Page Integration - Viewers, mobile iOS, HTML5
Disposition: General Question - Knowledge DB (KDB) Appropriate