Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Custom CSS

Tagged: 

Viewing 10 posts - 1 through 10 (of 23 total)
1 2 3
  • Charlotte Simons
    (Private)  May 15, 2020 at 1:25 pm #244126

    Hi

    I’m using Search & Filter Pro in combination with Elementor Pro. I added some custom CSS to the dropbox filters, which won’t display. It only shows when I inspect the element, which means I correctly inserted it. Is it possible that your plugin has some standard CSS for the dropbox which I can’t overrule?

    Thanks for the help!

    Charlotte Simons

    Trevor Moderator
    (Private)  May 15, 2020 at 2:23 pm #244151

    Can you post here, inside code back ticks, the CSS you used, and/or are you able to send me a live link/URL to your search page so I can take a look?

    Charlotte Simons
    (Private)  May 15, 2020 at 2:24 pm #244153

    https://voorsmaakje.website/stef-roets/projecten/

    Trevor Moderator
    (Private)  May 15, 2020 at 2:37 pm #244159

    Is this an example of what you made?

    .sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

    See how, in the inspector, there is a selector above it?

    https://www.screencast.com/t/Bs3WEJhN4ySe

    That has greater specificity.

    It would suggest this might work (but it won’t quite):

    .searchandfilter select.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

    But THIS would work:

    .searchandfilter[data-sf-form-id="244"] select.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

    Does that help?

    Charlotte Simons
    (Private)  May 15, 2020 at 2:40 pm #244165

    Hi Trevor. I changed the css like you suggested, but it still won’t show.

    Trevor Moderator
    (Private)  May 15, 2020 at 2:42 pm #244167
    This reply has been marked as private.
    Charlotte Simons
    (Private)  May 15, 2020 at 2:46 pm #244169

    I’m sorry, but I can’t Skype at this moment. Can you explain me by screenshots maybe?

    Trevor Moderator
    (Private)  May 15, 2020 at 2:57 pm #244181

    Not really, no. But, as I said, that code IS working for me. Maybe your browser cache needs clearing?

    Charlotte Simons
    (Private)  May 15, 2020 at 3:01 pm #244187

    Hm, weird. I did clear my browser caches, but still no result.

    Trevor Moderator
    (Private)  May 15, 2020 at 3:03 pm #244189
    This reply has been marked as private.
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 23 total)
1 2 3

The topic ‘Custom CSS’ is closed to new replies.