need some css help to style filter/sort menus

Resolved evillevi
(@evillevi)

1 year, 12 months ago
Hello! I love your plugin. I have been looking for a reliable tool that can display both filtering and sorting menus the way I want for a long time. I have tested out some plugins and I was not satisfied with them. Glad to have found this!

I have managed to get so far (screenshot 1). But I have trouble setting everything up the way I want. The menus are now stacked. And in mobile view, the width of the menus is messed up.

I am using shortcode for the product categories filter menu + the search filter, in my shop page.
For the sorting filter, too (after adding the widget to my inactive widgets area since I don’t have a header widget area in the theme I’m using).

I was hoping someone could help me out by pointing me in the right direction. I have a very basic understanding of css, and know how to inspect elements in Devtools, but that’s about it.

I have grouped related questions in one thread. I hope that is ok.

This is the css I added to my (childtheme) stylesheet.
As you can see, I am using the width: 20% code. I think this is not the right way to achieve this. Width of the menus is ok on desktop, but not in a mobile browser. I would like the menus to have the same width, in every browser.
```
.select2-container--default .select2-selection--single {
    background-color: transparent !important;
	color: #fff;
    border-style: solid;
	  border-color: #444444 !important;
	
	
    
}

.select2-container {
width: 20% !important;
}

.wpc-search-field {
    width: 20%;
	background-color: transparent;
	color: #fff;
    border-style: solid;
	  border-color: #444444 !important;

}
```
1. How can I align the menus horizontally? (And change the order in which they appear?)
2. How does one remove the search box from the (product) filter at the top of the dropdown menu list? => screenhot 2
3. How can I change the background colour of the expanded dropdown menu items? The standard background colour (collapsed) and hover colour I managed to change. => screenhot 2
4. How can I move the search icon in the search filter to the right?
  => screenshot 3
  
  Thanks in advance for helping me out!
  Levi
- This topic was modified 1 year, 12 months ago by evillevi.
The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Support fesupportteam
(@fesupportteam)

1 year, 12 months ago

Hi @evillevi

1) To choose a horizontal layout for the filter you can check next pages:

https://filtereverything.pro/resources/shortcodes/

https://filtereverything.pro/resources/filters-widget/

The order you can change in the filter set, just drag and drop filters in the needed order.

2) It can be turned off from the “more options” if not, then you can hide it with the CSS just inspect the element and check what classes it is using, in order to set it to the display none – https://prnt.sc/Lr56x-mRvHXK

3) Same approach here – https://prnt.sc/CjPyS7hMaxjY

4) Also, the same approach – https://prnt.sc/mqLbU6t96Sx4 You can add custom styles in the Filters -> SEttings -> Experimental. Also, please note, that we do not provide or debug custom styles, it is out of the support policies.

Best Regards – Victor
Thread Starter evillevi
(@evillevi)

1 year, 12 months ago
Hi Victor, appreciate it that you help me out.

2) worked
4) worked – but since I haven’t got the layout of the menus in order, this ‘left: 205px’ code places the search icon outside the search box

1) I can’t seem to wrap my head around this. I read the information, but as soon as I add horizontal=”yes” to the shortcodes, the lay-out gets messed up => screenshot
Does this have to to with the width of each widget? Do I have to set a specific size for each of the menus then?
- This reply was modified 1 year, 12 months ago by evillevi.
Thread Starter evillevi
(@evillevi)

1 year, 12 months ago
Update:

The filter menus from the filter widget are more or less horizontally positioned.

The sort widget and the product filter widget, however, are still stacked.
screenshot
It’s as if these two are grouped/linked together and cannot be aligned next to each other?
- This reply was modified 1 year, 12 months ago by evillevi.
Plugin Support fesupportteam
(@fesupportteam)

1 year, 12 months ago

Hi @evillevi

No, in order to align them all together in one link including the sorting widget which is a separate widget you need to use custom styling on them all.

The best approach here would be placing two shortcodes one by one, so they won’t stay in different containers and make them row, and in the second one with filters make the row as well with align styles. Hot to find the needed containers and elements you already know, so it should not be a problem.

Best Regards – Victor
Thread Starter evillevi
(@evillevi)

1 year, 12 months ago
Hello Victor

I’m not sure if I understand what you are saying.

“Placing two shortcodes one by one … and make them row”

=> You mean like this? Two shortcodes in one line, one block of shortcode?
```
[fe_sort id="2" horizontal="yes"] [fe_widget horizontal="yes"]
```
“and in the second one with filters make the row as well with align styles”
What do you mean by “the second one”?

The first widget is the sorting widget, the second is the filter widget (with extra search function).

I thought I could get these widgets in a horizontal position by just adding horizontal=”yes” to the shortcode… 🙁
- This reply was modified 1 year, 12 months ago by evillevi.
- This reply was modified 1 year, 12 months ago by evillevi.
Plugin Support fesupportteam
(@fesupportteam)

1 year, 12 months ago

Hi @evillevi

horizontal=”yes” columns=”3″ Those two parameters are connected, and they are only working for the fe_widget shortcode. So it should look like this [fe_widget horizontal=”yes” columns=”3″] max amount of columns 5. The sort widget does not have this parameter, as it only displays one dropdown with sorting options.

But for what you want to create we recommend not using horizontal=”yes” columns=”3″ We recommend using simple [fe_widget] to apply display flex and flex-direction row, and apply on the container with those two widgets the same flex and row, and you will have them all in a horizontal line.

Best Regards – Victor

Thread Starter evillevi
(@evillevi)

1 year, 12 months ago

OK Victor, I see! I’ll try it out then!
Thread Starter evillevi
(@evillevi)

1 year, 12 months ago
Well, I still couldn’t figure out how to have all the widgets in a horizontal line. The reason for that is perhaps that I can’t find the container holding them in Devtools.

What I did manage to do is to customize most of the layout of the widgets.
But…

1) There is no hover colour (red) anymore for the selected filter in the menu. Both in the sorting filter and select products filter. It stays black (the background color I chose.) The rest of the menu looks fine.
So I guess my coding is incomplete, a little unorthodox, or I’m forgetting something…

2) In mobile view, the layout of the menus is a bit weird.

I know you can’t provide custom styles, but I you could point me in the right direction?

For what it’s worth, here are my lines of css I’ve added to achieve this layout.

I really hope I can get there. I’ve been putting hours into finding the solution to this mystery and I don’t want to start all over by looking for some other plugin. : )
```
/* no search field in product filter expanded menu - shop page*/
.select2-search__field {
display: none;
}


/* search products filter layout on shop page */
.wpc-search-field {
   
	background-color: black;
	color: #fff;
    border-style: solid;
	  border-color: #444444;
	font-size: 14px;
	

}


/* products filter expanded menu on shop page */
.select2-container--default .wpc-filter-everything-dropdown .select2-results__option[aria-disabled=true], .select2-container--default .wpc-filter-everything-dropdown .select2-results__option[aria-selected=true], .select2-container--default .wpc-filter-everything-dropdown, .select2-container--default .wpc-filter-everything-dropdown .select2-search--dropdown .select2-search__field:focus {
   
	background-color: black;

	
}

/* products filter expanded menu on shop page */
.select2-selection__rendered {
	background-color: black;
	
	
}

/* products filters expanded menu border layout on shop page */
.select2-dropdown.wpc-filter-everything-dropdown  { 
border-bottom-color:#444444 !important;
	border-left-color: #444444 !important;
border-right-color: #444444 !important;
	
}


/* select products border color layout on shop page */

.wpc-filter-layout-dropdown .select2-container--default .select2-selection--single 
{
	border-color: #444444;
	}

/* select products filer arrow */

.wpc-filter-layout-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
	background-color: black;
	
	
}

/* search products filter display layout on shop page */

.wpc-filter-search-form {
	display: flex;
	flex-direction: row;
	}


/* sort filter collapsed menu layout on shop page */
.wpc-sorting-form .select2-container--default .select2-selection--single {
    border-style: solid;
	  border-color: #444444;
    
}
	
/* sort filter arrow*/
.wpc-sorting-form .select2-container--default .select2-selection--single .select2-selection__arrow  {
	background-color: black;
	
	
}
```
Plugin Support fesupportteam
(@fesupportteam)

1 year, 12 months ago

Hi @evillevi

As we previously noted, the custom styling is out of the score of support policies. You can hire a developer who can make those styles for you, all aligned together. with all of the needed changes in the mobile styles and desktop versions as well.

Best Regards – Victor

Thread Starter evillevi
(@evillevi)

1 year, 12 months ago

Hello Victor. I understand, but I’ve never had to hire a developer for these kind of things. The widgets should work and be easy to set up.
I have been helped by the developer of my theme, however. He tried, in vain. It could be related to the page from my theme. So I will try to make a new page in Elementor and start all over again. If it doesn’t work, I’ll have to look for another plugin, I guess.

Thanks anyway!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘need some css help to style filter/sort menus’ is closed to new replies.