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 › Css styling problem

Tagged: 

Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • remi wecan
    (Private)  December 3, 2019 at 3:48 pm #228279

    Hello there,

    I want to display categories on my articles page but even using documentations instructions for customizing css I seem unable to modify how my categories are displayed.

    `.searchandfilter[data-sf-form-id=”2721″]
    {
    font-family: BatonTurboWeb-Medium;
    font-size:18px;

    }

    Could you help me please

    Trevor Moderator
    (Private)  December 3, 2019 at 5:03 pm #228281

    Are you referring to the display in the form (the fields) or in the list of posts, or before the list of posts (e.g. ‘You Searched for ….)?

    Are you able to send me a live link/URL to your search page so I can take a look?

    Any annotated screenshots you can make to help me would be appreciated. You will need to upload images to an external file sharing site, like dropbox, and share the link(s) with me.

    remi wecan
    (Private)  December 4, 2019 at 8:12 am #228295

    Hi Trevor,

    my post categories on the left side are like this :

    https://ibb.co/KwQsFqDhttps://ibb.co/KwQsFqD

    And my goal is to be like this :

    https://ibb.co/7g96H7h

    I added custom css with elementor on the shortcode of the searandfilter form but I don’t understand why it’s not working.

    Here a link of the page :

    https://www.wecangroup.ch/mediamediamedia/

    Thanks for your help.

    Trevor Moderator
    (Private)  December 4, 2019 at 4:42 pm #228348

    You want to be able to click on one of them to select? and, from the settings I see, be able to select more than one, yes?

    To be able to make the list look as per your sample, it needs to be a checkbox control, like this:

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

    I think you would want the operator set as OR (as I show), so, as you select more than one, the results will increase.

    Can you set the field like this and let me know when this is done, then I will make the CSS for you?

    remi wecan
    (Private)  December 5, 2019 at 8:58 am #228414

    Hello Trevor,

    yes this is exactly what I want. I done the changes that you told me. Thanks for your reactivity !

    Trevor Moderator
    (Private)  December 5, 2019 at 4:06 pm #228483

    Can you try this custom CSS:

    .searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li label {
  line-height: 42px;
  border-bottom: 1px solid #666;
  width: 100%;
  padding-left: 0px;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category input {
  display: none;
}
.searchandfilter ul li[data-sf-field-input-type=checkbox].sf-field-category li {
  padding: 0;
}
.searchandfilter ul li[data-sf-field-input-type=checkbox].sf-field-category {
  padding: 0;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li.sf-option-active label {
  color: #e3051c;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li label:hover {
  cursor: pointer;
}
    remi wecan
    (Private)  December 10, 2019 at 2:33 pm #228756

    Hi Trevor,

    thanks for your help.

    I have two new issues since this: https://www.wecangroup.ch/media/

    When I click on the category in the searchand filter my goal was to see only the post relevant to the category under the component “Wecan news” but instead there is a strange list that appear.

    And my second problem, is that I try to remove the category ” Uncategorized” but can’t find how to do it. Thanks for your help again.

    Trevor Moderator
    (Private)  December 11, 2019 at 12:05 pm #228832

    To remove ‘Uncategorized’ click the Advanced Settings link, deselect the Sync with Settings, browse and select that term to exclude:

    https://www.screencast.com/t/9MuEm3jPe

    Trevor Moderator
    (Private)  December 11, 2019 at 12:07 pm #228834

    I think I see the issue. The results grid is made in Elementor Pro using their Post Grid element.

    Thus, you must use the method described here:

    https://support.searchandfilter.com/forums/topic/how-can-i-search-elemntor-column-while-retaining-the-design-of-that-column/#post-209754

    remi wecan
    (Private)  December 16, 2019 at 1:17 pm #229155

    Hi Trevor,

    I followed the documentation and tried the method described in the post below but it don’t seem to work.

    My post-grid when I click on categories seem to load but nothing happen : https://www.wecangroup.ch/media/

    I added the script directly in the .js file of the theme. Put my search and filter shortcode through elementor. And here’s my setting of “Display results” in the dashboard :

    https://ibb.co/5hLgWXy

    Thanks for your time

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 11 total)
1 2

The forum ‘Search & Filter Pro’ is closed to new topics and replies.