[fderooyParticipant]

Hi there!

I’ve been in the process of building a kind of websites Directory. You can see the page here (it’s still in process).

Ignore the grid items’ skin configs, I’m still working on them. But pay attention to the display of the filters, search box and pagination buttons. Specially to the filters and search bar: they’re completely out of proportion. The search box is too big and not inline with the filters; the items in the filters’ display menus don’t fit, they tend to drop down under each clickable box, and so on…

Any idea on how I can fix this? I would also like to change this items’ font type, but have no idea on how to accomplish that.

Any help will be welcome!

Thanks a lot in advance.

Cheers.

Fidel

[RadModerator]

Hi there,

Thanks for posting in.

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.esg-filter-wrapper.dropdownstyle .esg-filterbutton {
    display: block;
    width: 250px;
}
.minimal-light .esg-filter-checked {
    margin-right: 7px;
}
input.eg-search-input[type="text"] {
    font-family: "Open Sans",sans-serif;
    outline: none !important;
    margin: 0px 0px 5px !important;
    padding: 3px 15px;
    vertical-align: middle;
    font-size: 12px;
    height: auto;
}

Pagination is looking good, what alignment or styling do you wish to change?

And which element you wish to change the font stype? If you wish to change filters, pagination, search font type, then it should be like this.

.esg-filter-wrapper.dropdownstyle .esg-filterbutton, .esg-filter-wrapper.dropdownstyle .esg-filterbutton a, input.eg-search-input[type="text"], .minimal-light .esg-pagination {
font-family: "Open Sans",sans-serif;
}

Hope these helps.

[fderooyParticipant]

Hey Rad!

Amazing man! This works just awesome! It’s pretty much what I was looking for. A few additional details:

1. I would like the filters and search bar to be centered in the section that contains the main grid.
2. I would like to add a 1px black line under the filter&search section, so visually the user can distinguish the filtering from the actual grids.

Again: thanks a lot! You guys provide quick and precise support all the time!

Cheers.

[RupokMember]

Hi there,

Thanks for writing back.

#1. You can add this under Custom > CSS in the Customizer.

.page-id-60 #x-section-2 .esg-filters.esg-multiplefilters {
  max-width: 475px;
  margin: 0 auto;
  display: block;
}

#2. If you need the border at bottom; you can use this instead () :

.page-id-60 #x-section-2 .esg-filters.esg-multiplefilters {
  display: block;
  margin: 0 auto;
  max-width: 475px;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}

Note that it won’t be fullwidth since we need to restrict the width to make it centered.

Hope this helps.

[fderooyParticipant]

Hey Rupok! Just awesome! Incredible support you always provide!

One more little thing… It’s probable that in the future I’d like my filter menus in line style, and not dropdown. I was experimenting with the code you gave me, changing “.dropdownstyle” to “.inlinestyle”. Is that right?

Also, I just noticed that, while the items inside the dropdown menu finally changed to the desired font, the same thing did not happen with the filter names (“Países” and “Categorías”, see image attached). How can I fix this?

Again: thanks a lot!

Cheers.

[fderooyParticipant]

Hi there again! Noticed that the image I tried to attach didn’t make it due to image size. I’m reattaching it here.

Also, one more detail I forgot in the previous reply. Now I have set the grid filters and search box to work not automatically integrated on top of the grid, but some other place in the page, using shortcodes. The filters are properly working, but the search box won’t appear although I’ve already added the shortcode to the page using Cornerstone. Any clues?

Sorry to keep adding issues about the grid customization; along the way some other details have been coming up.

Thanks!

[Rue NelModerator]

Hello There,

Thanks for the updates!

The filter will always be a dropdown. If you want to have it inline, you will to change the layout setting from dropdown to inline. Please check this out:

To properly setup sorting and search function in your grid, please check this out:
https://www.themepunch.com/essgrid-doc/grid-item-sort-search/

Hope this helps.

[fderooyParticipant]

Hi Rue Nel! Thanks for your response.

Don’t know if it was me who did not explain well, or you couldn’t understand well enough my last reply. If you read Rad and Rupock’s replies above, you’ll find that they’ve provided codes for me to customize the search bar on my grid. That was successful. Then, I decided to move the search bar and filters to some other place in my page (http://www.sociologialatinoamericana2.ucr.ac.cr/directorio/), using shortcodes. This is a pretty nice feature Essential Grid offers, that way you don’t depend on the filters and search bar appearing always above your grid, but you can place them anywhere you want in the page.

So, when I did that (add the filter and search bar to different columns on my page using shortcodes), both filters show up well, but the shortcode for the search bar seems to be failing. The bar is missing. The guide you provided to the Themepunch documentation simply does not cover all of this. It only gives basic instructions on how to enable the search bar.

Finally, I didn’t get an answer to this question:

Also, I just noticed that, while the items inside the dropdown menu finally changed to the desired font, the same thing did not happen with the filter names (“Países” and “Categorías”, see image attached). How can I fix this?

Thanks so much, as always, for your help.

Cheers. 🙂

[fderooyParticipant]

Sorry, I just discovered one more problem with the filters. They’re passing in front of the page header when scrolling down, and not behind as the rest of the page’s elements. What can this be?

You can see the problem on the scroll down here: http://www.sociologialatinoamericana2.ucr.ac.cr/directorio/.

Thanks again. 🙂

Fidel

[JadeModerator]

Hi Fidel,

Please find this code in the customizer:

.x-navbar {
    border-bottom: 1px solid rgba(42,54,87,1);
}

then update it to:

.x-navbar {
    border-bottom: 1px solid rgba(42,54,87,1);
    z-index: 99999;
}

Hope this helps.

[fderooyParticipant]

Hi there Jade. Nice job! That did it for the issue with the dropdown menus passing in front of the header when scrolling. Thanks so, so much!

Two other issues mentioned in this conversation remain unresolved. Let me quote them for you:

#1

I decided to move the search bar and filters [of my grid] to some other place in my page (http://www.sociologialatinoamericana2.ucr.ac.cr/directorio/), using shortcodes. This is a pretty nice feature Essential Grid offers, that way you don’t depend on the filters and search bar appearing always above your grid, but you can place them anywhere you want in the page.

So, when I did that (add the filter and search bar to different columns on my page using shortcodes), both filters show up well, but the shortcode for the search bar seems to be failing. The bar is missing.

#2

Also, I just noticed that, while the items inside the dropdown menu finally changed to the desired font, the same thing did not happen with the filter names (“Países” and “Categorías”, see image attached). How can I fix this?

Any ideas for this two? Again: thanks very much! 🙂

Cheers.

[RadModerator]

Hi there,

1. It’s related to this https://community.theme.co/forums/topic/shortcode-essential-grid-not-working-in-cornerstone/page/2/. And looks like the new version of Essential Grid has issues with shortcodes (confirmed it even without X theme and cornerstone). More likely that we’ll be waiting for the fix from the plugin author.

2. Please add this as well,

.esg-filter-wrapper .esg-filterbutton:last-child, .esg-cartbutton a, .esg-selected-filterbutton {
    margin-right: 0 !important;
    font-family: "sidewalk_cafe_bf-webfont";
}

Cheers!

[fderooyParticipant]

Hey Rad!

1. Got it. We’ll keep an eye to the changelog wishing a solution comes soon.

2. Worked perfectly!

So, thanks a lot, one again, for all the help. 🙂

Cheers.

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts