Gridbox Content Filters Improvements. Filter Items on The Fly!

Continue Reading
Mon. - Fri. 9 am - 5 pm Support Policy
Remember me

Responsive Filter - Desktop/Laptop Mode

2 months 4 weeks ago #1

  • Phil's Avatar
  • Phil
  • Posts: 2
Dear Gridbox Team

We have a question resp. we would like to always show the responsive filter instead of the buttons, also on desktop & laptop mode. Could you please tell us where and what to change in the settings to allow this? Unfortunately there is no option in the Gallery settings.

Thanks in advance for your support

2 months 4 weeks ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 7120
Hello,

You need at the custom css file of your template to add custom CSS code:
	body .ba-gallery .category-filter a.ba-filter,
	body .ba-gallery .category-filter a.ba-filter-active {
	    display: none !important;
	}
	body .ba-gallery select.ba-select-filter {
	    display: inline-block !important;
	}

Regards,
Vyacheslav, Balbooa.com

2 months 4 weeks ago #3

  • Phil's Avatar
  • Phil
  • Posts: 2
great! it worked perfectly, thanks for the quick reply and support!

2 months 3 weeks ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 7120
You are welcome ;)

2 weeks 6 days ago #5

  • É's Avatar
  • É
  • Posts: 7
Hi, could I ask how to achieve the same effect for the Filter by Tag and Filter by Color buttons? I would like the Filter button to always appear along the top as it does on small screens instead of to the left or right.
Thanks :)

2 weeks 5 days ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 7120
Hello,

Thank you for contacting us

This can only custom (add CSS to the custom css file of your template)
Code example:
.visible-filter-modal.equal-positions-tags {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s linear;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.equal-positions-tags {
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    border-radius: 6px;
    box-sizing: border-box;
    left: 0;
    margin-left: 10%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    overflow-y: auto;
    position: fixed;
    padding: 0;
    top: 0;
    width: 80%;
    z-index: 1050;
}

a.show-filter-modal:hover,
a.show-filter-modal {
    background-color: #fafafa;
    border-radius: 3px;
    border: none;
    box-sizing: border-box;
    color: #363637;
    display: block;
    font-size: 16px;
    height: 50px;
    margin-left: 10px;
    margin-top: 20px;
    padding: 15px 25px;
    white-space: nowrap;
}

.equal-positions-tags + .filter-modal-backdrop.close-filter-modal {
    background: #000;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
}

.filter-modal-open .visible-filter-modal.equal-positions-tags + .filter-modal-backdrop.close-filter-modal {
    opacity: .56;
    visibility: visible;
    transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
}

Regards,
Vyacheslav, Balbooa.com

1 week 2 days ago #7

  • É's Avatar
  • É
  • Posts: 7
Thanks Vyacheslav, that's perfect!

6 days 16 hours ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 7120
You are welcome.
Powered by Kunena Forum