Docs

[pdopchev]

Hi guys,

Did some research on the forum but it seems like there is no info on that topic. Is it possible to add something like <i class=”x-icon x-icon-home”></i> to the filter menu in essential grid?

Found an article on modifying navigation elements in their documentation but not sure how to implement it: https://www.themepunch.com/faq/modify-styling-of-navigation-elements/

Thank you!

p.s. looking for something similar to this: https://www.whistler.com/dining/

[Lely]

Hi There,

That might be possible using custom CSS. To help you better with this, please share the page URL with Essential GRID Filter. Then give us a screenshot of what you want to achieve. This way we can check what we can do. Thank you.

[pdopchev]

My bad, forgot to share the link I guess. There is the grid:http://www.enjoycrestedbutte.com/crested-butte-ski-and-snow-activity-guide/ Attaching a screenshot of what I am going for as well.

Thank you!

[Nabeel A]

Hi there,

Thank you for providing the URL. You can try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.esg-filterbutton span:before {
    content: '\f113';
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 5px 0 0 0;
    font-size: 40px;
    color: #367eb3;
    width: 100%;
}

Change the icon and color as per your need. Let us know how this goes!

[pdopchev]

You rock! This is exactly what I was looking for!

A couple more questions – where did you get the icon shortcode from? (‘\f113’;) Tried to substitute it with some of the shortcodes for the x icons but didn’t work…

Is there a way to assign a different icon for each tab in the filter menu?

Thank you!

[Lely]

Hi There,

You’re welcome.

You can check the unicode value here:http://fontawesome.io/icon. Click which icon to see the unicode value.
To assign each, please also add this:

.esg-filterbutton:first-child span:before {
    content: "\f042";
}
.esg-filterbutton:nth-child(2) span:before {
    content: "\f043";
}
.esg-filterbutton:nth-child(3) span:before {
    content: "\f044";
}
.esg-filterbutton:nth-child(4) span:before {
    content: "\f045";
}

Use custom unicode.

Hope this helps.

[pdopchev]

Yes, thank you so much for your help! One more question – in case I decide to go with just the icons for a filter, is there a way to hide the text?

Thank you!

[Rue Nel]

Hello There,

Glad it works out for you. If you only want to use the icon and remove the text, you will need to edit you skin and remove the text from there.

Please let us know how it goes.

[pdopchev]

Thank you for the hint, but still trying to figure out how to do that. When I go to edit the skin from the “Skins” menu under essential grid (see screen grab) and add:

.minimal-light .esg-cartbutton a { display:none;}

The text is still there. Which line exactly do I have to edit to remove/hide the text?

[Friech]

Hi There,

We can directly replace those text with icons with JavaScript. But please provide us login credentials in private reply first so we can take a look on your skin settings.

Thanks.

[pdopchev]

This reply has been marked as private.

[Friech]

Hi There,

Thanks, you can add this under Custom > JavaScript in the Customizer to replace the text with icon.

jQuery('.esg-filterbutton:first-child span').html('<i class="x-icon" data-x-icon="&#xf042;" ></i>');
jQuery('.esg-filterbutton:nth-child(2) span').html('<i class="x-icon" data-x-icon="&#xf043;" ></i>');

And then this on Custom CSS to style the icons.

.esg-filterbutton span {
    font-size: 40px;
    color: #367eb3;
}

Icons unicode can be found here: http://fontawesome.io/icons/

Cheers!

[pdopchev]

Awesome! You guys are great!

One small adjustment – trying to add more padding above the icons but “padding-top:2%” doesn’t work

.esg-filterbutton span {
    font-size: 40px;
    color: #367eb3;
    padding-top:2%
}

Do you have more tricks out of your sleeve?

[Lely]

Hi There,

Please use this instead:

.esg-filterbutton span i {
    margin-top: 10px;
}

Hope this helps.

[pdopchev]

Yes, it sure did! Thank you so much for your help!

Just came something else related to essential grid filters:

1) Is it possible to remove the checkbox from the grid – the one that is displayed when multiple filters are present (see 1st screen grab for reference)

2) Is it possible to have the filters displayed in 3 different rows below each other instead of two – when you have 3 filters present (see 2nd screen grab for reference)

link: http://www.enjoycrestedbutte.com/the-crested-butte-hiking-guide/

[Author]

Posts