Okay
  Public Ticket #3410885
Styling Filter
Closed

Comments

  •  16
    Soluforyou started the conversation
    July 10, 2023 at 5:49pm

    Hi there, you helped me once with the filter. It needs to be adjusted, but i don't know how. Here is the CSS, but I don't see changes. I need to know

    > how do change the size of the circles
    > how do change the placement of the circles

    Visually I like to push them up a bit and make them smaller (they are not aligned with the line horizontally)

    ___
    CSS



    /* SHOP Price filter more elegant elegance (top -20) */
    .wc-block-components-price-slider__range-input-wrapper:before{
        background:transparent !important;
    }
    .wc-block-components-price-slider__range-input-progress{
        height:1px !important;
    }
    div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
        height:3px;
        width:3px;
    }

    Attached files:  Screenshot 2023-07-10 at 19.46.44.jpg

  •  279
    Noah replied
    July 10, 2023 at 6:39pm

    Hi there,

    Can you try the following CSS to make the circles bigger and move the line to match:

    .wc-block-components-price-slider__range-input-wrapper:before{
    background:transparent !important;
}
.wc-block-components-price-slider__range-input-progress{
    height:3px !important;
    top:5% !important;
}
div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
    height:13px;
    width:13px;
}
.wc-block-components-price-slider__range-input-wrapper{
    margin:25px 0;
}

    Hope this is what you meant with "how do change the placement of the circles"

    Add the CSS to salient \ general settings - css script related - custom css code.

    Thanks.