Styling output
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.
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.