CSS “SKIN” FOR PLUGIN – FREE TO USE

  • mikecarnohan

    (@mikecarnohan)


    4 years ago

    /* CSS TO SKIN ETSY STORE PLUGIN FOR WORDPRESS BY M. CARNOHAN 2/25/21 V.1.0 */

/* OPTIMIZE ALL IMAGES ON ENTIRE WEBSITE - USE CAUTION, CAN CAUSE ISSUES WITH HARDWARE ACCELERATION SETTINGS */
  img {
    -webkit-backface-visibility: hidden; 
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0); }

/* ETSY SHOP CONTAINER */
.etsy-shop-listing-container {
  margin-top: 0px; 
  overflow: visible; 
  justify-content: left !important;}

/* ITEM CONTAINER WRAPPER - 5 Items Across 
.etsy-shop-listing-card {border: 1px solid #f2f2f2; padding: 8px 12px 8px 12px; margin: 5px; width: 20% !important; min-width: 94% !important;}
td.etsy-shop-listing, .etsy-shop-listing  {width: 20% !important;} */

/* ITEM CONTAINER WRAPPER - 4 Items Across */
.etsy-shop-listing  {
 width: 25% !important;
} 

/* EACH ITEM'S CONTENTS */
.etsy-shop-listing-card {
  background-color: #f6f6f6;
  border: 1px solid #e2e2e2; 
  filter: drop-shadow(3px 3px 3px #e2e2e2);
  padding: 12px 12px 10px 12px; 
  margin: 5px; 
  min-width: 94%; 
 }

/* ITEM CONTAINER WRAPPER - 3 Items Across 
.etsy-shop-listing-card {border: 1px solid #f2f2f2; padding: 8px 12px 8px 12px; margin: 5px; width: 33% !important; min-width: 94% !important;}
td.etsy-shop-listing, .etsy-shop-listing  {width: 33% !important;} */

/* FIXES HEIGHT / WIDTH ISSUE (WHERE IMAGES LOOSE THEIR ASPECT RATIO) */
  .etsy-shop-listing-thumb img {
    height:auto !important;
    filter: drop-shadow(3px 3px 2px #c0c0c0);
  }

/* ITEM TITLE */
.etsy-shop-listing-title {
  font-family: 'Open Sans'; 
  font-size: 13px; 
  color:#000; 
  filter: drop-shadow(3px 3px 2px #c0c0c0); 
  line-height: 1.7 !important; 
  font-weight: 600; 
  margin: 3px 0px 3px 0px !important; 
  height: 35px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

/* AVAILABILITY (STRING) */
.etsy-shop-listing-maker {
  text-transform: uppercase; 
  font-size: 10px; 
  font-family: 'Open Sans'; 
  color: #999;}

/* PRICE (BUTTON) */
p.etsy-shop-listing-price {
  margin: -22px 0px 0px 0px; 
  background-color: #e2e2e2; 
  border: 1 px #c0c0c0;
  filter: drop-shadow(2px 2px 2px #c0c0c0);
  color: black;
  padding: 4px 7px 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11.5px;
}

/* REMOVE CURRENCY CODE */
  .etsy-shop-currency-code {display: none;}

/* MOBILE */
  @media only screen and (max-width: 600px) {
    
  .crane-sidebar.crane_basic_sidebar {display: none !important; padding-top: 0 !important;}

  .etsy-shop-listing-container {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px !important; 
    padding-bottom: 15px !important; 
    flex-direction: column;} /*flex-direction: column-reverse; */
  
  .etsy-shop-listing {
    width: 250px !important; 
    margin: 10px auto 0px auto !important;}
  
  .etsy-shop-listing-card {
    background-color: #f6f6f6;
    border: 1px solid #e2e2e2;  
    filter: drop-shadow(3px 3px 2px #c0c0c0);
    width: 96% !important; 
    padding-top: 12px !important;}   
    
   /* USE CAN PLAY WITH THIS... IT LET'S YOU SCALE CONTAINER TO FIT WIDTH OF MOBILE SCREEN */
  /* .etsy-shop-listing {transform: scale(1.2); transform-origin: 0 0;}
  .etsy-shop-listing-card {transform: scale(1.2); transform-origin: 0 0;} */
  
  .etsy-shop-listing-thumb img {
    height:auto !important;
    filter: drop-shadow(3px 3px 2px #c0c0c0);
  }
  
  .etsy-shop-listing-title {
    filter: drop-shadow(3px 3px 2px #c0c0c0);    
    font-size: 12.5px !important; 
    height: 33px !important; 
    margin: 2px 0 3px 0 !important;} 

  .etsy-shop-listing-maker {
    font-size: 10px !important; 
    color: #a0a0a0;
  }
  
   p.etsy-shop-listing-price {
     background-color: #e2e2e2;
     filter: drop-shadow(2px 2px 2px #c0c0c0);
     font-size: 11.5px !important; 
     padding: 3px 5px 3px 7px; 
     margin: -18px 0px 0px 0px;}
  
  .etsy-shop-currency-code {display: none;}

 /* END MOBILE SPECIFIC CSS */
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • lunarbaby

    (@lunarbaby)

    This worked perfectly Mike – thanks for saving me a bunch of time! ??

    Thread Starter mikecarnohan

    (@mikecarnohan)

    This section:

    /* PRICE (BUTTON) */
p.etsy-shop-listing-price {
  margin: -22px 0px 0px 0px; 
  background-color: #e2e2e2; 
  border: 1 px #c0c0c0;
  filter: drop-shadow(2px 2px 2px #c0c0c0);
  color: black;
  padding: 4px 7px 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11.5px;
}

    Should be updated to change this line:
    border: 1px #c0c0c0;

    @mikecarnohan, Thank you so much for developing this script! It works perfectly on my site. I tweaked it a bit to fit the style of my website with no problems ?? Really like this plugin and hope it’ll stay updated as there aren’t any other ones like it ??

    Thanks for the help! Wondering if there’s a solution to scale the images larger without affecting resolution (all the product images are blurry)

    Thread Starter mikecarnohan

    (@mikecarnohan)

    Hi Chamshar,

    In general, it is a limitation of the plugin… that the plugin uses such low-res (thumbnail) images by default. The author has not posted all of the shortcodes available for the plugin as of this time, but I believe there is one that sets image sizes used to “large”. Perhaps if they see this thread, they can provide the proper syntax for that option (along with basic instructions to import higher resolution images from ETSY using the plugin.)

    I haven’t worked with the plugin for a while, but seem to recall that we used a combination of the large shortcode, as well as img filter CSS to scale images as desired in the project I used it for. Hope some of the above meanderings are helpful. ??

    Best regards,
    Mike

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS “SKIN” FOR PLUGIN – FREE TO USE’ is closed to new replies.