Can I Style ___?

Can I style this button? Can I style this heading? Can I style ____? It's one of the most frequent questions we get asked, and the short answer is: yes. But... we have some suggestions of the things that are designed to be easily tweaked and others to steer clear of in order to ensure you can update easily.

Anything you can normally style with CSS, you can do in our integrations, but some overrides are better ideas than others. Let us help you understand how to make good choices about what your override.

Easy: Colors, Fonts, Sizes

We absolutely encourage you to play with those! It's what we aim to provide with our integrations; a blank canvas that you can apply your styles and brand to.

If you inspect the integration in your browser, you will see a lot of classes attached to each element, and if you change the font-family property of the .MT_component class, the change will apply to pretty much all of the integrations, because all of the markup snippets you inserted in the website are sharing that class.

A lot of classes are descriptive, so if you would like to have a separate color for Pick-a-Spot mat spot and Pick-a-Spot bike spot, and/or have an icon in the background, there will be a class generated by our app that you can style.

Moderate: Hide Elements, Add Elements

Exercise with caution, just be mindful that many classes are being applied to more than one element. For example, if you would like to hide the name of a location in the schedule, you can add display: none to the .MT_schedule__classroom-name class. We tried to make the class names as descriptive and specific as possible, so try to apply the overrides to the most specific class available to reduce the possibility of styles having unintended consequences.

An example of creating and adding element is if you would like to hide the "Class Schedule" header from the app and replace it with a header of your choosing, you will need to hide the .MT_week-nav__title class with display: none and add your preferred header above the integration snippet.

Avoid If Possible: Layout

We know it can be quite tempting to attempt to rearrange some things within the integration, but we would recommend you don't to ensure you can upgrade easily. Simple additions or removals could easily break when we add new features.