HTML5 eCatalog CSS incompatibility with Social components

Szukaj

Ostatnia aktualizacja 20 maj 2021 | Dotyczy również Experience Manager

Question

We want to remove social share from the out-of-box eCatalog viewer preset
We created our own custom eCatalog viewer preset by skinning the CSS and want to remove social share
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:

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
Open CSS file in editor
Add the following block to the very top of the file:
```
.s7ecatalogviewer .s7socialshare {
display:none;
}
```
Upload modified CSS to your own SPS company
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:

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
Open CSS file in editor
Add the following block to the very top of the file:
```
.s7ecatalogviewer .s7socialshare {
display:none;
}
```
Upload modified CSS to your company. Note that this will override your original custom CSS file.
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

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.

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
Open CSS file in editor

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

If needed, adjust the position of the social share button by editing .s7socialshare CSS class
If needed, adjust OOB artwork for social share buttons and dialogs
Upload modified CSS to your company. Note that this will override your original custom CSS file.
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

Adobe

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?

Adobe MAX
The Creativity Conference

14–16 października, plaża Miami Beach i online

Zarejestruj się

Adobe MAX

The Creativity Conference

14–16 października, plaża Miami Beach i online

Zarejestruj się

Adobe MAX
The Creativity Conference

14–16 października, plaża Miami Beach i online

Zarejestruj się

Adobe MAX

The Creativity Conference

14–16 października, plaża Miami Beach i online

Zarejestruj się

HTML5 eCatalog CSS incompatibility with Social components

Question

Answer

HTML5 eCatalog CSS incompatibility with Social components

HTML5 ECATALOG

Solution:

Solution:

Solution.

Logging

Pomoc dostępna szybciej i łatwiej

Zapytaj społeczność

Skontaktuj się z nami