Https://www.8theme.com/topic/costum-css-x-store-product-attribute-product-page/#post-396101

This topic has 5 replies, 3 voices, and was last updated 3 weeks, 1 days ago ago by Andrew Mitchell

  • Avatar: Nio
    Nio
    Participant
    May 22, 2024 at 17:14

    I have a question about the ticket linked in the subject line.

    I wanted to add another rule to your code:

    .single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label {
        background-color: #EE1250;
        color: #FFFFFF; 
    }
    .single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label span {
        font-size:15px; 
    }
    
    New Rule 
      change Background color for the li element with the specific data-value and data-name attributes..... 
    data-value="1-paar-nur-5941-e-15-rabatt
    data-name="1 PAAR NUR 59,41 € - 15% RABATT" 
    
    I tried this one..but it does not work : 

    `/* new */
    .single-product ul.st-swatch-preview-single-product[data-attribute=”pa_professional-ultra-deal”] li.type-label[data-value=”1-paar-nur-5941-e-15-rabatt”][data-name=”1 PAAR NUR 59,41 € – 15% RABATT”] {
    background-color: #00FF00; /* Hintergrundfarbe auf Grün ändern */
    }

    what is my mistake?

    Its on this page

    https://www.optimumcore.eu/professional-ultra-kniegelenkbandage-mit-gelkissen/

    i have two values in the variant and both should have a different background color… so they should not have the same color atode

    LG Oliver

    4 Answers
    Avatar: Nio
    Nio
    Participant
    May 22, 2024 at 23:39

    hi,
    this is a bit crazy, but i have tested it three times… and it happens when i use the code… the code is actually for the variant. But when I use it, it also changes my footer navigation… when i use it it happens with the footer navigation see picture …..

    ` .single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] {
    width: 100%;
    }
    .single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] li.type-label {
    width: 100%;
    }
    }

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    May 23, 2024 at 10:38

    Hi @Nio,

    This custom CSS codes is having 2 brackers at the end, so it might cause the issue:

    
    .single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] {
    width: 100%;
    }
    .single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] li.type-label {
    width: 100%;
    }
    }
    

    For another background color on this product: https://www.optimumcore.eu/professional-ultra-kniegelenkbandage-mit-gelkissen/, please try with this:

    
    .single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label [data-value="1-paar-nur-5941-e-15-rabatt"] {
        background-color: #EE1250;
    }
    .single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label [data-value="single-bandage-3495-e-1x"] {
        background-color: #00FF00;
    }
    

    Hope it helps!

    Avatar: Nio
    Nio
    Participant
    May 23, 2024 at 16:43

    thank you very much, sorry that this has become so annoying… :((

    but I’ll write a good review tomorrow when I’m in the office…

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    May 23, 2024 at 17:22

    Dear Nio,

    We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

    Click here to spread the love: https://themeforest.net/downloads

    Thank you for being an integral part of our journey!

    Best Regards,
    The 8Theme Team

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘https://www.8theme.com/topic/costum-css-x-store-product-attribute-product-page/#post-396101’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.