Basic customisation

[Keith]

Hi,

Could you give me a pointer to which CSS I need to modify to make basic changes to the font, size, and background for the Filter Bar? Also, if I wanted to change the design of the arrow from a horizontal one to a vertical one, how would I go about that?

Finally, if I want to remove the default search bar, i.e. the one that contains DATE, SEARCH and NEAR, and move the View drop-down into the Filter Bar, how would I go about that? Would there be any donwside to this, other than the obvious removal of functionalit?

Thanks,

[George]

Hey @Keith!

Could you give me a pointer to which CSS I need to modify to make basic changes to the font, size, and background for the Filter Bar?

Font and size styles are usually dictated by your theme – in terms of background, that should be customizable with code like this:


#tribe_events_filters_wrapper.tribe-events-filters-horizontal,
.tribe-filters-closed #tribe_events_filters_wrapper.tribe-events-filters-horizontal {
background: red !important;
}


To find out specific font styles on elements in your page, and see if the theme is setting them or not, I’d recommend getting and using a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element you’d like to customize.

In fact, you should use this tool for any other CSS-related questions, like your next one which was this:

Also, if I wanted to change the design of the arrow from a horizontal one to a vertical one, how would I go about that?

For example, using the tools I recommended above you’d find that you can change the contents of that arrow by using the following selector:


#tribe_events_filters_wrapper tribe_events_filter_item h3 span::after,
#tribe_events_filters_wrapper .tribe_events_filter_item.closed h3 span::after {
background-color: red !important;
}


Finally, if I want to remove the default search bar, i.e. the one that contains DATE, SEARCH and NEAR, and move the View drop-down into the Filter Bar, how would I go about that? Would there be any donwside to this, other than the obvious removal of functionalit? [sic]

There is no downside to this other than, as you mentioned, the loss of the functionality they provide. You can hide the filters like this:


#tribe-events-bar .tribe-bar-filters {
display: none !important;
}

To move the remaining “Views” item down into the filter bar, however, is a bit more complicated. There are numerous ways to go about doing this, ranging from pure-CSS methods to customizing PHP templates outright using the methods described here → https://theeventscalendar.com/knowledgebase/themers-guide/

I hope this all helps!

Cheers,
George

[Keith]

Hi George,

Thanks for that. I had spent some time with the Chrome Inspector, but I’m never 100% sure that I’m targeting what I want, and only what I want, so I thought I’d check to see if there were any documentation.

I’ve tried the examples you gave. The one for changing the arrow was spot on, but the one for removing the search bar hasn’t had any effect.

Regards,
Keith

[George]

Ah, I’m sorry to hear that search-bar hiding CSS didn’t help, Keith. Try this instead of my original code:


#tribe-bar-form #tribe-bar-views + .tribe-bar-filters {
display: none !important;
}


[Keith]

Hi George,

This still doesn’t seem to be working as expected. I don’t know if I’m missing something. This is how it looks on twentyfifteen.

Thanks,
Keith

[George]

Thanks for the screenshot of how things are, Keith. Just to be 100% clear, what is the specific thing in that screenshot which shows, but that you want to hide?

Perhaps I’ve been misunderstanding your question in which case I’m really sorry! I’ll give it another try though; thank you for your patience 🙂

[Keith]

Hi Brian,

Thanks for this. I’m sure it’s beyond the call of duty! This shot shows what I’m trying to achieve. I want to eliminate the search box altogether. It looks strange but my idea is to see if I can combine the View As drop-down and the Filter Bar into a single element. This would be the first step.

Regards,
Keith

[George]

Thank you for clarifying that – I’m really sorry to keep dragging this on, but can you link me directly to the page on your site where I can see this in person? The CSS I originally recommended achieves this effect for me on my test site; but perhaps there are some additional rules I need to address with my CSS specific to your theme or in relation to CSS from other plugins, et cetera.

Thanks a ton for your patience!

— George

[Keith]

Hi George,

Here it is :
http://188.166.19.151/events/

Thanks,
Keith

[George]

Hey Keith,

Thanks for that; it looks like the bars are indeed hidden, but the bar’s background color just needs to be set to transparent. Try this CSS to achieve that:


#tribe-bar-form {
background: transparent !important;
}


I hope that helps!

Cheers,
George

[Keith]

That’s fixed, George. Thanks a lot for your help.

[George]

Thanks for your patience! 😀

Cheers,
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts