• Hello,

    Could you please help as to how could I change the design to match the design as per the other swatches on my site.

    The selected swatches have a black background color and white font color, while the other have a vice verse. Refer to Screen Shot – https://prnt.sc/1UginenCNAcf

    I tried customizing the CSS but both selected and not selected ones are being changed to black. Could you please with this.

    Thanks
    Rahul

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter industrialtex

    (@industrialtex)

    I figured something like this from inspect window. Could you please help me verify it and how structure it so implement it correctly. Thanks

    .wpclv-attributes .wpclv-terms .wpclv-term span, .wpclv-attributes .wpclv-terms .wpclv-term a {
    
        /* background-color: black; */
        /* padding: 11px 15px; */
    }
    
    
    .wpclv-attributes .wpclv-terms .wpclv-term.active, .wpclv-attributes .wpclv-terms .wpclv-term:hover {
        /* border-color: green; */
        background-color: black;
        color: white;
    }
    
    
    .wpclv-attributes .wpclv-terms .wpclv-term {
      
        /* border-width: 1px; */
        /* border-style: solid; */
        /* border-color: #ddd; */
        /* background-color: #fff; */
        /* float: left; */
        border: 1px solid #333;
    }
    

    There is something not right as what I figured.

    • This reply was modified 1 year, 12 months ago by industrialtex.
    Thread Starter industrialtex

    (@industrialtex)

    Hello,

    I have been able to achieve this. https://prnt.sc/sIDy1ee6_pSt

    Could you please help me how could I make the white area on hover shown by arrow to be same as background on hover.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom CSS for Selected Swatch’ is closed to new replies.