Checkbox list always open for filter bar

[Sarah Lewis-Hammond]

Hello. I’m trying to get my filter bar to look like the Milkwood one here https://theeventscalendar.com/showcase/milkwood/

With the filter options always on display. At the moment, even though I’ve selected ‘checkbox’ in the settings, I still get a dropdown list for each filter, with checkboxes in the menu which appears on rollover.

How can I achieve the Milkwood look please? Thanks

[Jaime Marchwinski]

Hi Sarah,

Thanks so much for reaching out!

Altering the Filter Bar significantly will require some custom code.  To get you started, you can remove the ‘Show Filters’ text, which should leave the Filter Bar in its open state.  It’s also worth noting that the mobile version will always have collapsed filters.  You can try something like this:
#tribe_events_filter_control #tribe_events_filters_toggle {
display: none;
}

You can make this modification in the WordPress Customizer, or using your child theme CSS.  Our Themer’s Guide can give you more information about how to safely customize our plugins: https://theeventscalendar.com/knowledgebase/themers-guide/

You can also add a feature request for this idea, if you are interested in seeing it implemented in the future: https://tribe.uservoice.com/forums/195723-feature-ideas

If this functionality is a requirement for your intended project, I’d suggest that a third-party developer would be the best way to make this feature happen on a short timeline. ? We maintain a list of developers who work with our plugins on our Knowledgebase here: https://theeventscalendar.com/knowledgebase/find-a-customizer/

I hope this information helps to point you in the right direction! Please let me know if you have any other questions!

 

Thanks,

Jaime

[Sarah Lewis-Hammond]

Thanks for your reply. I did a healthy dose of, uh, code borrowing from Milkwood and general fiddling and I’ve made it work pretty well. If anyone else is interested, here’s the css I used

.tribe_events_filter_item.closed div {
display: inherit !important;
}

.tribe-events-filters-horizontal .tribe-events-filter-group {
    max-width: 100%;
    width: 100%;
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
}

.tribe-events-filters-label, #tribe_events_filter_control {
display:none !important;	
}

div#tribe_events_filter_item_city {
    width: 73%;
    display: block;
    float: left;
}

#tribe_events_filters_wrapper ul li {
    display: inline;
    float: left;
    width: 170px;
    background: none;
}

[Jaime Marchwinski]

Hi Sarah,

That’s awesome!  Thanks so much for sharing and glad you were able to make it work!

You are welcome back in our support forums any time!

For now, I am going to close this thread.

Have a great week!

 

Thanks,

Jaime

[Author]

Posts