Etsy Shop Plugin CSS edits
-
i looked through the forum on this plugin to find out if others had made changes to the styling, and found there were a few reoccurring themes… i made some changes to the css and thought i would share for others in the same boat. i wanted
transparent background behind listings
different colors for fonts
different fonts
change color of borders
change size of box around listing so the price is contained and to accommodate larger images.here is my site: https://earthhuggy.com/products
here is the css i used.
.etsy-shop-listing-table { border: 0px; } td.etsy-shop-listing { border: 0px; } .etsy-shop-listing-card { background-color: transparent; border: 1px solid #D6CE84; display: block; width:220px; height:250px; text-align: center; margin: auto; padding: 6px; font-family: Papyrus, Arial,Helvetica,sans-serif; font-size: 12px; margin-bottom: 10px; margin-right: 7px; } .etsy-shop-listing-thumb { height: 167px; width: 210px; display: block; } .etsy-shop-listing-thumb img { margin: 0; padding: 0; } .etsy-shop-listing-detail { margin: 0; padding: 0; text-align: left; } .etsy-shop-listing-title { height: 15px; line-height: 15px !important; margin: 0; padding: 0; margin-top: 5px; overflow: hidden; } .etsy-shop-listing-title a { color: #D6CE84; text-decoration: none; } .etsy-shop-listing-title a:hover{ text-decoration: underline; } .etsy-shop-listing-maker { line-height: 14px !important; margin: 0; padding: 0; } .etsy-shop-listing-maker a { color: #D6CE84; text-decoration: none; padding: 0; margin: 0; } .etsy-shop-listing-maker a:hover{ text-decoration: underline; } .etsy-shop-listing-price { color: #D6CE84; float: right; line-height: 14px !important; margin-top: -14px; } .etsy-shop-currency-code { font-size: 10px; }
if you need to find this, go into your dashboard, go to plugins, choose “editor” and then choose the etsy shop widget in the drop down menu. then select the etsy-shop/etsy-shop.css file to edit, and make your changes there.
i still have not been able to figure out how to make two columns of listings instead of three- it’s a little wide for my theme and i see others have mentioned this as well. any thoughts? i don’t know much about php…
hope this helps someone! thank you for this plugin!
- The topic ‘Etsy Shop Plugin CSS edits’ is closed to new replies.