Styling output
Styling is controlled by your theme, so our plugin doesn’t include built-in styling options. It automatically inherits your theme’s styles. If you’d like to adjust the appearance, you should check if your theme has styles for tables. If not, you can alter styles by adding custom CSS to your site.
There are a plenty of CSS classes embedded in the HTML output so you can style everything according to your preference. Below is a table with all the exposed CSS classes and an example, in bold, of what they style.
You can add CSS to your theme by going to your WP admin dashboard > Appearance > Customize > Custom CSS.
Indicator classes
| mb-bhi-display | It’s 2:00 AM — We’re closed |
| mb-bhi-time | It’s 2:00 AM — We’re closed |
| mb-bhi-oc-text | It’s 2:00 AM — We’re closed |
| mb-bhi-open | You can use this class to style the text when your business is open. Example: make text color green. |
| mb-bhi-closed | You can use this class to style the text when your business is closed. Example: make text color red. |
| mabel-bhi-businesshours | This class is placed on the opening hours container element (a table or a span). |
Time table classes
| mabel-bhi-businesshours | This class is placed on the opening hours <table>. Grabbing each entry’s day can be done via tr td:first-child. The opening times are the secons td element. |
| mabel-bhi-businesshours-inline | This class is placed on the opening hours parent element, if you choose to display them inline. Grabbing each entry can be done via the children as <span>. |
| mbhi-is-current | This class denoted the current day and opening times in the inline list or table. |
CSS code snippets
We have a few CSS code snippets for you to copy & paste here.