• Resolved earth.huggy

    (@earthhuggy)


    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!

    https://www.ads-software.com/plugins/etsy-shop/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author fsheedy

    (@fsheedy)

    Hi earth.huggy,

    Great CSS!

    About making only 2 columns, this is planned for version 1.x of the plugin.

    Thank you so much ~ very helpful ??

    Help ??

    I’d like to make the price green

    Tried editing both fields to 70ff07, yet, it doesn’t work, https://araliadianarose.com/shop/

    .etsy-shop-listing-price {
    color: #70ff07;
    float: right;
    line-height: 14px !important;
    margin-top: -14px;
    }

    thanks in advance

    Plugin Author fsheedy

    (@fsheedy)

    Replace
    color: #70ff07;

    By

    color: #70ff07 !important;

    So awesome!!!

    Having an issue w/ transparency ~ tried adding !important to that, did not work.

    Thanks SO much

    .etsy-shop-listing-card {
    background-color: transparent !important;
    border: 1px solid #ffffff;
    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;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Etsy Shop Plugin CSS edits’ is closed to new replies.