Filter bar and site formatting

I’m a little confused. When I switched our test site to Twenty Twenty-three, our sermon archive page formatting doesn’t look like yours at all.

Here’s what we have as default.

Here’s what we have when you check the “Theme Compatibility” checked.

So do you have any custom CSS already?

I took a look at your site again and noticed you are using shortcodes to display your sermons archive page. So, you must have changed the name of the default Sermon Manager archive. Not a big deal, at least I can see what’s going on. I will comment about your other issue on that thread.

For your question about styling the filter bar. Since it isn’t a navigation, you really can’t style it as such. The filter bar uses a select tag (https://www.w3schools.com/tags/tag_select.asp) and styling is limited.

You can add this to the Additional CSS section of your theme:

/* Adjustments for the Filter Bar */
#wpfc_sermon_sorting option,
#wpfc_sermon_sorting select {
  font-size: 1em;
  padding: .25em;
}

#wpfc_sermon_sorting select {
  color: green;
  border-color: gray;
}

#wpfc_sermon_sorting option {
  color: black;
}

That should get you started. Obviously you can change the size, color etc or remove it.

• This reply was modified 1 year, 6 months ago by Mike Matenkosky. Reason: added select link